如何使用“下拉”过滤器更改“React Fullcalendar”日期？

Question

我想使用“下拉”过滤器更改组件的查看日期。

有很多关于'view changing'的答案，但是没有关于'changing date'的答案T^T

我能得到一些很好的答案吗？

       <div>
          <select value={year} onChange={onYearChange}>
            <option value={2023}>2023</option>
            <option value={2024}>2024</option>
            <option value={2025}>2025</option>
            <option value={2026}>2026</option>
            <option value={2027}>2027</option>
            {/* add more years if necessary */}
          </select>
          <select value={month} onChange={onMonthChange}>
            <option value={1}>January</option>
            <option value={2}>February</option>
            <option value={3}>March</option>
            <option value={4}>April</option>
            <option value={5}>May</option>
            <option value={6}>June</option>
            <option value={7}>July</option>
            <option value={8}>August</option>
            <option value={9}>September</option>
            <option value={10}>October</option>
            <option value={11}>November</option>
            <option value={12}>December</option>
          </select>
        </div>

        <FullCalendar
          plugins={[dayGridPlugin, interactionPlugin]}
          height={'70vh'}
          events={events}
          datesSet={({ start, end }) => onChangeStartEnd(start, end)}
          eventClick={onEventClick}
          dateClick={onDateClick}
          selectable="true"
        />

我想将 select 标签与 Fullcalendar 相关联

Answer 1

处理 select 标签的变化事件（我不知道在 React 中具体是怎么做到的，但看起来像你做的，我只能在 vanilla JS 中做），然后在回调中，运行 https:/ /fullcalendar.io/docs/Calendar-gotoDate 告诉 fullCalendar 更改日期。

如果您需要了解如何访问 fullCalendar 对象以调用其函数，请参阅 https://fullcalendar.io/docs/react 的“Calendar API”部分。

确保你包括

ref={this.calendarRef}

在你的

<FullCalendar

声明中，然后你可以按照这些行使用函数：

someFunction() {
    let calendarApi = this.calendarRef.current.getApi();
    calendarApi.goToDate("2018-06-01");
}