首页 > 解决方案 > 如何在具有 Bootstrap 的 Angular 中正确格式化 FullCalendar?

问题描述

我已将 Bootstrap-4 应用于我的 Angular 项目。如何使用 Fullcalender 正确激活 themeSystem?

我相信这是因为我没有在 themeSystem 中正确使用 bootstrapPlugin。请用下面的代码告诉我我做错了什么。

import bootstrapPlugin from '@fullcalendar/bootstrap';

export class CalendarComponent implements OnInit {

    constructor(public datesService: DatesService) { }

    @ViewChild('calendar', { static: false }) calendarComponent: FullCalendarComponent; // the #calendar in the template

    calendarVisible = true;
    calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin, bootstrapPlugin];
    calendarWeekends = true;
    calendarEvents: EventInput[] = [];
    themeSystem: 'bootstrap';

    public dates: any;


    ngOnInit() {
        this.datesService.getDates()
            .then(res => {
                this.dates = res;
                this.dates.forEach(d =>
                    this.calendarEvents = this.calendarEvents.concat({ 'title': d.projectName, 'start': new Date(d.liveDate) }))
            })
    }

}

日历上的格式看起来不像网上的几个例子。请告诉我。谢谢你。

标签: angularbootstrap-4fullcalendar

解决方案


推荐阅读