Home Angular6 How to Include Full calendar in Angular 6?

How to Include Full calendar in Angular 6?

by therichpost
Published: Last Updated on 18 comments

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

Angular 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 .



Here are the following steps to include fullcalendar in angular6:


1. First you need to run below command into your terminal:
npm install ng-fullcalendar --save
2. After that, 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';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }   
3. After that, add below code into your app.component.ts file:
import { Component } from '@angular/core';

import { CalendarComponent } from 'ng-fullcalendar';

import { Options } from 'fullcalendar';


  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'





4. After that, 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">


    Welcome to {{ title }}!


  <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>




 And you are done, if you have any query related to this post, then you can ask question or comment below.

You may also like


Mohammad Shad November 20, 2018 - 5:59 am

I want to open a modal when user clicks on a time slot of ‘AgendaDay’ view of FullCalendar using angular6.
In that modal I will create new appointment belonging to the slot clicked.

Ajay Malhotra November 20, 2018 - 2:58 pm

Hi Mohammad Shad, you want to open bootstrap modal popup? if yes then you need to add bootstrap in angular 6 and I have that in my blog post.
After done above, tell me, I will assist you.

Thank you

jasmeen December 10, 2018 - 6:25 am

Thank you very much..

Ajay Malhotra December 10, 2018 - 6:25 am

Your welcome jasmeen

Héctor Agüero December 21, 2018 - 1:49 pm

Thanks for your post. I have implemented a slight different variation, using ViewChild and extracting the events in the AfterViewInit life cycle hook (by subscribing to the store, given I am using ngrx) in order to be able to access the CalendarComponent properties and call rerenderEvents when a new event is created .

import { Component, OnInit, AfterViewInit, ViewChild, } from ‘@angular/core’;

// FullCalendar
import { CalendarComponent } from ‘ng-fullcalendar’;
import { Options } from ‘fullcalendar’;
… other imports …
declare const $: any;
declare const moment: any;
selector: ‘app-tasks’,
templateUrl: ‘./tasks.component.html’,
styleUrls: [‘./tasks.component.css’]
export class TasksComponent implements OnInit, AfterViewInit {

@ViewChild(CalendarComponent) ucCalendar: CalendarComponent;

ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: { left: ‘prev,next today’, center: ‘title’, right: ‘month,agendaWeek,agendaDay,listMonth’},
buttonText: { today: ‘Hoy’, month: ‘Mes’, week: ‘Semana’, day: ‘Día’ },
monthNames: [‘Enero’,’Febrero’,’Marzo’,’Abril’,’Mayo’,’Junio’,’Julio’,’Agosto’,’Septiembre’,’Octubre’,’Noviembre’,’Diciembre’],
monthNamesShort: [‘Ene’,’Feb’,’Mar’,’Abr’,’May’,’Jun’,’Jul’,’Ago’,’Sep’,’Oct’,’Nov’,’Dic’],

dayNames: [‘Domingo’,’Lunes’,’Martes’,’Miércoles’,’Jueves’,’Viernes’,’Sábado’],
dayNamesShort: [‘Dom’,’Lun’,’Mar’,’Mié’,’Jue’,’Vie’,’Sáb’],
firstDay: 1,

//This gets the events:
this.store.dispatch( new rtasksActions.actions.LoadRTasksAction() );


ngAfterViewInit () {
this.store.select(‘rtasks’).subscribe( rtasks => {

if( !isNullOrUndefined(rtasks.data) ){

const newArray = rtasks.data.map( tarea => {
return {

… tarea,
start : tarea.date,
backgroundColor : ( new Date() > new Date(tarea.date) )
? ‘#dd4b39’ : ‘#00a65a’, //Red or Green
title: ( tarea.manual_entry == 1 )
? tarea.description
: `\n\r${tarea.client_name} ${tarea.client_last_name} \n\r ${tarea.product}`


this.calendarOptions = { … this.calendarOptions, events: newArray };
/*This aborve line throws error (without it, no errors and I get events, but no inmediate rerender):
core.js:1673 ERROR ReferenceError: FC is not defined
at HTMLElement. (ng-fullcalendar.es5.js:28)
at Function.each (jquery.js:354)
at jQuery.fn.init.each (jquery.js:189)
at jQuery.fn.init.push../node_modules/ng-fullcalendar/ng-fullcalendar.es5.js.jquery__WEBPACK_IMPORTED_MODULE_1___default.a.fn.fullCalendar (ng-fullcalendar.es5.js:8)
at CalendarComponent.push../node_modules/ng-fullcalendar/ng-fullcalendar.es5.js.CalendarComponent.fullCalendar (ng-fullcalendar.es5.js:483)
at SafeSubscriber._next (tasks.component.ts:116) … */


// What can I be missing ? Thanks in advance.

Ajay Malhotra December 21, 2018 - 3:44 pm Reply
David December 22, 2018 - 4:51 am

Thank you for this..Really helpful 🙂

Ajay Malhotra December 22, 2018 - 6:08 pm

Thank you david

New developer January 12, 2019 - 4:48 am

Hi, Can we use this in Angular 4?

Ajay Malhotra January 12, 2019 - 5:06 pm

Yes, you can use this.

Naresh February 16, 2019 - 12:03 pm

Hi Ajay,

i have followed the above steps and installed the ng fullcalendar, but running out with error “Failed to load resource: the server responded with a status of 404 ()”. can you please help me in resolving this.


Ajay Malhotra February 18, 2019 - 4:04 pm

Hi Naresh, I think, you have path issue and you can my post related to to Angular 7 full calendar.

naresh March 15, 2019 - 6:13 pm

I am not able include Full calendar in angular 6 application using visual studio 2017 .net core, when i run the application i am getting “Cannot Get/”. can you please assist.

Ajay Malhotra March 16, 2019 - 5:02 pm

You can try it with the help for jquery also or you can show ne your code and email me your code.

Thank you

Duffy May 9, 2019 - 10:05 pm


I am working with Angular 6, but when I compile my project for production with aot option, the fullcalendar loses some of the functionality, none of the scheduler features work. I think the compiler is removing some of the necessary classes, have you seen that before?

I appreciate any assistance you could provide.


Ajay Malhotra May 13, 2019 - 4:32 pm

Okay then you can full calendar direct with libraries.

Manoj May 11, 2020 - 5:07 pm

How to goto custom date on ngoninit?

Ajay Malhotra May 11, 2020 - 5:14 pm

You want to add custom date?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.