web-dev-qa-db-ja.com

Angular 2内でFullCalendarを使用する方法

私はAngular 2にかなり慣れており、既存のJavascript UI FrameworkライブラリとAngular 2を統合する方法を把握しようとしています。

今、私はjQueryプラグインで遊んでいます http://fullcalendar.io または、実際にスケジューラと呼ばれるプレミアムアドオンを使用したいと思います。

ただし、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 { }
angularfullcalendar
8
Magnus Wallström

Angular2プロジェクトでスケジューラを機能させる方法を次に示します。 Cagatay Civiciによる上記のコメントで示唆されているように、PrimeNGによって作成されたScheduleというコンポーネントから始めました。

以下のようにファイル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に追加する必要がありました。

7
Magnus Wallström

Npmパッケージを作成しました

npm install angular2-fullcalendar --save

オプション入力を使用して、fullcalendarコンポーネントを完全にカスタマイズできます。

こちらのドキュメントをご覧ください https://github.com/nekken/ng2-fullcalendar

4
Nekken

ng-fullcalendarは、Angular 2.のfullcalendarモジュールをラップします。

https://github.com/jamaks/ng-fullcalendar

自分でラッピングするのは良い考えではないと思いますし、ng2-fullcalendarはメンテナンスされていません。 ng-fullcalendarは比較的新しいプロジェクトであり、多くのアクティブなチェックインがあります。

0
Nicholas Lu

Angle2-fullcalendarは、Angular CLIの最新バージョンでは実行されていません。ここで解決策を知らせるバグを開きました。 Angular2-fullcalendarはNgModuleではありません。予期しないディレクティブCalendarComponent

0
Lupe