FullCalendar in Angular2 with npm not rendering correctly

Question

I have a simple Angular 2 plunker, here, that uses FullCalendar to make a simple calendar. The only problem is that it isn't rendering correctly.

I don't get any errors in the console, it seems to some what be working because it gets my config and my events and I can add an event to it.

The only thing is, the view isn't rendering correctly. I would expect a view like this one, but instead I get that smooshed weird one in the 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

So, I feel kinda dumb but it was because I was missing their css file

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

I put that in the index.html and it fired right up