Question

我有一个仪表板，人们可以在其中放置多个fullcalendar小部件（想象一个团队仪表板，其中包含一个团队中每个人的fullcalendar小部件）。这个问题的主要问题是性能。一个客户端有16个这样的小部件（所有事件都很多），并且数量不受限制。

只有第一个日历有标题控件（其他日历使用CSS隐藏它们）。

我需要的是将更改传播到视图（切换basicWeek到month等），firstDay（今天在basicWeek，在其他地方的星期一）和从第一个日历到其他日历的日期（prev，next，today）。

问题是效果。因为我没有真正找到一种方法（除了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-350ms）需要长时间白色。

如果缺少任何信息，请在评论中提问，我会更新问题。

Fullcalendar版本：3.4.0

多个fullacalendar小部件 - 同步视图更改

0 个答案: