javascript - 更新日历 UI 以反映选择的新日期作为使用“gotoDate”函数显示的第一个日期

Question

简化的测试用例

https://jsfiddle.net/ryj1023/5epnoguk/5/

HTML：

    <button
           onclick="updateDateRange()"
          >
            Click
          </button>
    <div id='calendar'></div>

JavaScript：

    const updateDateRange = () => {
     // calendar.gotoDate(new Date('11-04-2020')); // this will change the view because the date passed in the function isn't currently in view
     calendar.gotoDate(new Date('10-04-2020')); // this will not update the view with the passed in date as the first date in range because it's already in view
     }
     
     var calendarEl = document.getElementById('calendar');
     var calendar = new FullCalendar.Calendar(calendarEl, {
          events: [
            {
              id: 'a',
              resourceId: 'a',
              title: 'All Day Event',
              start: '2020-09-01',
            },
            {
              title: 'Long Event',
              start: '2020-09-07',
              end: '2020-09-10',
            },
          ],
          allDaySlot: false,
          displayEventTime: false,
          header: false,
          plugins: [ 'dayGrid', 'timeGrid', 'rrule'],
          defaultView: 'timeGridWeek',
          resourceOrder: 'sort',
          defaultDate: new Date('10-01-2020'),
    
          schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    
          views: {
            month: {
              type: 'dayGridMonth',
            },
            week: {
              type: 'resourceTimeline',
              slotLabelFormat: [
                {
                  weekday: 'short',
                  day: 'numeric',
                  month: 'short',
                },
              ],
              resourceLabelText: 'Property',
              duration: {
                days: 14, // getDefaultWeekDuration(start, end)
              },
              dateIncrement: {
                days: 1,
              },
              slotDuration: '24:00:00',
            },
          },
    
          // eventRender: ({ date, el, view }) => {
          // },
          themeSystem: 'bootstrap',
          eventOverlap: false,
          contentHeight: 'auto',
          resourceAreaWidth: '10%',
    
          resources: [{ id: 'a', title: 'Auditorium A' }],
        });
     
     calendar.render();

错误描述

我正在尝试使用“gotoDate”函数更新日历的 UI，以便我传递给函数的日期将反映为显示范围的第一个日期。如果我在函数中传递的日期尚未在视图中显示的范围内，则此功能有效。当我选择显示在当前范围内但不是第一个日期的日期时，UI 不会更改。

标签： javascriptfullcalendarfullcalendar-4fullcalendar-scheduler