Jquery完整日历（页面刷新后样式更改）

Question

这是我创建活动后的日历：

这是在页面刷新之后：

任何人都可以帮我理解如何在页面刷新后保持相同的风格，特别是中间的垂直线？有时线也会增加。

fullCalendar JS如下：

{
  "title": "Google Custom Search - lectures",
  "totalResults": "970`0000",
  "searchTerms": "lectures",
  "count": 10,
  "startIndex": 11,
  "inputEncoding": "utf8",
  "outputEncoding": "utf8",
  "safe": "off",
  "cx": "[REDACTED]"
}

数据库中未创建重复事件。发生了什么事情HTML在刷新后呈现两次。特别是事件容器类下的$('#calendar').fullCalendar({ locale: 'nl', weekends: true, // false will hide Saturdays and Sundays defaultView: 'agendaWeek', allDaySlot: false, slotLabelFormat: "HH:mm", axisFormat: 'HH:mm', timeFormat: 'HH:mm', aspectRatio: 1, editable: true, eventStartEditable: true, selectable: true, selectHelper: true, unselectAuto: false, eventLimit: true, dragScroll: true, eventOverlap: false, slotEventOverlap: false, header: { left: 'title', center: '', right: 'prev,next,today,agendaWeek,agendaDay' }, views: {}, eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) { var title = "Available"; var eventInfo; eventInfo = { title: title, start: event.start, end: event.end, id: event.id }; updateEvent(eventInfo); }, eventResize: function (event, dayDelta, minuteDelta, revertFunc) { var title = "Available"; var eventInfo; eventInfo = { title: title, start: event.start, end: event.end, id: event.id }; updateEvent(eventInfo); }, select: function (start, end) { var title = "Available"; var eventData; if (title) { eventData = { title: title, start: start, end: end }; $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true createEvent(eventData); } $('#calendar').fullCalendar('unselect'); }, eventSources: [{ events: function (start, end, timezone, callback) { var employeeId = $("#employee-Id").val(); $.ajax({ url: '../' + employeeId + '/events', dataType: 'json', success: function (response) { var events = $.parseJSON(response.data); $('#calendar').fullCalendar('addEventSource', events); callback(events); } }); } }], eventRender: function (event, element) { //delete event on double click..Tanvir element.one().bind('dblclick', function (e) { /* e.preventDefault(); $(this).prop('disabled', true); setTimeout(function () { $(this).prop('disabled', false); }, 500);*/ $("#startTime").html(moment(event.start).format('MMM Do YYYY, h:mm A')); $("#endTime").html(moment(event.end).format('MMM Do YYYY,h:mm A')); $("#eventContent").dialog({modal: true, title: event.title, width: 100}); $('.delete-event').bind('click', function (e) { $('#calendar').fullCalendar('removeEvents', event._id); deleteEvent(event.id); $("#eventContent").hide(); }); $('.discard-delete').bind('click', function () { $("#eventContent").hide(); }); }); }, }); }); 在刷新后呈现两次。

Answer 1

重复的原因在于events函数：

$('#calendar').fullCalendar('addEventSource', events);
callback(events);

您正在将事件对象添加为事件源，并以记录的方式将它们作为事件列表发送回日历。因此，虽然事件可能不会在您的数据库中重复，但您的代码会将两组相同的事件数据发送到日历，因此它们会显示两次。

您只需删除此行：

$('#calendar').fullCalendar('addEventSource', events);

因为在这种情况下完全没有必要。