angle2-fullcalendarを使用していません

Question

https://www.npmjs.com/package/angular2-fullcalendarを参照しました。 しかし、正しく表示されません。 カレンダーのヘッダー部分のみが表示されます。 間違いはどこですか？

npm install ap-angular2-fullcalendar --save 

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

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar> 

app.component.ts

あなたのオプションで、親の設定を0にカレンダー本体の高さを設定するので、カレンダーを見てそれをコメントアウトする必要があります。どういうわけか、高さを利用し

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: 'parent', 
    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' 
     } 
    ] 
    }; 

} 

enter image description here

Answer 1

。