Javascript 如何在fullcalendar V5中更改fullcalendar源

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

最初，当日历第一次显示时，我必须显示来自两个来源的事件

我有一个下拉列表，如果它在加载日历后发生变化，那么我必须仅显示下拉列表源中的事件

如果用户更改视图类型或单击“上一个/下一个”，则我必须仅显示来自默认源的事件。 从以上三点来看，我已经完成了第一点和第二点，但是我在第三点上卡住了。在查看类型更改或单击“上一次/下一次”按钮时，我无法确定如何将日历源从下拉列表再次更改为默认值。下面是我的代码

最初加载日历的代码

     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（）没有记录任何内容。

最终我找到了解决方案。我是用datesSet做的。每次单击“上一步/下一步”按钮或视图类型更改时，都会调用DateSet。欲了解更多信息，请访问。下面是我的代码

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

---

最后我找到了解决办法。我是用datesSet做的。每次单击“上一步/下一步”按钮或视图类型更改时，都会调用DateSet。欲了解更多信息，请访问。下面是我的代码

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

---

使用eventDidMount更改源代码没有任何意义-当您从源代码加载事件时会发生这种情况，现在决定使用哪个源代码已经太晚了！这些挂钩：在视图更改时运行。但是要注意无限循环，因为添加事件源可能会导致视图再次渲染，这将导致您再次选择事件源，这将导致视图再次渲染，等等。请仔细编写代码，以免不必要地添加/删除事件源。@ADyson我使用viewDidMount钩子而不是eventDidMount，方法如下，但我认为这个钩子对我不起作用，因为在更改视图或单击“上一步/下一步”按钮后，我在控制台中看不到任何内容。”viewdimount:function（arg）{console.log（arg）；}。还有什么我需要做的吗。viewDidMount应该可以像那样工作-演示：。请注意，它仅在切换视图时运行，而不是在按“下一步/上一步”时运行（因为这不需要重新渲染视图）。但为什么需要在上一步/下一步之后重置源？这对用户来说听起来很烦人。如果我作为用户使用下拉列表过滤事件，我希望这种情况会一直持续到下次我更改下拉列表时，而不是仅仅因为我试图浏览日历中的另一个日期，或者在列表中而不是网格中查看事件而一直重设。那将是令人愤怒的。我个人认为这不是一个好的要求。使用eventDidMount更改源代码没有任何意义-这发生在您从源代码加载事件时，现在决定使用哪个源代码为时已晚！这些挂钩：在视图更改时运行。但是要注意无限循环，因为添加事件源可能会导致视图再次渲染，这将导致您再次选择事件源，这将导致视图再次渲染，等等。请仔细编写代码，以免不必要地添加/删除事件源。@ADyson我使用viewDidMount钩子而不是eventDidMount，方法如下，但我认为这个钩子对我不起作用，因为在更改视图或单击“上一步/下一步”按钮后，我在控制台中看不到任何内容。”viewdimount:function（arg）{console.log（arg）；}。还有什么我需要做的吗。viewDidMount应该可以像那样工作-演示：。请注意，它仅在切换视图时运行，而不是在按“下一步/上一步”时运行（因为这不需要重新渲染视图）。但为什么需要在上一步/下一步之后重置源？这对用户来说听起来很烦人。如果我作为用户使用下拉列表过滤事件，我希望这种情况会一直持续到下次我更改下拉列表时，而不是仅仅因为我试图浏览日历中的另一个日期，或者在列表中而不是网格中查看事件而一直重设。那将是令人愤怒的。我个人认为这不是一个好的要求。