How to Include Full calendar in Angular 7?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to Include Full calendar in Angular 7?

Angular 7 is just released and it is growing day by day very fastly and famous as single page application. I have also shared so many posts regarding fullcalendar and today I will implement fullcalendar in Angular 7.

Here is the working image:

Here are the working steps you need to follow:

1. Very first, here are the some basics commons commands to include Angular 7 Application on your machine:

$ npm install -g @angular/cli

$  ng new angularfullcalendar  // Set Angular7 Application on your pc

$ cd angularfullcalendar // Go inside project folder

$ ng serve // Run project

http://localhost:4200/ //Check working Local server

2. Now, run below command into your terminal, to include fullcalendar module into your Angular 7 app:

npm install ng-fullcalendar --save

3.  Now run below command into your terminal to update your update your types/jquery:

npm update @types/jquery

4. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FullCalendarModule } from 'ng-fullcalendar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  FullCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }   

5. Now add below command into your app.component.ts file:

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

import { CalendarComponent } from 'ng-fullcalendar';

import { Options } from 'fullcalendar';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'my-angular-app';

  calendarOptions: Options;

  ngOnInit() {

  this.calendarOptions = {

        editable: true,

        eventLimit: false,

        header: {

          left: 'prev,next today',

          center: 'title',

          right: 'month,agendaWeek,agendaDay,listMonth'

        }

        

      };

  }

}

6. Now add below code into your app.component.html file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.1/fullcalendar.min.css">

<div style="text-align:center">

  <h1>

    Welcome to {{ title }}!

  </h1>

  <div *ngIf="calendarOptions">

    <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"

        (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>

</div>

</div>

This is it, if you have any query related to this post, then please do comment below or ask question.

Thank you,

Harjas,

TheRichPost