如何访问全日历React中的今天按钮或如何在全日历Reacyt中的选定按钮中添加回调函数？

Question

问题：如何在 React 中访问这个“今天”按钮以及如何在其上应用回调函数？ 我正在尝试访问“今天”按钮。 下面在我的 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() { 日历.今天(); });

但这在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");
    }
}

Live demo: https://codepen.io/ADyson82/pen/PoLBevB

Relevant documentation: 
- https://fullcalendar.io/docs/datesSet
- https://fullcalendar.io/docs/date-navigation