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

Question

我在angular 9应用程序中添加了fullcalendar，其中UI可以正确渲染，但我的事件无法工作。

我已经完成了懒惰加载，并在我的module.ts文件中添加了这两个模块

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

新的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)
}

Answer 2

我将为您提供完美工作的may代码。希望对你有所帮助：

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>