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库。

请绘制下述源代码。

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 { }

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

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

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 属性设置为适合设计的数值。