如何在fullcalendarV5.中更改fullcalendar源

Question

我使用的是完整日历v.3.0。我想做的是，我有两个日历来源。

1. 最初，当日历第一次显示时，我必须显示来自两个来源的事件
2. 我有一个下拉列表，如果它在加载日历后发生变化，那么我必须只显示下拉源中的事件
3. 如果用户更改视图类型或单击上一个/下一个，则我必须仅显示来自默认源的事件。从以上三点来看，我已经完成了第一点和第二点，但我在第三点上陷入了困境。我无法弄清楚如何在视图类型更改或单击上一个/下一个按钮时再次将下拉列表中的日历源更改为默认。以下是我的代码

最初加载日历的代码

var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
new Draggable(containerEl, {
itemSelector: '.fc-event'
});
var calendarEl = document.getElementById('calendar');
calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
timeZone: 'UTC',
defaultView: 'timeGridDay',
navLinks: true, 
fixedWeekCount: false, 
weekNumbers: true, 
editable: true,
droppable: true,
nowIndicator: true,
columnFormat: 'ddd D/M',
weekNumberTitle: 'Week ', 
lazyFetching: false, 
eventBackgroundColor: '#ffdfc2',
eventBorderColor: 'transparent',
eventTextColor: '#bf6109',
displayEventEnd: true,
showNonCurrentDates: false,
noEventsMessage: InformationMessages('23'),
slotDuration: '00:15:00',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [fcSources.default, fcSources.dropdown],
timeFormat: timeFormatOnSettings,
slotEventOverlap: false,                
eventRender: function (info) {
if (info.view.type === 'timeGridDay') {
var time = info.el.querySelector('.fc-time');
var span = document.createElement("span");
span.className = 'fullcalendar-event-close';
var node = document.createTextNode("X");
span.appendChild(node);
time.appendChild(span);
info.el.querySelector(".fullcalendar-event-close").addEventListener("click", function () {
info.event.remove();
});
}
},
eventDidMount: function (info) {
if (info.view.type === 'dayGridMonth') {
console.log('dayGridMonth');
}
if (info.view.type === 'timeGridWeek') {
console.log('timeGridWeek');
}
if (info.view.type === 'timeGridDay') {
console.log('timeGridDay');
}
}
});
calendar.render();

两个来源下拉列表和默认

var fcSources = {
dropdown: {
// dropdownsource code
},
default: {
// defaultsource code
}
};

删除所有下拉源更改，然后仅添加下拉源，然后重新绘制事件

$('.js-example-basic-single').change(function () {
var eventSource = [];
eventSource = calendar.getEventSources();
$.each(eventSource, function (key, value) {
value.remove();
});
calendar.addEventSource(fcSources.dropdown);
calendar.refetchEvents();
});

我试图使用eventDidMount更改源代码，但它没有启动，console.log((没有记录任何内容。

Answer 1

终于找到了解决方案。我通过使用datesSet做到了这一点。每次单击上一个/下一个按钮或视图类型发生更改时，都会调用datesSet。欲了解更多信息，请访问此处。以下是我的代码。

datesSet: function (dateInfo) {
var eventSource = [];
eventSource = calendar.getEventSources();
$.each(eventSource, function (key, value) {
value.remove();
});
calendar.addEventSource(fcSources.default);
calendar.refetchEvents();
}