Fullcalendar visibleRange 不适用于资源日网格

Question

我在活动中使用全日历 resource-daygrid，我正在尝试添加一个范围。

假设活动从 2021 年 1 月 12 日开始，到 2021 年 1 月 15 日结束。那么我只想显示这个范围，不允许点击上一个或下一个日期。

目前我正在使用这个代码：

const calendarElement = document.getElementById("programme");
    let calendar = new Calendar(calendarElement, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      locale: nlLocale,
      timeZone: "UTC",
      plugins: [ 
        resourceDayGridPlugin,
      ],
      initialView: 'resourceDayGridDay',
      resources: `${window.location.href}/getRoomsJSON`,
      eventDisplay: 'block',
      headerToolbar: {
        start: 'title,prev,next',
        center: '',
        end: ''
      },
      visibleRange: {
        start: '2020-01-12',
        end: '2020-01-15'
      },
      events: [
        { id: '1', resourceId: '2', start: '2020-01-12T12:00:00', title: 'event 1' },
        { id: '2', resourceId: '2', start: '2020-01-12T12:00:00', title: 'event 2' },
        { id: '3', resourceId: '3', start: '2020-01-12T12:00:00', title: 'event 4' },
        { id: '4', resourceId: '4', start: '2020-01-12T12:30:00', title: 'event 5' }
      ]
});

calendar.render();

看起来 visibleRange 被忽略了，因为它似乎根本没有做任何事情。我也不会收到控制台错误。

对此有什么想法吗？

Answer 1

可见范围不适用，因为您已经在使用具有固定时间范围的视图 - 日视图隐式具有一天的范围用于显示目的。根据其文档和示例，可见范围仅在您拥有没有预定义时间范围的自定义视图时才有用。

如果您想控制允许导航到的日期的总体范围（而不仅仅是在任何时候可见的日期），那么要设置的正确选项是有效范围 - 请参阅 https://fullcalendar.io/docs/validRange

Fullcalendar visibleRange 不适用于资源日网格

Fullcalendar visibleRange not working on resource-daygrid

fullcalendar

fullcalendar-5