完整日历事件在 Angular 9 中不起作用

Question

我在我的 angular 9 应用程序中添加了 fullcalendar，其中 UI 可以正确呈现，但我的事件不起作用。

我已经完成延迟加载并在我的 module.ts 文件中添加了这 2 个模块

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);

.HTML file
 <full-calendar #fullcalendar (dateClick)="eventClick($event)"></full-calendar>
.ts file

// .ts.file
@ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    plugins: [dayGridPlugin, interactionPlugin],
  };

我也试过在 ngOnInit 中的选项中添加交互插件，但它对我不起作用。

Answer 1

我将为您提供可以完美运行的代码。希望对您有所帮助：

import {
  Component,
  AfterViewChecked,
  OnInit,
  ViewChild,
  ElementRef
} from "@angular/core";
import {
  MatDialog
} from "@angular/material/dialog";

import { FormControl, FormGroup } from "@angular/forms";
import { FullCalendarComponent } from "@fullcalendar/angular";
import { EventInput, Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGrigPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { EventPopupComponent } from './event-popup/event-popup.component';
import { MainService } from 'src/app/services/main.service';
import { Event } from 'src/app/models/event.model';

@Component({
  selector: 'app-events',
  templateUrl: './events.component.html',
  styleUrls: ['./events.component.css']
})
export class EventsComponent implements OnInit {

  //full calendar specified , static : true is obligatory
  @ViewChild("fullcalendar", { static: true })
  calendarComponent: FullCalendarComponent;
  //used to store the data i
  dateForm: FormGroup;
  //used to provide the calednar component with data
  eventsCalendar: any[] = [];
  //used to store initial data
  events: any[] = [];
  
  //storing the events shown in the calendar
  calendarEvents: EventInput[] = [
  ];
  // using plugins to interact with the calendar
  calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
  //getting the calendar api
  calendarApi: Calendar;
  //to prevent entering in an infinite loop (intializing data once)
  initialized = false;
  constructor(
    private dialog: MatDialog,
    public mainService: MainService
  ) {
    this.calendarEvents =  [
    ];
      
    this.mainService.getDataFromApi('','api/events',Event).subscribe((data: any) => {
      this.events = data;
      console.log(this.events)
      // looping inside events array to provide the calendar component the data in a comprehensible manner (id, title, start, allDay, end)
      this.events.forEach(e => {
        let calendarevent = {
          startEditable: false,
          id: e.EventId,
          title: e.EventTitle,
          start: new Date(e.EventDate).getTime(),
          allDay: true,
        };
        this.eventsCalendar.push(calendarevent);
      });
      //calling the loadEvents Function as soon as the data are stored
      this.loadEvents();
    });
  }

  ngOnInit() {
   
    //defining the dateForm to read the date
    this.dateForm = new FormGroup({
      date: new FormControl(null)
    });
  }

  ngAfterViewInit() {
    //laoding events based on calendarApi
    this.calendarApi = this.calendarComponent.getApi();
    if (this.calendarApi && !this.initialized) {
      this.initialized = true;
      this.loadEvents();
    }
  }
  //used to load the events of the calendar
  loadEvents() {
    //to store events in the calendar
    this.calendarEvents =  this.eventsCalendar
  
    this.calendarApi.removeAllEventSources(); //obligatory
    this.calendarApi.addEventSource(this.calendarEvents); //obligatory
  }

  //to go to a specific date the user chose
  gotoDate() {
    //the if condition is to prevent possible error
    if (this.calendarApi) {
      this.calendarApi.gotoDate(this.dateForm.controls["date"].value);
    }
  }
}

在模块文件中：

  import { FullCalendarModule } from '@fullcalendar/angular';

html:

<full-calendar #fullcalendar [plugins]="calendarPlugins" [editable]="true" [events]="calendarEvents"
  eventTextColor='#fff' [defaultView]="'dayGridMonth'" [header]="{
    left: 'prev,next today',
    center: 'title',
    right: ''
    }" [dir]="'ltr'" [events]="calendarEvents" (eventClick)="onEventClick($event)">
</full-calendar>

Answer 2

新的 fullCalendar 日历选项以及其中的 dayClick 解决了这个问题。

  calendarOptions = {
    height: '100%',
    fixedWeekCount: false,
    defaultDate: moment().format('YYYY-MM-DD'),
    allDaySlot: false,
    displayEventTime: true,
    editable: true,
    eventLimit: true,
    lazyFetching: false,
    nowIndicator: true,
    refetchResourcesOnNavigate: true,
    events: [],
    plugin: [dayGridPlugin, interactionPlugin],
    dateClick: this.getAppointmentsForSpecificDate.bind(this), // this line
  };

  etAppointmentsForSpecificDate(arg) {
    console.log(args)
  }

完整日历事件在 Angular 9 中不起作用

Full calendar events Not working in Angular 9

angular

fullcalendar

fullcalendar-4