如何在全日历V5中更改全日历源

问题描述

我正在使用完整日历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（）未记录任何内容。

解决方法

最后我找到了解决方案。我通过使用dateSet做到了。每次我们单击上一个/下一个按钮或更改视图类型时，都会调用datesSet。有关更多信息，请访问here。以下是我的代码。

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

fullcalendar fullcalendar-5 javascript