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

Question

我在项目中使用完整的日历。我的要求是在标题按钮上使用单击事件，例如上一个、下一个和今天按钮等。

以下是我如何使用完整日历，标题包含这些给定的按钮。

<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 时，我想重新加载数据。所以我需要调用一个函数。与上一个、下一个和今天按钮相同。 请帮帮我。如果我给出的信息不清楚，我可以提供更详细的解释。

Answer 1

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

在 4.4.2 版本中，他们有 dateRender，但它在 UI 中引起了问题。

Answer 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();
}
}
},