How To Customize Full Calendar In Angular

In this article, I’ll be explaining how to customize a full calendar in angular.

Step 1: Create an Angular application.

ng new full-calendar

Step 2: Install the following Plugin in your application.

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

Step 3: Add the following command in your app.component.html

<div>
  <full-calendar
    #calendar
    [options]="calendarOptions"
    class="show-content"
  ></full-calendar>
</div>

Step 4: Add the following command in your app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent OnInit,AfterViewInit{

  calendarData: any[] = [];
  calendarOptions: any = [];
  daysAttendance: any[] = [];
  @ViewChild("calendar") calendar: any;

  constructor() {
    this.setData();
  }

  ngOnInit(): void {
    this.calendarOptions = {
      initialView: "dayGridMonth",
      contentHeight: 450,
      showNonCurrentDates: false,
      fixedWeekCount: false,
      dayHeaderFormat: { weekday: "short" },
      editable: true,
      eventLimit: false
    };
    window.dispatchEvent(new Event("resize"));
    
  }

  getData() {
    let calendarDates: any = document.querySelectorAll(
      ".fc-daygrid-day-top"
    );
    this.setData();
    this.daysAttendance = [];
    if (calendarDates.length) {
      calendarDates.forEach((item: any) => {
        let date = parseInt(item.innerText);
        let dayFlag = this.calendarData.find(
          (x) => x.eventDate.getDate() == date
        )?.dayFlag;
        if (dayFlag == "P") {
          item.style.background = "#0AA46B";
          item.style.color = "white";
          item.style.cursor = "pointer";
        } else if (dayFlag == "A") {
            item.style.background = "#D32F2F";
            item.style.color = "white";
            item.style.cursor = "pointer";
        } else if (dayFlag == "HL") {
            item.style.background = "#F5B556";
            item.style.color = "white";
            item.style.cursor = "pointer";
        } else {
            item.style.background = "#dbd9d1";
            item.style.color = "#444444";
            item.style.cursor = "pointer";
        }

        window.dispatchEvent(new Event("resize"));
      });
    }
  }

  ngAfterViewInit(){
    this.getData();
  }

  setData(){
    this.calendarData = [
      { eventDate : new Date('03-01-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-02-2022'), dayFlag : 'A' },
      { eventDate : new Date('03-03-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-04-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-05-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-06-2022'), dayFlag : 'A' },
      { eventDate : new Date('03-07-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-08-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-09-2022'), dayFlag : 'HL' },
      { eventDate : new Date('03-10-2022'), dayFlag : 'P' },
      { eventDate : new Date('03-11-2022'), dayFlag : 'P' }
    ];
  }

}

Step 5: Add the following command in your app.component.scss

.show-content ::ng-deep .fc-daygrid.fc-dayGridMonth-view.fc-view {
    visibility: visible ;
}
::ng-deep body .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events,
body .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-bg,
body .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-bg {
    display: none ;
}

::ng-deep body .fc .fc-daygrid-day-top {
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    margin: auto;
    border: 1px solid transparent;
    margin-top: 8px;
    border-radius: 6px;
    background: #ffffff;
    // box-shadow: 0px 0px 6#039be54025);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 25%);
    border-radius: 10px;
}

::ng-deep .fc.fc-theme-standard .fc-view-harness td {
    border: none ;
    background: #fff ;
}

::ng-deep body .fc.fc-theme-standard .fc-view-harness th {
    border: none ;
    background: #fff ;
}

::ng-deep .fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
    display: none;
}

::ng-deep .fc .fc-col-header-cell-cushion {
    padding: 10px 4px ;
    background: #ffffff;
    // box-shadow: 0px 2px 4px rgb(3 155 229 / 20%);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    border-radius: 5px;
    width: 65px;
    height: 40px;
    margin: 12px auto;
    text-align: center;
}

::ng-deep .fc.fc-theme-standard a {
    font-size: 17px;
}

::ng-deep .fc.fc-media-screen.fc-direction-ltr.fc-theme-standard {
    background: #ffffff;
    // box-shadow: 0px 0px 6px rgb(3 155 229 / 25%);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 25%);
    border-radius: 10px;
    padding: 32px 24px 20px 24px;
    margin-left: 10px;
}

::ng-deep .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
    border: none;
}

::ng-deep .fc-daygrid-day-top .fc-daygrid-day-number {
    color: inherit ;
    font-size: 18px ;
}


::ng-deep .fc .fc-button-group {
    visibility: hidden;
}

::ng-deep .fc.fc-theme-standard .fc-toolbar .fc-button {
    display: none;
}

Step 6: Run The App

ng serve