如何解决@ fullcalendar / 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>
我遇到此错误,因为它不是“完整日历”的已知属性,所以无法绑定到“事件”。
我还尝试了另一种解决方案,将从数据库中获取的myEvents设置为calendarOptions,但是它不起作用。
calendarOptions: CalendarOptions = {
initialView: 'timeGridWeek',dateClick: this.handleDateClick.bind(this),// bind is important!
locale: 'fr',events: this.posts
}
解决方法
您只需要像文档中一样使用全日历即可。
首先,您需要在组件的Typescript文件中创建calendarOptions:
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附加到全日历的“ options”属性中:
<full-calendar [options]="calendarOptions"></full-calendar>
,
我注意到的一件事是事件处理程序(诸如 dateClick 和 dateSelect 之类的 js 单击事件)中 'this' 的值是 FullCalendar,而不是角度组件!
这意味着要动态添加事件,您可以这样做:
public selectDate(event: DateClickArg) {
console.log(event);
this.addEvent({
start: event.date,title: "Dentist",});
}
我遇到了同样的问题,现在我正在深入研究这个问题,我在 angular 插件的文档中注意到了这一点:
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',// bind is important!
这个绑定确实很重要!添加绑定允许我再次访问 eventHandler 中的 calendarOptions:
public selectDate(event: DateClickArg) {
console.log(event);
this.calendarOptions.events = this.calendarEvents.concat({
start: event.date,});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。