Integrate jQuery Full Calendar with Angular 4

Full Calendar is an awesome jQuery plugin which you may have required to integrate in your project.

In this post we will see how to integrate Full Calendar in an Angular 4 project.

Okay, first we need to include jQuery in our Angular 4 project:

npm install jquery --save
npm install @types/jquery --save

Great, now let’s install Full Calendar:

npm install fullcalendar --save

Add fullcalendar.min.js in scripts array of .angular-cli.json file

"scripts": [
   "../node_modules/fullcalendar/dist/fullcalendar.min.js"
],

Now, let’s create a directive to use Full Calendar.

import { Directive, Input, AfterViewInit, ElementRef } from '@angular/core';
import * as $ from 'jquery';
@Directive({
  selector: '[fullCalendar]',
  exportAs:'fullCalendar'
})
export class FullCalendarDirective {
    @Input('config') config: object = {};
    defaultConfig : object = {
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        navLinks: true,
    }
    constructor(private el: ElementRef) { }
    ngAfterViewInit()
    {
        Object.assign(this.defaultConfig, this.config);
        $(this.el.nativeElement).fullCalendar(this.defaultConfig);
    }
}

And in our template file we can write like below:

<div fullCalendar [config]="config" class="basic-full-calendar fc fc-unthemed fc-ltr"></div>

You may get an error like:

Property ‘fullCalendar’ does not exist on type ‘JQuery’

It means Typescript compiler couldn’t find “fullCalendar” interface in jQuery interface. We need to add “fullCalender” under jQuery interface. In order to do that just open file called typings.d.ts and add following:

interface JQuery {
   fullCalendar(options?: any);
}

Now when the typescript compiler finds interface, it will merge it with the jQuery interface and the error is gone.

Done! It should work like a charm! And yes, you can include any jQuery plugin in your Angular4 project by following this method 😄.

Follow RadicalLoop on Twitter, Facebook. 🚀