Full Calendar event scheduler cant added for the Angular

Question

Im Used Angular-5 for my web application Im try to added Angular for Full Calendar event scheduler But cant be added correctly for this , I want to know how to added correctly add for angular attached link(Full Calendar Event Scheduler) please help me to fix this issue look at my attach image

index.component.html

 <div class="calendar">
    <angular2-fullcalendar [options]="calendarOptions" (initialized)="onCalendarInit($event)"></angular2-fullcalendar>
  </div>

index.component.ts

export class IndexComponent {


  calendarOptions: Object = {
    height: 'auto',

    defaultDate: '2017-12',
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    navLinks: true,
    resourceAreaWidth: '15%',
    views: {
      timelineThreeDays: {
        type: 'timeline',
        duration: {
          days: 365
        }
      }
    },
    resourceGroupField: 'Rooms',
    resources: [{
      id: 'a',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 1'
    }, {
      id: 'b',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 2',
      eventColor: 'green'
    }, {
      id: 'c',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 3',
      eventColor: 'orange'
    }, {
      id: 'd',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 4',
      children: []
    }, {
      id: 'e',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 5'
    }, {
      id: 'f',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 6',
      eventColor: 'red'
    }, {
      id: 'g',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 7',
      eventColor: 'orange'
    }, {
      id: 'h',
      Rooms: ' Single Rooms (8)',
      title: 'Room # 8',
      eventColor: 'green'
    }, {
      id: 'i',
      Rooms: ' Double Rooms (2)',
      title: 'Room # 9',
      eventColor: 'red'
    }, ],
    events: [


      {
        id: '1',
        resourceId: 'a',
        start: '2017-12-01',
        end: '2017-12-07',
        title: 'Mahesh'
      }, {
        id: '2',
        resourceId: 'b',
        start: '2017-12-12',
        end: '2017-12-15',
        title: 'Anushka'
      }, {
        id: '3',
        resourceId: 'c',
        start: '2017-12-11',
        end: '2017-12-15',
        title: 'Ramesh'
      }, {
        id: '4',
        resourceId: 'd',
        start: '2017-12-11',
        end: '2017-12-19',
        title: 'Susena'
      }, {
        id: '5',
        resourceId: 'e',
        start: '2017-12-15',
        end: '2017-12-28',
        title: 'Lahiru'
      }, {
        id: '6',
        resourceId: 'f',
        start: '2017-12-01',
        end: '2017-12-10',
        title: 'Chamath'
      }, {
        id: '7',
        resourceId: 'g',
        start: '2017-12-10',
        end: '2017-12-11',
        title: 'Channa'
      }, {
        id: '8',
        resourceId: 'h',
        start: '2017-12-09',
        end: '2017-12-14',
        title: 'Ganesh'
      }, {
        id: '9',
        resourceId: 'i',
        start: '2017-12-05',
        end: '2017-12-09',
        title: 'Priya'
      }
    ],
  }


  onCalendarInit(initialized: boolean) {
    console.log('Calendar initialized');
  }
}