Develop Reference

FullCalendar - drag between 2 calendars

I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();

Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);

FullCalendar.io extend event object from JSON events

I've been using an older version of fullcalendar and am having trouble recreating my calendars in the current version of fullCalendar.
I have seen the documentation and understand the extendedProp created in the event object, but I'm having trouble recreating this action from a JSON result of events.
Old fullCalendar v3.9
function DoCalendar() {
var URX = document.getElementById('url').value;
var URL = AppUrl + "JSON/GetCalendar/" + URX;
$('#Calendar').fullCalendar("destroy");
$('#Calendar').fullCalendar("render");
$('#Calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month'
},
defaultView: 'month',
//defaultDate:
height: 'auto',
fixedWeekCount: false,
allDay: false,
allDaySlot: false,
displayEventTime: false,
navLinks: false,
eventLimit: false,
events: { url: URL },
eventColor: 'yellow',
eventTextColor: 'black',
eventRender: function (event, element) {
element.find('.fc-title').html(event.title);
event.eventColor = event.color;
$(element).popover({
title: event.start,
content: event.popover,
trigger: 'hover',
placement: 'auto',
html: true,
container: 'body'
});
}
})
New fullCalendar v5
function TestCalendar() {
var calendarEl = document.getElementById('calendario');
var teamId = document.getElementById('teamId').innerText;
var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: {
url: eventsURL,
error: function () {
$('#script-warning').show();
}
},
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProp);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
}
The current JSON result
[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]
eventClick: function (info) {
alert('Event: ' + info.event.someField);
}
continues to return undefined
Any help is appreciated

According to documentation here,
https://fullcalendar.io/docs/event-object
You can get those details in object as below. it works for me.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [{
"id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field"
},
{ "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" },
{ "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }],
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProps["someField"]);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.css" rel="stylesheet"/>
<div id='calendar'></div>

Read a Json file through a json script and display it in a web page

I am a newbie to web and js programming so my issue might be simple.
I have found a piece code which allows me to create a calendar with all the rendez-vous in it.
The rendez-vous data are formatted into Json data and read through a JS script.
Here is the code :
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var data=
[
{
"title": "Rdv M.Ba",
"start": "2020-02-04T10:00:00"
},
{
"title": "Rdv M. Dia",
"start": "2020-02-07T16:00:00",
"end": "2020-02-07T16:15:00"
}
];
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
</script>
This way it is working but as soon as I replace the variable "data" in the script with that var rdv = require('./rdv.json'); (as you may have guessed rdv.json contains the exact same infos as the Json in var data with the same format) it does not display anything.
So could you tell me what is wrong here?
Thanks for your help

as pointed out in the comments require('./rdv.json') isn't standard javascript as found in the browser by default. You may be confused with nodejs or some other javascript framework.
A way to solve your question is adapted from here and is as follows:
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', './rdv.json', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
Here we have created a function that can load the rdv.json file as real json. Since it is a callback function, you should be able use the data as follows:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
loadJSON(function(response) {
data = JSON.parse(response);
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2020-02-12',
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: data
});
calendar.render();
});
});
Hope this answer helps you!

FullCalendar.js get date range as string from select event

I am using FullCalendar.js to enable a user to select a single date or range of dates from a visual calendar like this.
The documentation specifies that I should implement the select function to capture the start date startStr and end date endStr of the user's selection.
Below is the code I thought would do this:
$('#calendar').fullCalendar({
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultDate: today,
navLinks: true,
eventLimit: true,
events: [],
select: function(selectionInfo) {
console.log(selectionInfo.startStr);
console.log(selectionInfo.endStr);
}
});
Output:
undefined
undefined
Clearly my approach is not correct. What am I doing wrong?

This does not answer why the OP code is not working.
However, for anyone else experiencing the same issue, here is a different implementation which serves as a working solution.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dateClick: function(info) {
console.log(info.dateStr);
},
select: function(info) {
console.log(info.startStr);
console.log(info.endStr);
}
});
calendar.render();

I had similar issue, I was checking wrong documentation version (I am using v3) which select function is implemented as follow:
select: function(startDate, endDate) {
alert('selected ' + startDate.format() + ' to ' + endDate.format());
}

How can i get the fullcalendar v.4.2.0 instance?

So I have a fullCalendar (v.4.2.0) instance in my page (loaded/built on document.ready) and I want to access that fullCalendar instance in other functions to add events dynamically.
Using $('#calendar').fullCalendar('getView') it shows an error that the fullCalendar() method does not exist:
$(...).fullCalendar is not a function
How can I access that instance?
The code that I'm using to generate the calendar is the following:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid', 'dayGrid' ],
defaultView: 'timeGridWeek',
height: 700,
locale: 'pt',
allDaySlot: false,
handleWindowResize: true,
events: [
{
title: 'Teste1', // a property!
start: '2019-07-23 16:00',
end: '2019-07-23 17:00',
backgroundColor: '#fcba03',
borderColor: '#fcba03',
}
]
});
calendar.render();

Since you are using fullCalendar version 4, it is no longer written as a jQuery plugin, and so jQuery syntax to access the methods cannot be used. Instead, simply refer to your calendar variable (which probably needs to have a wide scope in your application - either global or easily accessible some other way). You'll notice that your existing code already does exactly that when it calls calendar.render();.
Additionally, in the specific case of the "getView" method, this has been replaced simply with a view property which refers to the current view.
For example (see the last line):
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid', 'dayGrid' ],
defaultView: 'timeGridWeek',
height: 700,
locale: 'pt',
allDaySlot: false,
handleWindowResize: true,
events: [
{
title: 'Teste1', // a property!
start: '2019-07-23 16:00',
end: '2019-07-23 17:00',
backgroundColor: '#fcba03',
borderColor: '#fcba03',
}
]
});
calendar.render();
var vw = calendar.view; //get the current view
Reference documentation
Documentation of the view property
Version 3 to Version 4 upgrade guide

**Create a config variable like below in js**
uiConfig = {
calendar: {
height: 450,
editable: true,
eventClick: alertEventOnClick,
eventDrop: alertOnDrop,
eventResize: alertOnResize,
eventRender: eventRender
}
};
**defines the above methods in js file**
alertEventOnClick = function (date, jsEvent, view) {}
alertOnDrop = function (date, jsEvent, view) {}
alertOnResize = function (date, jsEvent, view) {}
eventRender = function (date, jsEvent, view) {}
**and in html add below lines of code**
<div ui-calendar="uiConfig.calendar" id="myCalendar" calendar-watch-event="extraEventSignature(event)"
calendar="myCalendar" data-ng-model="eventSources">
</div>
**The Following code is another way of accessing calendar**
$('#myCalendar').fullCalendar({
eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);
}
});
**where Mycalender should be added in HTML like below**
<div ui-calendar="uiConfig.calendar" id="myCalendar"
calendar="myCalendar" data-ng-model="eventSources">
</div>