Angular2中的FullCalendar，npm无法正确呈现

Question

我有一个简单的Angular 2 plunker here，它使用FullCalendar制作一个简单的日历。唯一的问题是它没有正确呈现。

我没有在控制台中出现任何错误，似乎有些工作正常，因为它获取了我的配置和我的事件，我可以添加一个事件。

唯一的问题是，视图无法正确呈现。我希望看到像this one这样的视图，但我会在plunker中得到一个奇怪的视角。

PLUNKER

component.ts

//our root app component
import 'jquery';
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Subject } from 'rxjs/Subject';
import 'moment';
import 'fullcalendar';

 declare let $:any; //JQuery

@Component({
  selector: 'my-app',
  template: `
    <div class="container">

      <div class="row">
        <div class="col-xs-12">
          <div id='calendar'></div>
        </div>
      </div>

    </div>  
  `,
})
export class App implements OnInit {
  calElement = null;
  eventlist: any[] = [
        {
            title  : 'test title',
            description  : 'event1',
            start  : '2016-11-07 13:00',
            end    : '2016-11-07 17:00',
            type: 'event'
        },
        {
            title  : '',
            description: 'event2',
            start  : '2016-11-05 10:00',
            end    : '2016-11-07',
            type: 'staff'
        },
        {
            title  : '',
            description: 'event3',
            start  : '2016-11-09T12:30:00',
            allDay : false, // will make the time show
            type: 'meeting'
        }
      ];

  constructor() { }

  ngOnInit() {
    this.calElement = $('#calendar');

    this.calElement.fullCalendar({
      header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay listMonth,listWeek,listDay'
            },
            defaultView: 'month',
      aspectRatio: 1,
      events: this.eventlist,
      eventRender: function(event, element) {
        $(element).addClass('calEvent');
        switch(event.type.toLowerCase()) {
            case "meeting":
              $(element).addClass('meeting');
              break;
            case "event":
              $(element).addClass('event');
              break;
            case "staff":
              $(element).addClass('staff');
              break;
            default:
              break;
        }
      },
      eventClick: function(calEvent, jsEvent, view) {

        // change the border color just for fun and so I know it works
        $(this).css('border-color', 'blue');

    }
    });
  }

  next() {
    this.calElement.fullCalendar('next');
  }
  prev() {
    this.calElement.fullCalendar('prev');
  }
  add() {
    // debugger;
    var newEvent = {
      title: 'New Event',
      start: '2016-11-10',
      description: "Added Event",
      type: 'eVenT'
    };
    this.eventlist.push(newEvent);
    this.calElement.fullCalendar( 'renderEvent', newEvent);
  }


}

Answer 1

所以，我觉得有点愚蠢，但那是因为我错过了他们的CSS文件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />

我把它放在index.html中，然后向右发射