@fullcalendar/事件不起作用

Question

我在angular应用程序中添加了@fullcalendar/angular，但我的[事件]不起作用。

在我的app.module.ts:中

FullCalendarModule.registerPlugins([
dayGridPlugin,
interactionPlugin,
timeGridPlugin
])
imports: [
...
...
FullCalendarModule

]

//.ts文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import { CalendarOptions, FullCalendarComponent } from '@fullcalendar/angular';
import { EventInput } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import { title } from 'process';
import { event } from '../common/models/event';
@Component({
selector: 'app-my-profile',
templateUrl: './my-profile.component.html',
styleUrls: ['./my-profile.component.css']
})
export class MyProfileComponent implements OnInit {
posts =[]; 
//full calendar specified , static : true is obligatory
@ViewChild("fullcalendar", { static: true })
calendarComponent: FullCalendarComponent;
ngOnInit(): void {



this.service.getEvents(this.username).subscribe(
(data) => {

for(let i = 0; i <= Object.keys(data).length; i++){
const e = new event;
if(data[i]!=undefined){

e.setTitle(data[i].title);
e.setStart(data[i].start);
e.setEnd(data[i].end);
e.setColor(data[i].color);
this.posts.push(e);
}
}

console.log(" my events " + JSON.stringify(this.posts));


}
)



}

}

在我的.html文件中

<full-calendar #fullcalendar [events]="posts"  defaultView="dayGridDay"  [options]="calendarOptions" ></full-calendar>

我有这个错误无法绑定到"events"，因为它不是"full calendar"的已知属性。

我还尝试了另一种解决方案，将从数据库获取的myEvents设置为calendarOptions，但不起作用。

calendarOptions: CalendarOptions = {
initialView: 'timeGridWeek',
dateClick: this.handleDateClick.bind(this), // bind is important!
locale: 'fr',
events: this.posts
}

Answer 1

您只需要像文档中一样使用完整的日历
首先在组件的Typescript文件中创建日历选项：

calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
dateClick: this.handleDateClick.bind(this), // bind is important!
events: posts // here you should put your events data and it should be an array
};

然后将calendarOptions附加到完整日历的"；选项"；属性：

<full-calendar [options]="calendarOptions"></full-calendar>

Answer 2

我注意到的一件事是，事件处理程序(js-click事件，如dateClick&dateSelect(中'this'的值是FullCalendar，而不是angular组件！

这意味着要动态添加一个事件，您可以这样做：

public selectDate(event: DateClickArg) {
console.log(event);
this.addEvent({
start: event.date,
title: "Dentist",
});
}

我也遇到了同样的问题，现在我正在对此进行更多的研究，我在angular插件的文档中注意到了这一点：

calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
dateClick: this.handleDateClick.bind(this), // bind is important!

这种绑定确实很重要！添加绑定允许我再次访问eventHandler中的calendarOptions：

public selectDate(event: DateClickArg) {
console.log(event);
this.calendarOptions.events = this.calendarEvents.concat({
start: event.date,
title: "Dentist",
});
}