我正在为我的新网站实现一个日历,我从后端应用程序检索事件并使用 fullcalendar 在模式中显示结果。
我还使用 fullcalendar 的重复功能(https://fullcalendar.io/docs/recurring-events https://fullcalendar.io/docs/recurring-events)以方便使用我的日历。
这里发生了一些奇怪的事情,当用户在周日创建一个重复事件时,它会以不同的日期创建两次,而在其他日子它就像魅力一样。
这是我的代码的简化版本:
<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>
和 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();
我做了一个 JSfiddle :https://jsfiddle.net/Marech/0fdr5vq3/37/ https://jsfiddle.net/Marech/0fdr5vq3/37/请在任何一天(星期日除外)通过在日历上进行选择来创建活动,然后检查控制台以查看创建的活动。然后周日创建一个事件,再次查看,该事件创建了两次。
您知道如何解决这个问题吗?我是否以正确的方式使用 fullcalendar API ???