如何在Angular 2中使用FullCalendar [英] How to use FullCalendar within Angular 2

问题描述

我对Angular 2相当陌生，正试图掌握如何将Angular 2与现有的Javascript UI框架库集成。

现在我试着玩jQuery插件 http：// fullcalendar .io
实际上，我想使用名为Scheduler的高级附加组件。然而，我在Plunker中创建了一个简单的例子...

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

https://plnkr.co/edit/eMK6Iy

...组件FullCalendarComponent当然需要修改。问题是我不知道如何。

 从'angular2 / core'导入{Component}; 
 
 @Component（{
选择器：'完整日历'，
模板：'< p>在这里，我希望看到一个日历< / p>'
 $）
 
 export class FullCalendarComponent {} 
  

解决方案

这是我设法让Scheduler在Angular2项目中工作的方式。
我从由PrimeNG创建的称为Schedule的组件开始，如Cagatay Civici上面的注释中所建议的。

我必须像下面那样修改文件scheduler.component.ts。

  export class Scheduler {
 //支持调度程序
 @Input（）resources：any []; 
 @Input（）resourceAreaWidth：string; 
 @Input（）resourceLabelText：string; 
 //支持调度程序
 
 //增加了功能
 @Input（）slotLabelFormat：any; 
 @Input（）titleFormat：any; 
 @Input（）eventBackgroundColor：any; 
 //结束添加的属性
 
 @Input（）events：any []; 
 ............ 
 ............ 
 ngAfterViewInit（）{
 this.schedule = jQuery（ this.el.nativeElement.children [0]）; 
 this.schedule.fullCalendar（{
资源：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和脚本添加到索引。 html。

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 the jQuery plugin http://fullcalendar.io Or actually I want to use the premium add-on called Scheduler.

However I created a simple example in Plunker...

Feel free to use it and enlighten me in how to make it display and also how to respond to clicking on specific events.

https://plnkr.co/edit/eMK6Iy

...the component FullCalendarComponent needs modification of course. Problem is I don't know how.

import {Component} from 'angular2/core';

@Component({
    selector: 'full-calendar',
    template: '<p>Here I would like to see a calendar</p>'
})

export class FullCalendarComponent { }

解决方案

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.

这篇关于如何在Angular 2中使用FullCalendar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！