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 :)
Related
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',
},
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 am using angular ui calendar to render events, when the page loads application is rendering the calendar properly.
But when I refresh the screen, events block is not rendering.
I am using the following code to render the calendar in UI.
Following is my code block.
function returnCalendarConfig() {
return {
calendar: {
height: 500,
editable: false,
displayEventTime: true,
selectable: true,
timeFormat: 'hh:mm A',
stick: true,
defaultView: 'month',
columnFormat: 'dddd',
disableDragging: false,
header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'prev,next' },
eventClick: $scope.onEventClick,
dayClick: $scope.onDayClick,
eventRender: $scope.onEventRender
}
};
}
$scope.uiConfig = returnCalendarConfig();
function getCalendarEvents() {
var user = commonService.getUser();
console.log('User Object', user);
$scope.events = [];
$timeout(function () {
applyScope();
});
commonService.hideProcessingForSiteDetails(200);
}
getCalendarEvents()
getCalendarEvents method calls at end of the controller.
<div class="calendar" data-ng-model="eventSources" calendar="myCalendar" ui-calendar="uiConfig.calendar">
</div>
I am getting error when trying to implement Ext js Pro calendar in ext js 4.2
error is Cannot read property 'add' of undefined in line var startDate = Extensible.Date.add(Ext.Date.clearTime(start || new Date(), true)) in AbstarctCalndar.js;
My intail Code is
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "extjs/src/extensible/src",
"Extensible.example": "extjs/src/extensible/examples"
}
});
Ext.require([
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Here is simple code in app.js
Ext.onReady(function () {
var eventStore = Ext.create('Extensible.calendar.data.MemoryEventStore', {
// defined in ../data/Events.js
data: [{
"id": 1001,
"CalendarId": 1,
"StartDate": "2015-03-18",
"EndDate": "2015-03-28",
"Title": "Vacation",
"Notes": "Have fun"
}]
});
//
// example 1: simplest possible stand-alone configuration
//
var cal = new Ext.create('Extensible.calendar.CalendarPanel', {
eventStore: eventStore,
title: 'Basic Calendar',
width: 700,
height: 500
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 100,
height : 100,
border : true,
frame : true,
layout: 'auto',// auto is one of the layout type.
items: [cal]
});
});
Please give sample data of Event store data and Calendar Store Data.
Please suggest working code both in MVC and onReady
I'm trying to implement the loading callback function using the angular-ui calendar. I want my calendar to go to a specific date once it is loaded instead of going to the current date.
I can get this functionality using the dayClick method, however I have not been able to implement the loading function using angular at all. Below is the code, note that the loading callback is not console logging anything.
$scope.goToRootScopeDate = function() {
$scope.myCalendar.fullCalendar('gotoDate', $rootScope.day);
}
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: function(bool) {
if (bool) {
console.log('Done loading')
} else {
console.log("still loading")
}
}
},
};
If you want to manage the Loading callback method from the ng-controller...
Loading callback receives two parameters, not a boolean.
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: $scope.loading
},
};
And then you manage it in the controller with those 2 parameters
$scope.loading = function(isLoading, view){
alert("is loading" + isLoading);
}
You can reproduce it at this plunker where I added some annoying alerts to manage the loading callback.
But, if you only want to load a specific date at the first screen...
Just set the defaultdate in the config:
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
defaultDate:$scope.myDesiredDate
},
};