我有一个仪表板,人们可以在其中放置多个完整日历小部件(想象一个团队仪表板为团队中的每个人提供完整日历小部件)。主要问题是性能。一个客户端有 16 个这样的小部件(都充满了事件),并且它们的数量不受限制。
只有第一个日历具有标题控件(其他日历使用 CSS 隐藏)。
我需要的是将更改传播到视图(切换basicWeek
到month
等),firstDay
(今天在basicWeek
,星期一在其他地方)和日期(prev
, next
, today
)从第一个日历到其他日历。
问题是性能。因为我并没有真正找到一种方法来做到这一点(这看起来并不像 hacky),除了 in viewRender
,每次更改都会调用它。这意味着,如果您切换basicWeek
到agendaWeek
第一个日历,则会将 传播firstDay
到其他日历(调用viewRender
),然后传播视图更改,这基本上会重新渲染所有日历(第一个日历除外)两次。
有没有办法传播这些更改并在其他日历上手动调用渲染(从我在源代码中看到的,可能没有),或者更好的方法来做到这一点?我也在考虑销毁日历并使用新选项重新初始化它们,但这可能会导致闪烁(而不是多次重新渲染造成的大量延迟)。我想到的选项之一是使用我自己的按钮(或重新使用默认按钮,只是解除它们与原始事件的绑定),但即便如此,在某些情况下我仍然需要多次重新渲染日历。
用 6 个几乎为空的日历切换视图大约需要 3 秒,这是不可接受的。
这就是我的viewRender
代码的样子(这是在自己的 fullcalendar 函数中,所以每个小部件都有自己的范围,其中包含缓存的变量和设置)
viewRender: function(view) {
console.log('viewRender', calendarid, lastView, view.type);
// Propagate all changes from first calendar to other calendars on the page
if ($('#' + calendarid).parents('.widgetCalendar').is(':first-child')) {
// Change the first day (basicWeek is always today, other views are always Monday)
if (view.type != 'basicWeek' && currFirstDay != 1) {
currFirstDay = 1;
$('.calendarDiv').fullCalendar('option', 'firstDay', 1);
return;
} else if (view.type == 'basicWeek' && currFirstDay != firstday) {
currFirstDay = firstday;
$('.calendarDiv').fullCalendar('option', 'firstDay', firstday);
return;
}
// Propagate the view change to other calendars
if (lastView != view.type) {
lastView = view.type;
$('.calendarDiv:not(#' + calendarid + ')').fullCalendar('changeView', view.type); // , view.intervalStart.valueOf());
}
// Propagate the date change to other calendars
if (lastDate != view.intervalStart.valueOf()) {
lastDate = view.intervalStart.valueOf();
$('.calendarDiv:not(#' + calendarid + ')').fullCalendar('gotoDate', view.intervalStart.valueOf());
}
}
},
Ps.:起初我以为这个问题主要是ajax请求获取新事件,但我将其更改为使用单个调用并缓存结果的函数。我认为这是 ajax 之间的一些延迟并且它们不是并发的(会话锁定)的主要原因。但是将其更改为新功能表明问题确实是重新渲染每个日历需要很长时间(大约 250 - 350 毫秒)。
如果缺少任何信息,请在评论中提问,我会更新问题。
全日历版本:3.4.0