FullCalendar：在自定义按钮单击时获取事件数组

问题描述

运行全日历控制角度项目，该项目在作者网站上可用。

添加自定义按钮后，我需要通过点击事件从完整的日历控件（getEventSources）中检索事件：

customButtons: {
  myCustomButton: {
    text: 'Update',click: function() {
      debugger;
      alert('clicked the custom button!');
    }
  }
},

如何在click方法中获取日历对象。我正在使用Angular项目：FullCalendar Angular

AppComponent代码：

import { Component,ViewChild } from '@angular/core';
import { FullCalendarComponent,CalendarOptions,DateSelectArg,EventClickArg,EventApi,Calendarapi,Calendar,DateEnv,getDateMeta,CalendarContent,CalendarDataManager,CalendarRoot,triggerDateSelect,} from '@fullcalendar/angular';
import { INITIAL_EVENTS,createEventId,getRecentMonthEvents } from './event-utils';
import { AppService } from './app.service';
import { ActivatedRoute } from '@angular/router';
import { DatePipe } from '@angular/common';
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
import { global } from '@angular/compiler/src/util';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {

  @ViewChild('calendar') calendarComponent: FullCalendarComponent;    

constructor()
{
  this.calendarMonth = (new Date().getMonth() + 1);
  this.calendarYear = new Date().getFullYear();

}
  calendarVisible = true;
  public calendarMonth: number;
  public calendarYear: number;
  calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev,next today myCustomButton',center: 'title',right: 'dayGridMonth'//,timeGridWeek,timeGridDay,listWeek'
    },initialView: 'dayGridMonth',weekends: true,editable: true,selectable: true,selectMirror: true,dayMaxEvents: true,eventContent: function(arg) {
  
      var ProdCnt = arg.event.extendedProps.budgetDailyNumber;
      let toggleSwitch = document.createElement('LABEL');
      toggleSwitch.className = "switch";

      if (arg.event.extendedProps.isWorkDay) {
        toggleSwitch.innerHTML = '<input type="checkBox"><span class="slider round"></span><br>';
      } else {
        toggleSwitch.innerHTML = '<input type="checkBox" checked><span class="slider round"></span><br>';
      }
      let textBox = document.createElement('input');
      textBox.setAttribute("type","text");
      textBox.setAttribute("value",ProdCnt);
      textBox.setAttribute("style","width: 20px;height: 20px;background-color: white;");
  
      let arrayOfDomNodes = [ toggleSwitch,textBox ]
      return { domNodes: arrayOfDomNodes }
    },customButtons: {
  myCustomButton: {
    text: 'Update',click:  function() {
    
      alert('clicked the custom button!');
    }
  }
},select: this.handleDateSelect.bind(this),eventClick: this.handleEventClick.bind(this),eventsSet: this.handleEvents.bind(this),initialDate: new Date(),// vieWrender: function(view,element) {
//   var b = $('#calendar').fullCalendar('getDate');
//   alert(b.format('L'));
// },events: {
  //getCalendarMonth
  
  url: 'http://localhost:50324/api/productionforecast?month=' + environment.calMonth +'&year=' + environment.calYear,//url: 'http://localhost:50324/api/productionforecast?month=' +(new Date().getMonth() + 1)+'&year=' + (new Date().getFullYear()),method: 'GET',failure: function() {
    alert('there was an error while fetching events!');
  },color: 'yellow',// a non-ajax option
  textColor: 'black' // a non-ajax option
}

/* you can update a remote database when these fire:
eventAdd:
eventChange:
eventRemove:
*/
  };
  currentEvents: EventApi[] = [];

  handleCalendarToggle() {
    this.calendarVisible = !this.calendarVisible;

  }

  handleWeekendsToggle() {
    const { calendarOptions } = this;
    calendarOptions.weekends = !calendarOptions.weekends;
  }
  handleDateSelect(selectInfo: DateSelectArg) {
    const title = prompt('Please enter a new title for your event');
    const calendarapi = selectInfo.view.calendar;

    calendarapi.unselect(); // clear date selection

if (title) {
  calendarapi.addEvent({
    id: createEventId(),title,start: selectInfo.startStr,end: selectInfo.endStr,allDay: selectInfo.allDay
  });
}
  }

  handleEventClick(clickInfo: EventClickArg) {
    if (confirm(`Are you sure you want to delete the event     '${clickInfo.event.title}'`)) {
          clickInfo.event.remove();
    }
      }

  handleEvents(events: EventApi[]) {
    this.currentEvents = events;
  }
getCalendarMonth()
{
  debugger;
  return this.calendarComponent.getApi().getDate().getMonth();
}
public loadProductionforecast(month,year)
{


  //   this.appService.getProductionforecast(month,year).subscribe((data: any) => {
  //   debugger;

}

}

问题：

1. 在名为 myCustomButton 的自定义按钮的Click事件中，我们无法访问 calendarComponent 对象。

2. 当我们单击上一个/下一个按钮时，它将调用事件（获取API调用），我需要传递下一个/上一个月和年参数。

解决方法

在自定义按钮的click事件中，我们可以访问调用应用程序组件方法，如下所示：

customButtons: {
  myCustomButton: {
    text: 'Update',click: () => this.customFunction()
  }
}