如何在Angular 2中使用FullCalendar

发布时间：2020-12-17 07:29:01 所属栏目：安全来源：网络整理

导读：我对Angular 2很新,并试图掌握如何将Angular 2与现有的 Javascript UI Framework库集成. 现在我正在尝试使用jQuery插件http://fullcalendar.io 或者实际上我想使用名为Scheduler的高级附加组件. 但是我在Plunker中创建了一个简单的例子…… 随意使用它并启发

我对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在上面的评论中所建议的那样.

我不得不修改文件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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!