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

Question

运行 fullcalendar 控件 angular 项目，可在作者网站上获得。

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

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

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

应用组件代码：

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;

}

}

问题：

在名为myCustomButton的自定义按钮的Click事件中，我们无法访问calendarComponent对象。
当我们点击 prev/next 按钮时，它会调用事件（Get API 调用），我需要在其中传递 next/prev 月份和年份参数。

Answer 1

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

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

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

FullCalendar: fetch events array on custom button click

fullcalendar

angular

fullcalendar-5