FullCalendar中gotoDate函数无法跳转指定日期问题求助

问题描述 #

点击下拉选择框对应选项后，调用ref.current?.getApi().gotoDate('2023-01-01')无任何反应，尝试传入毫秒时间戳也无效，日历始终只会跳转到当日日期。相关代码如下：

const handleChange = (e: IYearOption) => {
  if(e.value === '1') {
    console.log('HI');
    ref.current?.getApi().gotoDate('2023-01-01')
  }
}

<section>
  <Select
    name="select-year"
    className="select-year"
    placeholder="Select date"
    onChange={handleChange}
    options={optionYear}
    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
  />
</section>

<FullCalendar
  ref={ref}
  now={new Date().toISOString()}
  initialDate={new Date().toISOString()}
  scrollTime={milliseconds - 86400000}
  resources={resource}
  // @ts-ignore
  events={query}
  schedulerLicenseKey="XXX" 
  plugins={[ resourceTimelinePlugin, interactionPlugin, dayGrid, scrollGrid ]}
  initialView='resourceTimelineYear'
  allDayContent={(el) => console.log(el)}
  views={{
    resourceTimelineYear: {
      slotDuration: { hours: 24 },
    }
  }}
  locale='de'
  selectOverlap
  stickyHeaderDates
  droppable
  height='auto'
  stickyFooterScrollbar
  aspectRatio={0.8}
  editable={false}
  select={handleSelectDate}
  selectable={true}
  selectMirror={true}
  //eventChange={(e) => console.log(e)}
  
  resourceGroupField='building'
/>

解决步骤 #

• 验证FullCalendar API实例是否正确获取
  在handleChange中添加日志，确认getApi()返回有效实例，同时改用Date对象传入并强制渲染：

  const handleChange = (e: IYearOption) => {
    if(e.value === '1') {
      console.log('HI');
      const calendarApi = ref.current?.getApi();
      console.log('Calendar API:', calendarApi); // 检查控制台是否输出实例对象
      if(calendarApi) {
        calendarApi.gotoDate(new Date('2023-01-01'));
        calendarApi.render();
      }
    }
  }
  

• 移除可能冲突的属性
  暂时注释掉now和initialDate属性，这两个属性设置为当前日期可能干扰跳转逻辑：

  <FullCalendar
    ref={ref}
    // now={new Date().toISOString()}
    // initialDate={new Date().toISOString()}
    // ...其他属性
  />
  

• 结合changeView强制切换视图后跳转
  如果单独调用gotoDate无效，尝试先重新指定视图再跳转：

  if(calendarApi) {
    calendarApi.changeView('resourceTimelineYear');
    calendarApi.gotoDate(new Date('2023-01-01'));
  }
  

• 配置视图可见范围
  若resourceTimelineYear视图默认限制显示年份，手动设置visibleRange确保目标年份在范围内：

  views={{
    resourceTimelineYear: {
      slotDuration: { hours: 24 },
      visibleRange: {
        start: '2023-01-01',
        end: '2024-01-01'
      }
    }
  }}
  

内容的提问来源于stack exchange，提问作者newstacker