I am implementing a calendar for my new website I retrieve events from a BackEnd application and show result in a modal using fullcalendar. I also use recurring feature from fullcalendar (https://fullcalendar.io/docs/recurring-events) to facilitate the use of my calendar.
Here something strange happened, When the user creates a recurring event on Sunday it is created twice with different dates whereas it works like a charm on the other days.
Here is a simplify version of my code :
<div>
<div id='calendar'></div>
</div>
<div class="modal fade" id="add-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>New Event</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="Eventname">Event Name</label>
<input type="text" class="form-control" id="event-name" placeholder="Enter event name">
</div>
<div class="form-group">
<div class='input-group date' id='event-start' style="margin-top: 15px">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='event-end' style="margin-top: 15px">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="checkbox">
<label><input id="event-repeat"type="checkbox" value="" checked>Repeat Event ?</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="button-delete" type="button" class="btn btn-success btn-lg" onclick="AddEvent()">OK</button>
<button type="button" class="btn btn-danger btn-lg dismiss" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
and javascript :
var configCalendar;
var calendarEl = document.getElementById('calendar');
configCalendar = new FullCalendar.Calendar(calendarEl, {
editable:true,
height: 'parent',
contentHeight:'100%',
handleWindwoResize:true,
plugins: ['interaction','dayGrid','timeGrid', 'list'],
defaultView: 'timeGridWeek',
minTime: '00:00:00',
slotDuration: '02:00:00',
scrollTime : '08:00:00',
firstDay: 1,
columnHeaderFormat:{
weekday:'long',
day:'numeric',
month:'long'
},
eventClick : function(info){
$("#startTime").html(CalendarDate2String(info.event.start));
$("#endTime").html(CalendarDate2String(info.event.end));
$("#name").val(info.event.title);
$("#id").text(info.event.id);
$("#eventInfo").html(info.event.description);
$("#eventLink").attr('href', info.event.url);
$("#eventContent").modal('show');
},
eventDrop: function (info) {
console.log("event drop");
if (!copyKey) return;
var length = configCalendar.getEvents.length;
var eClone = {
title: info.oldEvent.title,
start: info.oldEvent.start,
end: info.oldEvent.end,
id: length + 1
};
configCalendar.addEvent(eClone);
var newEvent = configCalendar.getEventById(info.event.id);
var title = prompt("Enter a title for the new Event : ");
newEvent.setProp('title', title);
},
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit'
},
eventOverlap:false,
selectOverlap:false,
header: {
left: '',
center: 'title',
right: 'today prev,next'
},
selectable: true,
select:function (info) {
var event = {
id: configCalendar.getEvents().length + 1,
daysOfWeek: [info.start.getDay()],
startTime: moment(info.start).format('HH:mm'),
endTime: moment(info.end).format('HH:mm')
};
configCalendar.addEvent(event);
console.log(event);
console.log(configCalendar.getEvents());
}
});
configCalendar.render();
I made a JSfiddle : https://jsfiddle.net/Marech/0fdr5vq3/37/ Please create a event on any day (except sunday) by selecting on the calendar and check console to see the created events. Then create an event on Sunday and check again, the event is created twice.
Do you have any idea on how to fix this problem ? Do I use the fullcalendar API in a correct way ???