windowResize 触发时更改视图

Question

我正在尝试更新全日历视图，当日历调整大小时。

我正在使用 windowResize 活动。

这是现在的样子。

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('kt_calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
        defaultView: 'timeGridWeek',
        views: {
            timeGridWeek: {
                buttonText: 'week',
                dayCount: 4,
                duration: { days: 4 },
            },
            test: {
                buttonText: 'week',
                dayCount: 1,
                duration: { days: 1 },
            },
            abc: {
                buttonText: 'week',
                dayCount: 2,
                duration: { days: 2 },
            }
        },
        windowResize: function(view) {
            this.changeView("test");
        }
    });
    calendar.render();
});

windowResize 确实会触发，但我收到此错误：

The FullCalendar view "test" does not exist. Make sure your plugins are loaded correctly

我没有正确定义自定义视图还是缺少什么？

Answer 1

经过一些测试后发现，如果您使用 type 属性正确定义自定义视图，如 https://fullcalendar.io/docs/v4/custom-view-with-settings 中所述，则它不会抛出错误.

    views: {
        timeGridWeek: {
            buttonText: 'week',
            dayCount: 4,
            duration: { days: 4 },
        },
        test: {
            type: 'timeGrid',
            buttonText: 'week',
            dayCount: 1,
            duration: { days: 1 },
        },
        abc: {
            type: 'timeGrid',
            buttonText: 'week',
            dayCount: 2,
            duration: { days: 2 },
        }

(N.B。timeGridWeek 不需要它，因为您只是覆盖了 timeGrid 插件中已有的视图的名称。

演示：https://codepen.io/ADyson82/pen/ZEWKXRL

windowResize 触发时更改视图

Change view when windowResize triggers

javascript

fullcalendar

fullcalendar-4