Swapping Day and Time Axes in Scheduler

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Scheduler

Description

The days in the Day and Week views in the Kendo UI for Angular Scheduler are displayed horizontally and the time slots are in a vertical format. How can I swap the two axes so that the days are vertically displayed and the time slots are rendered horizontally?

Solution

To swap the days and time slots axes in the Scheduler and maintain a similar rendering to the Day and Week views:

1. Use the built-in TimelineViewComponent and the TimelineWeekViewComponent.

2. Utilize the built-in grouping by resources feature and declare each day of the week as a separate resource.

   ts

   public resources: Resource[] = [
       {
           name: 'Days',
           data: [
               { text: 'Mon', value: 1 },
               { text: 'Tues', value: 2 },
               { text: 'Weds', value: 3 },
               { text: 'Thurs', value: 4 },
               { text: 'Fri', value: 5 },
               { text: 'Sat', value: 6 },
               { text: 'Sun', value: 7 },
           ],
           ...
       },
   ];

3. Provide the custom array with Resource objects to the resources property of the Scheduler.

   html

   <kendo-scheduler
       [kendoSchedulerBinding]="events"
       [group]="group"
       [resources]="resources"
   >
       <kendo-scheduler-timeline-view> </kendo-scheduler-timeline-view>
       <kendo-scheduler-timeline-week-view></kendo-scheduler-timeline-week-view>      
   </kendo-scheduler>

The following example demonstrates how to swap the day and time axes of the Scheduler.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Scheduler Overview
• Kendo UI for Angular Scheduler Timeline View
• API Reference of the Scheduler Component