FullCalendar 角度添加事件 - Javascript

FullCalendar 是一个开源的 jQuery 插件，它可以创建日历和日程表。它提供了许多可用于自定义样式和交互性的选项。本文将介绍如何使用 FullCalendar 在角度中添加事件。

安装 FullCalendar

首先，需要将 FullCalendar 添加到您的项目中。您可以从 FullCalendar 的官方网站下载 zip 文件，然后将其解压缩到您的项目目录中。接着，在您的 angular.json 文件中添加如下配置:

"styles": [
  "node_modules/fullcalendar/dist/fullcalendar.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/moment/moment.js",
  "node_modules/fullcalendar/dist/fullcalendar.min.js"
]

在组件中使用 FullCalendar

现在我们可以在我们的组件中使用 FullCalendar 了。在你想要显示 FullCalendar 的组件中，添加如下代码：

<div #fullcalendar></div>

在组件中，声明一个 ViewChild，并在 ngAfterViewInit 生命周期钩子中将 FullCalendar 应用到它上面。这样做的好处是，Angular 确保被引用的元素存在，然后我们就可以根据它来初始化 FullCalendar。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import * as moment from 'moment';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements AfterViewInit {
  calendarOptions: any;
  events: any[];
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

  ngAfterViewInit() {
    this.calendarOptions = {
      editable: true,
      eventLimit: false,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      events: []
    };
    this.events = [
        {
            title: 'Event 1',
            start: moment().subtract((-8), 'hours').toDate(),
            end: moment().subtract((-4), 'hours').toDate(),
            allDay: false
        },
        {
            title: 'Event 2',
            start: moment().subtract((-7), 'days').toDate(),
            end: moment().subtract((-5), 'days').toDate(),
            allDay: false
        },
        {
            title: 'Event 3',
            start: moment().subtract((-8), 'days').toDate(),
            end: moment().subtract((-2), 'days').toDate(),
            allDay: false
        }
    ];
    this.calendarOptions.events = this.events;
  }
}

在这个代码片段中，我们声明了 calendarOptions 和 events。我们在 FullCalendar 中使用 calendarOptions，并将 events 与 FullCalendar 中的 events 配置项绑定。

我们使用 moment 库来创建日期和时间对象。然后使用 toDate() 将它们转换为 JavaScript 中的本地日期和时间对象。

要添加事件，只需向 events 数组添加一个新的事件，如下所示：

this.events.push({
  title: 'New Event',
  start: moment().toDate(),
  end: moment().add(1, 'hours').toDate(),
  allDay: false
});

FullCalendar 应该会自动重绘日历，并在新的日期上显示新事件。

结论

在本文中，我们介绍了如何在 Angular 应用程序中使用 FullCalendar 添加事件。 FullCalendar 提供了强大的可定制性选项，可以帮助你创建自定义的日历和日程表。