How to use FullCalendar within Angular 2

Question

I'm fairly new to Angular 2 and are trying to get a grip of how to integrate Angular 2 with existing Javascript UI Framework libraries.

Now I'm trying to play with the jQuery plugin http://fullcalendar.io Or actually I want to use the premium add-on called Scheduler.

However I created a simple example in Plunker...

Feel free to use it and enlighten me in how to make it display and also how to respond to clicking on specific events.

https://plnkr.co/edit/eMK6Iy

...the component FullCalendarComponent needs modification of course. Problem is I don't know how.

import {Component} from 'angular2/core';

@Component({
    selector: 'full-calendar',
    template: '<p>Here I would like to see a calendar</p>'
})

export class FullCalendarComponent { }

Answer 1

Here is the way I managed to get the Scheduler working in an Angular2 project. I started with the component called Schedule created by PrimeNG as suggested in a comment above by Cagatay Civici.

I had to modify the file scheduler.component.ts like below.

export class Scheduler {
// Support for Scheduler
@Input() resources: any[];   
@Input() resourceAreaWidth: string;            
@Input() resourceLabelText: string; 
// End Support for Scheduler

// Added functionality
@Input() slotLabelFormat: any;
@Input() titleFormat: any;
@Input() eventBackgroundColor: any;
// End added properties

@Input() events: any[];
............
............
ngAfterViewInit() {
    this.schedule = jQuery(this.el.nativeElement.children[0]);
    this.schedule.fullCalendar({
        resources: this.resources,
        resourceAreaWidth: this.resourceAreaWidth,
        resourceLabelText: this.resourceLabelText,
        titleFormat: this.titleFormat,
        slotLabelFormat: this.slotLabelFormat,
        eventBackgroundColor: this.eventBackgroundColor,
        theme: true,
        header: this.header,
...........

Then I had to add the css and script for fullcalendar and scheduler to the index.html.