fullcalendar week view - show resources instead of hours

Question

I am using fullcalendar and scheduler in my angular2 application.

As a "directive" I use primeng approach for wrapping scheduler from here.

In day view I can display Resources vertically and hours horizontally - this is OK.

When I switch to weekView I need to show the Resources in the same way (vertically) and week days (horizontally). Actually I have day hour (vertically) and week days (horizontally).

Can someone guide me how to realize that please. (For WeekView Show Resources vertically and weekDays horizontally).

Thanks.

Code snippets:

Component:

export class SchedulerComponent implements OnInit {

    events: any;
    resources: any;
    header: any;

    resourceText: string;
    eventBgColor: string;

    height: number;
    contentHeight: number;
    resourceAreaWidth: number; 
    eventStartEditable: boolean;
    eventDurationEditable: boolean;
    dragRevertDuration: boolean;
    defaultView: string;

    ngOnInit() {
        this.initResources();
        this.initEvents();
        this.initOptions();
    }

    initOptions() {
        this.header = {
            left: 'today prev,next',
            center: 'title',
            right: 'timelineDay,agendaWeek,month'                
        };

        this.resourceText = 'Rooms';
        this.resourceAreaWidth = 250;

        this.eventBgColor = 'DeepSkyBlue';

        this.height = 25 * this.resources.length;
        this.contentHeight = 25 * this.resources.length + 290;
        this.eventStartEditable = true;
        this.eventDurationEditable = true;
        this.dragRevertDuration = false;
        this.defaultView = "timelineDay";
    }
}

Html Template:

<schedule [header]="header"
           [resources]="resources"
           [events]="events"
           [resourceLabelText]="resourceText"
           [eventBackgroundColor]="eventBgColor"

           [contentHeight]="contentHeight"
           [resourceAreaWidth]="resourceAreaWidth"
           [eventStartEditable]="eventStartEditable"
           [eventDurationEditable]="eventDurationEditable"
           [dragRevertDuration]="dragRevertDuration"
           [defaultView]="defaultView"

          >

Answer 1

I figured out how to customize the view. (I am not sure it is the best way. You are welcome to suggest other approaches.)

Bellow is my solution:
in initOptions I configure the header in this way:

this.header = {
            left: 'today prev,next',
            center: 'title',
            right: 'timelineDay,timelineWeek,month'                
        };

Attention: instead of agendaWeek i used timelineWeek.

Also, this was not enough for my needs. It was necessary to make the slotDuration equal with 24hours.

in my component I've added the field slotDuration, and i initialized it in initOptions method.

/*.properties...*/
slotDuration: string;

/*.initOptions..*/
this.slotDuration = '24:00:00';

I added this line to my html template: [slotDuration]="slotDuration"

The result

Note: by using the slotDuration equal with 24 hours will affect DayView. Actually I will investigate how to change the slotDuration on ViewSwitch event in order to make it equal with 1hour for DayView and 24Hours for WeekView.