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
fullcalendar-in-angular6

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 .

fullcalendar-in-angular6

 

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
  FullCalendarModule
  ],
  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';

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

        }

        

      };

  }

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

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

 

 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

18 comments

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

Reply
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

Reply
jasmeen December 10, 2018 - 6:25 am

Thank you very much..

Reply
Ajay Malhotra December 10, 2018 - 6:25 am

Your welcome jasmeen

Reply
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;
@Component({
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,
events:[]
};

//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.ucCalendar.fullCalendar(‘rerenderEvents’);
/*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.

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

Thank you for this..Really helpful 🙂

Reply
Ajay Malhotra December 22, 2018 - 6:08 pm

Thank you david

Reply
New developer January 12, 2019 - 4:48 am

Hi, Can we use this in Angular 4?

Reply
Ajay Malhotra January 12, 2019 - 5:06 pm

Yes, you can use this.

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

Thanks,
Naresh

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

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

Reply
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

Reply
Duffy May 9, 2019 - 10:05 pm

Ajay,

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.

Thanks,
Duffy

Reply
Ajay Malhotra May 13, 2019 - 4:32 pm

Okay then you can full calendar direct with libraries.

Reply
Manoj May 11, 2020 - 5:07 pm

How to goto custom date on ngoninit?

Reply
Ajay Malhotra May 11, 2020 - 5:14 pm

You want to add custom date?

Reply

Leave a Comment

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