要解决Angular 6中Ng-fullcalendar的问题,首先需要确保已安装ng-fullcalendar和相关的依赖。
npm install ng-fullcalendar --save
import { NgFullCalendarModule } from 'ng-fullcalendar';
@NgModule({
imports: [
NgFullCalendarModule,
// 其他导入的模块
],
// 其他配置
})
export class AppModule { }
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FullCalendarComponent } from 'ng-fullcalendar';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements AfterViewInit {
@ViewChild('fullcalendar') fullcalendar: FullCalendarComponent;
calendarOptions: any;
ngAfterViewInit() {
this.calendarOptions = {
editable: true, // 允许编辑事件
events: [
{
title: 'Event 1',
start: '2018-09-01T12:00:00',
end: '2018-09-01T14:00:00'
},
{
title: 'Event 2',
start: '2018-09-05T09:00:00',
end: '2018-09-05T10:00:00'
}
// 添加其他事件
]
};
}
}
:host ::ng-deep .fc-event {
background-color: #378006;
border-color: #378006;
color: #ffffff;
}
这样,就可以在Angular 6中使用Ng-fullcalendar了。根据自己的需求,可以进一步自定义配置和事件。