如何在FullCalendar React中访问今天按钮，或者如何为按钮添加回调函数？

Question

如何在 React 中访问 fullCalendar“今天”按钮？例如如何对其应用回调函数？

下面是我的 FullCalendar 组件。

<FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionGridPlugin]}
          initialView={'dayGridMonth'}
          headerToolbar={{
            start: 'dayGridMonth,timeGridWeek,timeGridDay',
            center: 'title',
            end: 'today prev,next',
          }}
          height={'80vh'}
          handleWindowResize={true}
        />

我试过这个：

document.getElementById('my-today-button').addEventListener('click', function() {
  calendar.today();
});

但这在 React 中不起作用。

Answer 1

据我所知，这个按钮没有直接回调。但它所做的只是执行 fullCalendar 的 today 函数。

与所有其他日期导航函数和触发器一样，这将导致 datesSet 回调运行。您可以使用该回调来查看日历已设置为哪个日期，以及是否与今天的日期匹配。这样，您就可以检测到日历何时移动到今天的日期，无论是通过按钮还是其他方法完成。

请注意，由于大多数日历视图都会显示日期范围，因此回调会返回该范围的开始和结束时间。因此，您需要计算今天的日期是否在该范围内，而不是进行简单的匹配。

例如

datesSet: function( dateInfo ) {
  console.log(dateInfo.startStr, dateInfo.endStr);
  var today = new Date();
  if (today >= dateInfo.start && today < dateInfo.end)
    {
      console.log("Today's date is being shown");
    }
}

现场演示：https://codepen.io/ADyson82/pen/PoLBevB

相关文档：

• https://fullcalendar.io/docs/datesSet
• https://fullcalendar.io/docs/date-navigation