频道导航

如何在Angular 2中使用FullCalendar

2020-05-26 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了如何在Angular 2中使用FullCalendar，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@ 我对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.