反应中的完整日历在标题元素上添加点击事件答案

【问题标题】：Full calendar in react add click event on header elements反应中的完整日历在标题元素上添加点击事件
【发布时间】：2020-01-28 07:38:05
【问题描述】：

我在我的项目中使用full calendar。我的要求是在标题按钮上使用点击事件，如上一个、下一个和今天按钮等。

以下是我使用完整日历的方法，并且标题包含这些给定的按钮。

<FullCalendar
  defaultView="dayGridMonth"
  header={{
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
  }}
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  ref={this.calendarComponentRef}
  weekends={this.state.calendarWeekends}
  events={this.state.calendarEvents}
  eventBorderColor={""}
  eventLimit={true}
  views={{
    timeGrid: {
      eventLimit: 3 // adjust to 3 only for timeGridWeek/timeGridDay
    },
    dayGrid: {
      eventLimit: 4
    }
  }}
  viewRender={function(view, elm) {
    console.log(view, elm);
  }}
  // eventRender = {function(eventObj, elm) {
  //   console.log(eventObj , elm);

  // }}
  select={function(start, end) {
    console.log(start, end);
  }}
  slotDuration={"00:15:00"}
  slotLabelInterval={"00:05:00"}
  dateClick={this.handleDateClick}
/>;

我想在从标题更改视图时触发一个函数。例如 - 在将视图从 dayGridMonth 更改为 timeGridWeek 时，我想重新加载数据。所以我需要调用一个函数。与上一个、下一个和今天按钮相同。请帮帮我。如果我给出的信息不清楚，我可以提供更详细的解释。

【问题讨论】：

试试https://fullcalendar.io/docs/customButtons
@DoubleH 我浏览了这个链接，没有提示标题按钮的点击事件。它展示了如何添加新按钮及其点击事件。
您可以使用自定义按钮覆盖这些按钮并通过单击按钮加载新数据
“在将视图从 dayGridMonth 更改为 timeGridWeek 时，我想重新加载数据”...这就是您设置事件源（而不是将简单的数据数组传递给 fullCalendar）的原因 - 然后 fullCalendar 将自动为您处理它，而无需担心按钮（因为除此之外，它们实际上并不是更改视图或日期范围的唯一方法）。请参阅 fullcalendar.io/docs/events-json-feed 或 fullcalendar.io/docs/events-function 了解动态向 fullCalendar 提供事件源的两种方式。

标签： javascript reactjs fullcalendar

【解决方案1】：

我正在使用 beta-v5，您需要的回调是 datesDidUpdate。

在 4.4.2 版本中，他们有 datesRender，但它导致 UI 出现问题。

【讨论】：

【解决方案2】：

customButtons: {
                myCustomButton: {
                    text: 'reset',
                    click: function() {
                        var confirm_me = confirm('reset the event');
                        if(confirm_me){
                            this.resetEvent();
                        }
                    }
                },
                nextYear:{
                    click:function(){
                        calendar.nextYear();
                        this.current_active_date = calendar.getDate();
                    }
                }
            },

【讨论】：

一些介绍词可以很好地总结您的代码。总体而言，这将是一个更好的答案。