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 Bechev]

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

[Augusto]

Hi, I have the same problem on the Kendo Angular Scheduler. All the columns get squeezed because we have around 20-30 resources. Is there an easier way nowadays to set a min-width for the columns and to make the scheduler scroll them horizontally? Thanks

[Martin Bechev]

Hi Augusto,

The Scheduler component exposes a columnWidth property, but it's applied only for the Timeline view. For the rest of the views, enabling the horizontal scroll by using custom CSS is the way to go. Here is the updated example:

https://stackblitz.com/edit/angular-ya8vs3?file=src%2Fapp%2Fevents-utc.ts,src%2Fapp%2Fapp.component.ts

Regards

Martin

[Augusto]

Hi Martin,

Thanks for your reply and provided sample. I was hoping we could define a minimum column width, and only scroll horizontally the contents of the scheduler, leaving the scheduler header fixed so the button to switch between view modes remains visible on the top right. On that sample, the width of the entire scheduler component is set to a fixed value (3000px). Maybe what I'm after is not easily doable.

Thanks for your time.

[Martin Bechev]

Hi Augusto,

Thank you for the provided additional details for this case.

Indeed scrolling only the content (without the header) is also possible by using custom CSS code.

.k-scheduler-content .k-scheduler-table, 
.k-scheduler-header-wrap .k-scheduler-table{
    width: 3000px;
  }

Here is an example:

https://stackblitz.com/edit/angular-ya8vs3-q1az7p?file=src%2Fapp%2Fevents-utc.ts,src%2Fapp%2Fapp.component.ts

 

[Augusto]

That's very nice. Thanks a lot for your help.

[Augusto]

Hi Martin,

I have upgraded to version 16.1.0 ("@progress/kendo-angular-scheduler": "^16.1.0") and the provided solution doesn't work anymore. I would really appreciate if you can provide a solution on this new version.

Regards.

[Martin Bechev]

Hi Augusto,

With the latest version of the packages, some breaking changes were introduced, including changing CSS class syntax. Please try the following CSS to enable the scrolling:

.k-scheduler .k-scheduler-layout{

width: 3500px;

}

.k-scheduler multi-day-view{

overflow: scroll;

}

[Augusto]

Thanks Martin. That was useful! Regards