- 首先,需要安装FullCalendar插件和ng-fullcalendar插件,可在命令行中运行以下命令进行安装:
npm install fullcalendar --save
npm install --save ng-fullcalendar
- 在app.module.ts文件中导入FullCalendarModule:
import { FullCalendarModule } from 'ng-fullcalendar';
@NgModule({
imports: [FullCalendarModule]
})
- 在组件中导入日历数据并进行配置:
import { Component, OnInit } from '@angular/core';
import { Options } from 'fullcalendar';
import { EventService } from './event.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
calendarOptions: Options;
events: any[];
constructor(private eventService: EventService) {}
ngOnInit() {
this.eventService.getEvents().subscribe(events => {
this.events = events;
});
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: []
};
}
}
- 在模板中导入ng-fullcalendar组件和所需的CSS文件:
- 在event.service.ts文件中定义数据源:
import { Injectable } from '@angular/core';
import { HttpClient