Develop Reference

full calendar is not showing properly untill i click on any action button like(Month,week,day)

When i resize my window it showing properly, but on refresh of my page issue is come again and I click again on button to see proper calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('leave_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
height: 650,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: true,
nowIndicator: true,
selectable: true,
dayMaxEvents: true,
events: [
{title: 'Frank',
start: '2021-09-17',
end: '2021-09-21',
},
]
});
calendar.render()
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.9.0/main.min.css">
<div id='leave_calendar' class="leave-calendar"></div>

I moved the calendar to another empty page and simply include it in the PHP file its working properly, so there is only a render issue. Fullcalendar required dedicated page to render properly.

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);

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 render events dynamic

I am working with Bootstarp v4.0 with FullCalendar.io I have created FullCalendar as below
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
Where I am putting events from localStorage
I want to load fullcalendar from jQuery button click but I cannot do it. I also tried to create separate HTML file and try to load that HTML file in div by
$.get but it never render. I also tried to insert events by calendar.addEventSource( source ) but that too not works.
My jQuery button click
$(document).ready(function() {
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(data) {
$('#dvResult').html(data)
})
})
})
Please help me load calendar dynamically.

Alter your ajax to return only the events( as json), initialize the calendar when the ajax was successful
var calendar;
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
if(calendar) calendar.destroy();
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
})
add the div to your main page
<div id='calendar'></div>

more link to display list of events in fullcalendar not working in mobile view

$('#calendars').fullCalendar({
header: { left: 'agendaDay,agendaWeek,month', center: 'title', right: 'prev,next' },
defaultDate: moment(deteDefault, "YYYY MM DD"),
editable: false,
ignoreTimezone: false,
eventLimit: true, // allow "more" link when too many events firstDay: firstDay.getfirstDay(),
events: { url: $base_path, error: function() { $('#script-warning').show(); } } });
This is my code when events become more then it shows a link "+more" on full-calendar and on click over that shows other events. But in my case its not working in Mobile view as show in desktop view.If have any idea how this will work,please help. Thanks in advance