angular2-fullcalendar の使い方。

社内システムでAngularを使用しています。
カレンダーの実装が必要だったためおしゃれなカレンダーのライブラリを探して「angular2-fullcalendar 」にたどり着きました。
npm:https://www.npmjs.com/package/angular2-fullcalendar
demo:https://fullcalendar.io/

使い方を残しておきます。

ターミナル

npm install ap-angular2-fullcalendar --save

コマンドを叩いて、npmからfullcalendarをインストールします。

その後下記のソースコードを描いてください。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {CalendarComponent} from "ap-angular2-fullcalendar";

@NgModule({
  declarations: [
    AppComponent,
    CalendarComponent//追加
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

style.css

@import "../node_modules/fullcalendar/dist/fullcalendar.min.css";

app.component.html

<h1>
  {{title}}
</h1>
<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar><!--追加-->

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {CalendarComponent} from "ap-angular2-fullcalendar";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  //以下追加
  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;

  changeCalendarView(view) {
    this.myCalendar.fullCalendar('changeView', view);
  }

  calendarOptions:Object = {
    height: 500,//高さを任意で指定
    fixedWeekCount : false,
    defaultDate: '2016-09-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events: [
      {
        title: 'All Day Event',
        start: '2016-09-01'
      },
      {
        title: 'Long Event',
        start: '2016-09-07',
        end: '2016-09-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2016-09-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2016-09-11',
        end: '2016-09-13'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2016-09-28'
      }
    ]
  };

}

app.component.tsのheightにはデザインに合うような数値を入れてください。