我想在Meteor应用程序中使用Fullcalendar来在一个页面上显示多个项目的时间表。每个项目都有自己的基本周历视图和自己的事件。当只渲染一个日历时,我能够按预期工作日历。
对于多个日历,事件会在首次渲染时显示,但在重新获取事件时会消失。我有一个自定义按钮,可以同时更改每个日历的周数。更改周后,事件消失。使用单个日历时,相同的功能正常工作。我引用了George McKnight的视频作为开始参考:https://www.youtube.com/watch?v=e2jRxw0saRc
我认为在for循环中渲染多个日历是个问题。我已经看过一些论坛谈论事件'棒'选项,但我没有问题,事件消失与一个日历我不认为这是问题。我也看到一些谈话指向我尝试事件来源,但不知道我如何在我的用例中应用它。
以下是我的代码片段:
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
};
答案 0 :(得分:1)
在呈现每个日历后尝试此操作:
$('#calendar-'+itemId).fullCalendar('removeEvents'); $('#calendar-'+itemId).fullCalendar('addEventSource', events)