FullCalendar:点击自定义按钮获取事件数组

Question

运行作者网站上提供的全日历控制角度项目。

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

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

如何在单击方法中获取日历对象。我正在使用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. 当我们点击prev/next按钮时，它会调用事件(Getneneneba API调用(，在这里我需要传递next/prev月份和年份参数。

Answer 1

在自定义按钮的点击事件中，我们可以访问这样的调用应用程序组件方法：

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