Javascript 更新日历用户界面，以反映使用'；戈托达特'；功能 简化测试用例

HTML:

缺陷描述

---

我正在尝试使用'gotoDate'函数更新日历的UI，以便传入该函数的日期将反映为所示范围的第一个日期。如果我在函数中传递的日期不在视图中显示的范围内，此功能将起作用。当我选择一个显示在当前范围内但不是第一个日期的日期时，UI不会更改。

这似乎是预期的行为-如果您想要的日期在当前渲染区域之外，日历只会麻烦更改日期（这可能涉及重绘日期并重新渲染事件）。我没有写代码，但这似乎是为了节省时间。您可以随时输入一个选项，看看是否可以添加一个选项以使其工作（甚至可以自己编写代码，因为它是开源的）。请注意，尽管它更可能在v5中实现，因为它现在已经取代了v4.P.s。你的例子有点奇怪，如果我可以这么说的话-你有这个“周”视图，你指定它为“resourceTimeline”，但它不是-你没有加载任何资源或时间线插件，所以它实际上是一个timeGridWeek视图，有一些自定义天，奇怪的24小时持续时间，只给它一个插槽，并将视图中第一天的日期放入左侧列中。这有点不直观…这是你试图做一个最小的例子的结果还是什么？我看不出它在实际使用中有什么意义。

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

    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();