not use an angular2-fullcalendar

Question

I referred to https://www.npmjs.com/package/angular2-fullcalendar. But, It will not be displayed properly. Only the header part of calendar is displayed. Where is the mistake?

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

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

Somehow using the height:parent config in your options setting the height of the calendar body to 0 so you need to comment that out to see the calendar.