Javascript FullCalendar定期事件创建重复项
我正在为我的新网站实现一个日历。我从后端应用程序中检索事件,并使用fullcalendar在模式中显示结果。 我还使用fullcalendar()中的定期功能来方便使用我的日历 这里发生了一些奇怪的事情,当用户在周日创建一个重复事件时,它会被创建两次,日期不同,而在其他日子它就像一个符咒 以下是我的代码的简化版本:Javascript FullCalendar定期事件创建重复项,javascript,jquery,html,fullcalendar,fullcalendar-4,Javascript,Jquery,Html,Fullcalendar,Fullcalendar 4,我正在为我的新网站实现一个日历。我从后端应用程序中检索事件,并使用fullcalendar在模式中显示结果。 我还使用fullcalendar()中的定期功能来方便使用我的日历 这里发生了一些奇怪的事情,当用户在周日创建一个重复事件时,它会被创建两次,日期不同,而在其他日子它就像一个符咒 以下是我的代码的简化版本: <div> <div id='calendar'></div> </div> <div class="modal fade
<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>
我做了一个JSfiddle:
请通过在日历上选择并选中控制台查看创建的事件,在任何一天(星期日除外)创建事件。然后在周日创建一个事件,并再次检查,该事件将创建两次
你知道如何解决这个问题吗?我是否以正确的方式使用fullcalendar API 提示:查看您正在记录的每个“重复”事件的“开始”和“结束”日期,您可能会意识到该问题的发生并不特定于周日-它将发生在网格上的最后一天。尝试更改“第一天”设置,您将看到。在运行getEvents()方法时,我猜fullCalendar计算当前可见的事件和日期的方式存在缺陷(如果在“select”回调期间查看
configCalendar.view
,其中的所有日期都是正确的)。您可以尝试向维护人员提出这个问题,看看得到了什么样的响应。有关详细信息,请参阅。
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();