我对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 { }
这是我设法让Scheduler在Angular2项目中工作的方式.
我开始使用由PrimeGG创建的名为Schedule的组件,正如Cagatay Civici在上面的评论中所建议的那样.
我开始使用由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.