Angular7FullCalendar

How to Include Full calendar in Angular 7?

Include Full calendar in Angular 7

Views

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:

 How to Include Full calendar in Angular 6?

 

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

 

 

 

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.

18 Comments

  • When following your tutorial i get :
    ERROR in node_modules/@types/jquery/index.d.ts(6123,66): error TS2344: Type ‘”timeout” | “onreadystatechange” | “responseType” | “withCredentials” | “msCaching”‘ does not satisfy the constraint ‘”abort” | “open” | “timeout” | “getAllResponseHeaders” | “getResponseHeader” | “overrideMimeType” | “readyState” | “responseText” | “setRequestHeader” | “status” | “statusText” | … 22 more … | “dispatchEvent”‘.
    Type ‘”msCaching”‘ is not assignable to type ‘”abort” | “open” | “timeout” | “getAllResponseHeaders” | “getResponseHeader” | “overrideMimeType” | “readyState” | “responseText” |”setRequestHeader” | “status” | “statusText” | … 22 more … | “dispatchEvent”‘.

  • This tutorial would be more complete if you had events showing on the calendar and It would be nice to show a working implementation of dayClick() along with dayRender() so we can manipulate content within the date’s cell.

      • Thank you for your efforts Ajay. I have a working implementation w/Angular 7. At this point, this is how I got dayRender() and dayClick to work. Please note I did *not* wrap the options for the calendar in:
        this.calendarOptions = {…} as that will cause compilation error. I’ll defer to the community to figure out how that can be done if need be.

        Also, I even though the methods I have work, I get an error: Cannot set property of ‘eventDrop’ of undefined

        app.component.ts:

        import { Component, OnInit, ViewChild } 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 {

        calendarOptions: Options;
        @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
        data:any;

        ngOnInit() {

        this.calendarOptions = {}

        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + ‘-‘ + (dateObj.getUTCMonth() + 1);

        this.data = [{
        title: ‘All Day Event’,
        start: yearMonth + ‘-01’
        },
        {
        title: ‘Long Event’,
        start: yearMonth + ‘-07’,
        end: yearMonth + ‘-10’
        },
        {
        title: ‘Long Event 2’,
        start: yearMonth + ‘-07’,
        end: yearMonth + ‘-12’,
        backgroundColor: ‘#0091d5’,
        allDay:true,
        editable:true,
        },
        {
        id: 999,
        title: ‘Repeating Event’,
        start: yearMonth + ‘-09T16:00:00’
        }]

        }

        ngAfterViewInit() {
        //https://fullcalendar.io/docs/initialization
        this.ucCalendar.fullCalendar({
        editable: true,
        eventLimit: false,
        header: {
        left: ‘prev,next today’,
        center: ‘title’,
        right: ‘month,agendaWeek,agendaDay,listMonth’
        },
        events: this.data,
        selectable: true,

        dayRender: (date, cell) => {
        //console.log(date, cell);
        //cell.css(‘background-color’, ‘red’);
        let btn = document.createElement( “button” );
        btn.textContent = ‘myButton’;
        cell.append(btn);
        },

        dayClick: (model) =>{
        console.log(`dayClick(): ${model}`)
        },

        eventClick: (event, element) => {
        event.title = ‘CLICKED!’;
        this.ucCalendar.fullCalendar(‘updateEvent’, event);
        },
        eventDrop: (event, element) => {
        event.title = ‘MOVED!’;
        this.ucCalendar.fullCalendar(‘updateEvent’, event);
        }

        }); // this.ucCalender.fullCalendar

        }
        }

        app.component.html:

  • When I follow your tutorial, all that shows is the title. No calendar elements show up. How do I fix this? I installed everything you said to.

  • When I follow your tutorial, all that shows is the title. No calendar elements show up. How do I fix this? I installed everything you said to.

Leave a Reply

Positive SSL