当我在角度项目中导入全日历css时,上一个和下一个按钮css不会改变。
上面的图片是我的html视图,默认情况下,上一个和下一个按钮css不会在侧面显示小箭头。我认为将fullcalendar.min.css导入到style.css失败。而且我也将其添加到angular.json中,我已经在网络中搜索了很多解决方案,但是它也不起作用。
import { Component, OnInit, ViewChild } from '@angular/core';
import {EventService} from './event.service';
import { OptionsInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import {CalendarComponent} from 'ng-fullcalendar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
constructor(protected eventService: EventService) {}
options: OptionsInput;
modal: any;
display: any;
@ViewChild('fullcalendar') fullcalendar: CalendarComponent;
ngOnInit(): void {
this.eventService.getEvents().subscribe(data => {
this.options = {
editable: true,
events: data,
handleWindowResize: true,
height: 800,
themeSystem: 'standard' ,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin]
};
});
// console.log(this.fullcalendar)
}
updateEvent(model) {
model = {
event: {
id: model.event.id,
start: model.event.start,
end: model.event.end,
title: model.event.title
},
duration:
model.delta
};
this.display = model;
}
}
@import '~bootstrap/dist/css/bootstrap.min.css';
@import "~font-awesome/css/font-awesome.min.css";
@import "~fullcalendar/dist/fullcalendar.min.css";
{{this.display|json}}
<h1 class="text-danger">afsda</h1>
<div class="align-content-center pl-3 pr-3">
<ng-fullcalendar
#fullcalendar
[options]="options"
(eventDrop)="updateEvent($event)"
>
</ng-fullcalendar>
</div>