Scrolling Scheduler Views Horizontally

Environment

Product

Progress® Kendo UI® for Angular Scheduler

Description

How can I implement a horizontal scrolling functionality for the views of the Kendo UI for Angular Scheduler?

Solution

By design, the views of the Kendo UI for Angular Scheduler have a 100% width, which causes them to adjust based on the width of the component. To configure horizontal scrolling for the Scheduler views, use the following CSS styles:

css

  .k-scheduler .k-scheduler-layout {
    /* Adjust the width as you prefer. */
    width: 3000px;
  }

  .k-scheduler multi-day-view, 
  .k-scheduler month-view, 
  .k-scheduler agenda-view-internal {
    overflow-y: hidden;
  }

Notes

To apply the styles locally, set the encapsulation property to ViewEncapsulation.None.

See Also

• Kendo UI for Angular Scheduler Overview
• Kendo UI for Angular Scheduler Views Basics
• API Reference of the Scheduler Component