MultiDayViewComponent: setting table column width

[Ruben]

I am using the MultiDayView component and need to see 60 days ahead. What the component does now is put all those 60 days into the total width of the scheduler (without horizontal scrollbar). Is there a way to influence the column width of the day and automatically create an overflow with horizontal scrollbar?

 

 

[Martin]

Hi Ruben,

In order to enable a horizontal scrollbar, the Scheduler slots width should be set. Using the [slotClass] function of the MultiDayView component we can apply any custom styles to each slot of the table.

However, with the above approach, the day slot width is not affected. I am afraid that there is no built-in option to set the width of the day table, but using some custom CSS code we can achieve the desired layout:

      .k-scheduler-table th {
        width: 60px;
      }

Here is an example:

https://stackblitz.com/edit/angular-fpweaf?file=app/app.component.ts

Another possible approach is to set a width (e.g. 3000px) directly to the Scheduler component, but then the scrollbar will be added to the page, not the Scheduler: 

    <kendo-scheduler
      [kendoSchedulerBinding]="events"
      [selectedDate]="selectedDate"
      startTime="07:00"
      endTime="19:00"
      style="height: 600px; width: 3000px"
    >

Here is an example of the second approach:

https://stackblitz.com/edit/angular-fpweaf-yppnb7?file=app/app.component.ts

I hope this helps. Let me know if I can assist any further.

Regards,
Martin
Progress Telerik