Как использовать вертикальный ресурс в полном календарном расписании в угловых 2

Question

Я хочу сделать как вертикальный вид ресурса в fullcalendar в angular 2, но когда я реализую его в своем проекте, он не работает. это также не показывает ошибку или ничего.

вот мои варианты полного календаря:

this.calOptions ={
  header: {
      left: 'title',
      // center: '',
      right: 'agendaWeek,agendaDay today prev,next'
    },
        defaultDate: new Date(),
        editable: true,
        eventLimit: true,
        defaultView: 'agendaDay',
        groupByDateAndResource: true,
        events: [
    // events go here
        ],
        resources: [
            { id: 'a', title: 'Room A' },
            { id: 'b', title: 'Room B' },
            { id: 'c', title: 'Room C' },
        ],
        dayClick: function(date, jsEvent, view) {
          console.log("hiii");
          (<any>$('#myModal33')).modal('show');
        }
};

моя часть HTML это:

<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal style="display:none"></angular2-fullcalendar>

импортированные файлы:

<link rel='stylesheet' href='assets/calendar/fullcalendar.css' />
<link href='assets/calendar/scheduler.css' rel='stylesheet' />
<script src='assets/calendar/jquery.min.js'></script>
<script src='assets/calendar/moment.min.js'></script>
<script src='assets/calendar/fullcalendar.js'></script>
<script src='assets/calendar/scheduler.js'></script>

Помогите мне, пожалуйста...