使用多个日历时完整日历事件消失 - Meteor

Question

我想在我的 Meteor 应用程序中使用 Fullcalendar 在一页上显示多个项目的日程安排。每个项目都有自己的基本周历视图和自己的事件。当只渲染一个日历时，我能够让日历按预期工作。

对于多个日历，事件会在第一次渲染时显示，但在重新获取事件时会消失。我有一个自定义按钮，可以同时更改每个日历的星期。改变周后，事件消失。使用单个日历时，相同的功能运行良好。我参考了 George McKnight 的视频作为起始参考：https://www.youtube.com/watch?v=e2jRxw0saRc

我认为在 for 循环中呈现多个日历存在问题。我已经看到一些论坛讨论了事件 'stick' 选项，但我没有遇到事件随一个日历消失的问题，我认为这不是问题所在。我还看到一些谈话指出我尝试使用事件源，但不确定如何在我的用例中应用它。

这是我的代码片段：

Template.ScheduleAdminTest.rendered = function () {
    var orgId = UserProfiles.findOne({userId:Meteor.userId()}).orgId;
    var items = Items.find({}, {reactive: false}).fetch();
    
    // INITIALIZE VARIABLES
    var itemId;
    var events;
    var itemReservations;

    // RENDER CALENDAR FOR EACH ITEM
    for (var i = 0; i < items.length; i++) {
        itemId = items[i]._id;

        $('#calendar-'+itemId).fullCalendar({
            header:  false,
            firstDay: 0, // SUNDAY
            contentHeight: 100,
            eventLimit: true,
            defaultView: 'basicWeek',
            views: {
                week: {
                    eventLimit: 5
                }
            },
            editable: false,
            eventColor: '#2BA9A5',
            events: function(start, end, timezone, callback) {
                events = [];
                itemReservations = ItemReservation.find({itemId: itemId}, {reactive:false});
                
                itemReservations.forEach(function(reservation) {
                    events.push({
                        id: reservation._id,
                        title: reservation.title,
                        start: reservation.start,
                        end: reservation.end,
                        quoteId: reservation.quoteId,
                        itemId: reservation.itemId,
                    });
                });

                callback(events);
            },
            eventClick: function(calEvent, jsEvent, view) {
                // code for rendering a modal for editing and reviewing events
            },
            dayClick: function( date, jsEvent, view) {   
                // code to display modal for adding an event
            }

        });  // end calendar set

    } // end for loop for items
};

Answer 1

在呈现每个日历后尝试此操作：

  $('#calendar-'+itemId).fullCalendar('removeEvents');
  $('#calendar-'+itemId).fullCalendar('addEventSource', events)

使用多个日历时完整日历事件消失 - Meteor

Full calendar events disappearing when using multiple calendars - Meteor

javascript

jquery

calendar

fullcalendar

meteor