在Angular2中使用npm无法正确渲染FullCalendar

Question

我有一个简单的Angular 2 plunker，在这里，它使用FullCalendar来创建一个简单的日历。唯一的问题是它没有正确渲染。

我在控制台没有得到任何错误，它似乎是一些工作，因为它得到我的配置和我的事件，我可以添加一个事件给它。

唯一的问题是，视图没有正确呈现。我希望看到像这样的视图，但相反，我在柱塞中得到了那个被压扁的奇怪的视图。

恰好

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中，它就启动了