Full Calendar In Angular

In this article, We will explore the Full Calendar in Angular.

What is FullCalendar?

FullCalender is a full-sized drag-and-drop Event Calender. It is used to display your event on a nice calendar view.

It comes with 3 types of view Month view, Week View, and Day View.

Users can view your events per week, per month, or per day.

Implementation:-

let us learn how a FullCalendar can be integrated with Angular.

To integrate FullCalender in angular, first, you create a new angular app name fullCallenderApp using the following command.

ng new fullCallenderApp

step 1:- after creating a new angular app type the following command to add dependencies related to fullCalendar.

npm install --save @fullcalendar/angular 
npm install --save @fullcalendar/daygrid
npm install --save @fullcalendar/interaction

step 2:- Now after adding dependencies the second step is to add FullCalendarModule into your app’s route module in our application it is app.module.ts.

add bellow imports

import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

and below code before @NgModule

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);

and add FullCalenderModule in imports

Note:- Make sure to import @fullcalendar/angular before any plugins of full calendar else it will give a run time error

step 3:- now in the component file where you want to integrate full calendar create and object of option for the full calendar here I m integrating into my app.component.ts file

create the option object like below:-

calendarOptions: CalendarOptions = {
   initialView: 'dayGridMonth'
 };

and add imports for Calendar options

import { CalendarOptions } from '@fullcalendar/angular'

step 4:- now in your template file access the full calendar tag and pass option

Note:- you must have to pass options in fullcalender

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

Add events In Calender

to add events in the full calendar it is having an option called events add the below code in your calendar option

events: [
    {
      title: 'event 1',
      color: '#FF5733',
      date: '2021-07-31'
    },
    { 
      title: 'event 2', 
      date: '2021-07-28' 
    },
    { 
      title: 'event 3', 
      date: '2021-07-01' }
  ]

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FullCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { CalendarOptions } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'fullCallenderApp';
  calendarOptions: CalendarOptions = {
    plugins: [ dayGridPlugin ],  
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridDay,dayGridWeek,dayGridMonth'
    },    
    events: [
      {
        title: 'event 1',
        color: '#FF5733',
        date: '2021-07-31'
      },
      { 
        title: 'event 2', 
        date: '2021-07-28' 
      },
      { 
        title: 'event 3', 
        date: '2021-07-01' }
    ]
  };

}

app.component.html

<div class="mainclass">
  <div class="card">
    <full-calendar [options]="calendarOptions"></full-calendar>
  </div>
</div>

Output:-

To know more click here

I hope this article helps you guys