Full Calendar Integration in Angular

Introduction

Hey readers! In this blog, we will going through the FullCalendar package and understand how we can integrate it with an angular application. We will also see how we can create events in it and delete them.

About FullCalendar

FullCalendar is the most famous Javascript calendar. This package can be integrated with Angular, react, Vue, or any javascript application. It is a very lightweight and robust package. It provides us a wide range of plugins like day grid which offers month and day grid views, scrollgrid for advanced scrolling features, etc. The other list of plugins is available here. You can go through the whole list.

Let us now see how we can get started with it.

Integrating FullCalendar

First, let’s create a new angular application using the following command:

ng new calendarIntegration

Now when we have our application created we need to install the full-calendar module

Use the following command to install it. We will also be installing two other packages. First is the daygrid plugin for days and month views and the second is the interaction plugin which is for drag and drop events, date click events, and some other selectable actions.

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

When the packages are installed we need to update our app.module.ts file by adding the module to the imports array.

imports: [
    BrowserModule,
    FullCalendarModule,
    AppRoutingModule
  ],

Apart from this, we need to register the plugins as well. So right before your @NgModule, add these lines to register the plugins.

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  interactionPlugin
]);

The default CSS for the full calendar will be loaded when you import the full calendar component.

The fullCalendar view can be generated by a single line in your HTML which takes the options as input. We use the full-calendar tag for it.

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

In Angular generally, we pass the input in the [brackets] and the outputs with (brackets) But in the case of a full calendar everything is passed with the options as key-value pairs.

You can modify the properties passed in the options by assigning them new values.

In the typescript class, we initialize the calendar options which are passed in the HTML.

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

These are the calendar options in which we pass everything. Here we can see properties like initialView, weekends, dateClick and eventClick. The default value for weekends is false. On every date click on the calendar onDateClick function is triggered. And for every event click handleEventClick function is called. So for each event, we add the functionality required in the respective functions.

Adding and Deleting Events

To add events to the calendar we need to push the events in the events array of calendarOptions. We can create a modal on every date click and take the event name as input from the user and then we can simply add that particular event to the events array. Here I will be showing the functionality part whereas for the whole code for adding and deleting events with the HTML part you can find it here. Here is its function for it

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 = "";
  }

Similarly, to delete an event we will use the handleEventClick function to get the title of the event to be deleted and then delete that particular entry from the events array.

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];
  }

In the handleEventClick function, we get the argument as a parameter, which contains all the details of the event which is clicked. So we get the title from there. And in the onDateClick function, we get the date that is clicked by the user.

Conclusion

Now we have gone through the basic concepts required for the integration of the fullCalendar package in Angular and also how we can ass and delete events in it. So go here and explore more about this package. Also if you have any issues with the code you can visit here and download the respective template for it.

For more updates, please follow our LinkedIn page- FrontEnd Studio.

Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Feel free to share your thoughts about this blog in the comments.