如何在Angular 2中使用FullCalendar

Question

我是Angular 2的新手,正试图掌握如何将Angular 2与现有的Javascript UI Framework库集成.

现在我正在尝试使用jQuery插件http://fullcalendar.io 或者实际上我想使用名为Scheduler的高级插件.

但是我在Plunker中创建了一个简单的例子......

随意使用它并启发我如何使其显示以及如何响应点击特定事件.

https://plnkr.co/edit/eMK6Iy

...组件FullCalendarComponent当然需要修改.问题是我不知道怎么做.

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

这是我设法让Scheduler在Angular2项目中工作的方法.我开始使用由PrimeGG创建的名为Schedule的组件,如Cagatay Civici上面的评论中所建议的那样.

我必须修改文件scheduler.component.ts,如下所示.

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

然后我不得不将fullcalendar和scheduler的css和脚本添加到index.html.