Angular6FullCalendar

How to Include Full calendar in Angular 6?

Include Full calendar in Angular 6 - The Rich Post

Views

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.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

16 Comments

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

    • 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

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

  • 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

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

    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

Leave a Reply

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

Positive SSL