I have installed fmstarting point solution and it has a calendar done by java.
How can I change default weekends from sat sun to other days?
The code is down below.
BR
Dino
// This is where you can change the settings for your calendar.
var calendarEl = document.getElementById('calendar');
var calendar;
var initCalendar = function() {
calendar = new FullCalendar.Calendar(calendarEl, {
//Custom Button to add task
customButtons: {
FMNewTask: {
text: '+ Add Appointmen',
click:
function() {
var focus = calendar.getDate().toISOString();
doThis = NewTask(focus, '(0882)NewTask');
}
}
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'FMAdd,FMNewTask',
center: 'title',
right: 'prev,next today' //More options: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: '**VIEW**',
defaultDate: '**DefaultDate**',
navLinks: true, //Can click day/week names to navigate views.
editable: true,
eventLimit: true, //Allow "more" link when too many events
locale: 'en', //To change the locale. Examples: en-gb, fr, zh-tw
slotDuration: '00:30:00',
slotLabelInterval: '00:60:00',
minTime: '10:00:00',
maxTime: '19:00:00',
scrollTime: '06:00:00',
nowIndicator:true,
weekends:true,
businessHours: false,
businessHours: { daysOfWeek: [6,0,1,2,3,], // enable all days
startTime: '10:00',
endTime: '19:00',
},
Related
For some reason calendar doesn't populate json events on mobile devices.
I tried this page using Chrome and Safari for iPhone 7 but it doesn't work properly.
countExtra = 0;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '<?=date("Y-m-d")?>',
editable: false,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: '/wp-content/themes/bridge-child/calendar/routines.php?categories=<?=$_GET["categories"]?>&q=<?=$_GET["q"]?>',
failure: function() {
jQuery("#errorMessage").css("display", "block");
}
},
loading: function(bool) {
document.getElementById('loading').style.display = bool ? 'block' : 'none';
}
});
calendar.render();
});
```javascript
I don't see any error messages.
SOLUTION:
For some reason Safari is conflicting with the date format so I had to change 2019-01-01 10:00:00 to 2019-01-01T10:00:00
Just add a T between the date and time.
After that, Safari and all mobile browsers started working :)
I am using Angular JS and FullCalendar control for one of my requirement.
My code for full calendar in Angular JS is as below:-
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" id="calendar"></div>
$scope.uiConfig = {
calendar: {
editable: true,
header: {
left: 'title',
center: '',
//right: 'today prev,next'
right: 'today next'
},
aspectRatio: 1.25,
selectable: true,
events: $scope.eventsselection,
dayClick: $scope.dayClick,
validRange: function (nowDate) {
return {
start: nowDate.clone().subtract(1, 'days'),
};
}
}
};
I want to add my custom business logic when user clicks on "today" button at top right. How to achieve this?
You can define a customButton with the text 'Today'
customButtons: {
myTodayButton: {
text: 'Today',
click: function() {
/* Add custom logic here */
$('#calendar').fullCalendar('today'); //will change calendar to today
}
}
},
In order to be able to see this button you must add it to the header option instead of the today option
header: {
left: 'title',
center: '',
right: 'myTodayButton next'
},
I have a requirement to toggle between the view in kendo UI scheduler, my view will be week but on checkbox click i want to change week view type between week and workWeek; how to do this?
Here is html
<label><input type="checkbox" ng-model="hideWeekend" ng-change="hideWeekends(hideWeekend);" value="true" />Hide Weekend</label>
<div id="team-schedule">
<div kendo-tooltip k-content="tooltipContent" k-filter="'.k-event'" class="k-group">
<div id="target"></div>
<div kendo-scheduler="weeklyScheduler" k-options="weeklySchedulerOptions" id="scheduler"></div>
</div>
</div>
JS code
$scope.schedulerDS = new kendo.data.SchedulerDataSource({
batch: true,
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
});
var weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule = function (value) {
$scope.weeklySchedulerOptions = {
autoBind: false,
date: new Date(),
height: 600,
views: [{ type: value, selected: true, majorTick: 15, footer: false, allDaySlot: false }],
timezone: "Etc/UTC",
dataSource: $scope.schedulerDS,
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
};
};
$scope.hideWeekends = function (value) {
if (value == true) {
weekOrWorkWeek = 'workWeek';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
} else {
weekOrWorkWeek = 'week';
$scope.loadWeeklySchedule(weekOrWorkWeek);
$scope.weeklySchedulerOptions.dataSource.read();
}
};
$scope.loadWeeklySchedule(weekOrWorkWeek);
You can enable this view by adding the view type "workWeek" to the views array of the scheduler options object from the get go.
This will also show a view selection on the scheduler top toolbar but you can remove it by adding a CSS rule:
.k-scheduler-views {
display: none;
}
Switching between views can be done using the scheduler's view method:
$("#scheduler").data("kendoScheduler").view("ViewName")
Here's a Plunker with a demo.
I use the licensed fullcalendar with groupByDateAndResource set to true. I don't show a header as I built a custom one.
On the day view I only see the resource title but no date
On the other views I only see the date no resource title
How can I show both on both all views the way it appears in the documentation.
This is how my calendar object is configured (I use angular):
calendar: {
defaultDate: this.$stateParams.date,
height: $window.innerHeight - 45,
editable: true,
resources: [],
groupByDateAndResource: true,
header: '',
defaultView: 'agendaWorkWeek',
firstDay: 1,
minTime: '07:00:00',
maxTime: '22:00:00',
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
slotDuration: '00:15:00',
slotLabelInterval: '1:00',
allDaySlot: false,
eventColor: '#333333',
eventTextColor: '#000',
columnFormat: {
month: 'dddd',
agendaWeek: 'ddd, MMM D',
agendaDay: 'dddd, MMM D, YYYY'
},
nowIndicator: true,
displayEventTime: true,
displayEventEnd: {
month: false,
basicWeek: true,
'default': true
},
views: {
agendaThreeDay: {
type: 'agenda',
columnFormat: 'ddd, MMM D',
duration: {days: 3}
},
agendaWorkWeek: {
type: 'agenda',
columnFormat: 'ddd, MMM D',
duration: {days: 7},
weekends: false
}
},
dayClick: dayClick,
eventClick: eventClick,
eventResize: changeTime,
eventDrop: changeTime,
windowResize: windowResize
}
This sounds like a css problem. Did you overwrite the height for .fc-widget-header? That would make sense if you had no resources but if you have them it will lead to your issues.
launch: function() {
// The following is accomplished with the Google Map API
var position = new google.maps.LatLng(12.9833, 77.5833), //Sencha HQ
infowindow = new google.maps.InfoWindow({
content: 'bengaluru'
}),
//Tracking Marker Image
image = new google.maps.MarkerImage(
'resources/images/point.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
),
shadow = new google.maps.MarkerImage(
'resources/images/shadow.png',
new google.maps.Size(64, 52),
new google.maps.Point(0, 0),
new google.maps.Point(-5, 42)
),
trackingButton = Ext.create('Ext.Button', {
iconMask: true,
iconCls: 'locate'
}),
trafficButton = Ext.create('Ext.Button', {
iconMask: true,
pressed: true,
iconCls: 'maps'
}),
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype:'button',
id:'calculate',
text:'calculate',
handler:function(){
alert('hello');
}
}
]
});
var mapdemo = Ext.create('Ext.Map', {
mapOptions : {
center : new google.maps.LatLng(37.381592, 122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
plugins : [
new Ext.plugin.google.Tracker({
trackSuspended: true, //suspend tracking initially
allowHighAccuracy: false,
marker: new google.maps.Marker({
position: position,
title: 'My Current Location',
shadow: shadow,
icon: image
})
}),
new Ext.plugin.google.Traffic()
],
listeners: {
maprender: function(comp, map) {
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
}
}
});
Any ideas how can i measure distance between two destinations whose latitude and longitude are know........
this code is taken from the example provided by the sencha touch2 with little modification.
Its for sencha touch 2
try google.maps.geometry.spherical.computeDistanceBetween(from:LatLng, to:LatLng, radius?:number)
radius is the earth's radius = 6371000 metres (average)