如何将FullCalendar包与angular应用程序集成

简介

嗨，读者们在这篇博客中，我们将通过FullCalendar包，了解我们如何将其与angular应用程序集成。我们还将看到我们如何在其中创建事件和删除它们。

关于FullCalendar

FullCalendar是最著名的Javascript日历。这个软件包可以与Angular、react、Vue或任何javascript应用程序集成。它是一个非常轻量级和强大的软件包。它为我们提供了广泛的插件，如提供月和日网格视图的日网格，提供高级滚动功能的滚动网格等。其他的插件列表可在这里找到。你可以浏览整个列表。

现在让我们看看我们如何开始使用它。

整合FullCalendar

首先，让我们使用以下命令创建一个新的angular应用程序。

ng new calendarIntegration

现在，当我们创建了我们的应用程序后，我们需要安装Full-calendar模块

使用下面的命令来安装它。我们还将安装另外两个包。第一个是用于日和月视图的daygrid插件，第二个是用于拖放事件、日期点击事件和其他一些可选择动作的交互插件。

npm i @fullcalendar/angular
npm i @fullcalendar/daygrid
npm i @fullcalendar/interaction

当软件包安装完毕后，我们需要更新我们的app.module.ts文件，将模块添加到导入数组中。

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

除此以外，我们还需要注册这些插件。所以就在你的@NgModule之前，添加这些行来注册插件。

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

当你导入全日历组件时，全日历的默认CSS将被加载。

fullCalendar视图可以由你的HTML中的一行来生成，它将选项作为输入。我们使用full-calendar标签。

<full-calendar [options]="calendarOptions"></full-calendar>

在Angular中，我们通常在[括号]中传递输入，在(括号)中传递输出，但是在full calendar的情况下，所有的东西都以键值对的形式传递给选项。

你可以通过给它们分配新的值来修改选项中传递的属性。

在typecript类中，我们初始化了HTML中传递的日历选项。

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.onDateClick.bind(this),
    events: [],
    eventClick: this.handleEventClick.bind(this),
  };

这些是日历选项，我们在其中传递一切。在这里我们可以看到诸如initialView、weekends、dateClick和eventClick等属性。周末的默认值是false。在日历上的每一次日期点击都会触发onDateClick函数。而每一个事件的点击都会调用handleEventClick函数。所以对于每个事件，我们在各自的函数中添加所需的功能。

添加和删除事件

为了向日历添加事件，我们需要在calendarOptions的事件数组中推送这些事件。我们可以在每次点击日期时创建一个模态，并从用户那里获取事件名称作为输入，然后我们可以简单地将该特定事件添加到事件数组中。在这里，我将展示功能部分，而对于添加和删除事件的整个代码和HTML部分，你可以在这里找到。下面是它的功能

onDateClick(date: { dateStr: string; }) {
    this.modalRef = this.modalService.show(this.viewModal);
    this.date = date.dateStr;
  }
  
createEvent() {
    let newEvent = {
      title: this.eventName,
      date: this.date
    };
    this.newEvents.push(newEvent);
    this.calendarOptions.events = [...this.newEvents];
    this.eventName = "";
  }

同样，要删除一个事件，我们将使用handleEventClick函数来获取要删除的事件的标题，然后从事件数组中删除该特定条目。

handleEventClick(arg){
    this.deleteEventTitle = arg.event._def.title;
  }

  deleteEvent(arg){
    for (var i = 0; i < this.newEvents.length; i++) {
      if (this.newEvents[i].title == this.deleteEventTitle) {
        this.newEvents.splice(i, 1);
        this.calendarOptions.events=[];
        break;
      }
    }
    this.calendarOptions.events = [...this.newEvents];
  }

在handleEventClick函数中，我们得到一个参数，它包含所有被点击的事件的细节。所以我们从那里得到标题。而在onDateClick函数中，我们得到用户点击的日期。

总结

现在我们已经了解了在Angular中整合fullCalendar包所需的基本概念，以及我们如何在其中分配和删除事件。所以，请到这里来探索关于这个包的更多信息。