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 th

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.