Question

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

添加自定义按钮后，我需要通过点击事件从完整的日历控件（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;

}

}

问题：

在名为 myCustomButton 的自定义按钮的Click事件中，我们无法访问 calendarComponent 对象。
当我们单击上一个/下一个按钮时，它将调用事件（获取API调用），我需要传递下一个/上一个月和年参数。

Answer 1

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

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

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

1 个答案: