New to Kendo UI for Angular? Start a free 30-day trial

Common View Features

Updated on Aug 28, 2026

The Scheduler provides common functionality that you can configure across all view types to create consistent user experiences. These shared features help users navigate schedules, understand time contexts, and interact with events efficiently.

Configure these features at the component level to apply them to all views, or set them individually on specific views to override the global settings. This flexibility allows you to tailor the scheduling experience to meet different user needs within the same application.

Loading ...

Feature Compatibility

Feature	Day	Multi- Day	Week	Work Week	Multi- Week	Month	Timeline	Agenda	Year
Current Time Marker	✓	✓	✓	✓	✓	—	✓	—	—
Highlight Ongoing Events	✓	✓	✓	✓	✓	✓	✓	✓	✓
First Day of Week	✓	✓	✓	✓	✓	✓	—	✓	✓
All-Day Slot	✓	✓	✓	✓	—	—	—	—	—
Event Height	✓	✓	✓	✓	✓	✓	✓	—	—
Work Hours Display	✓	✓	✓	✓	—	—	—	—	—
Scroll Time	✓	✓	✓	✓	—	—	✓	—	—
Time Slot Configuration	✓	✓	✓	✓	—	—	✓	—	—
Hidden Days	—	✓	✓	✓	✓	✓	✓*	✓	—

Legend:

✓ = Feature supported.
— = Feature not supported.
* = For Timeline views, hiddenDays applies to Timeline Week and Timeline Month only.

Displaying the Current Time Marker

Display a visual marker that shows the current time across all time-based views. This feature helps users quickly orient themselves within the schedule and understand their current position in time.

html

<kendo-scheduler [currentTimeMarker]="true">
    <kendo-scheduler-day-view></kendo-scheduler-day-view>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>

The following example demonstrates the current time marker displayed across multiple Scheduler views.

Loading ...

The current time marker appears as a distinct line that moves automatically as time progresses, providing real-time context without requiring page refreshes.

Highlighting Ongoing Events

By default, the Scheduler highlights events that are currently in progress. This visual emphasis helps users identify active meetings or appointments at a glance. This behavior can be disabled or customized through the highlightOngoingEvents input.

html

<kendo-scheduler [highlightOngoingEvents]="true">
    <kendo-scheduler-day-view></kendo-scheduler-day-view>
    <kendo-scheduler-agenda-view></kendo-scheduler-agenda-view>
</kendo-scheduler>

The following example demonstrates how to highlight ongoing events by applying a custom CSS class to active events.

Loading ...

Per-View Configuration

If settings are passed to the Scheduler component, they are applied to all of its views. However, if feature settings are passed to a given view individually, those take precedence over component-level settings.

html

<kendo-scheduler
    [currentTimeMarker]="true"
    [highlightOngoingEvents]="true">
    <kendo-scheduler-day-view
        [currentTimeMarker]="false"
        [highlightOngoingEvents]="false">
    </kendo-scheduler-day-view>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>

In this example, the Week view inherits the component-level settings (both features enabled), while the Day view overrides them (both features disabled). For more details, see the individual view API references such as Day view.

Setting the First Day of Week

Set which day starts the week across all calendar-based views. This setting affects the display order in Week, Multi-Week, and Month views.

html

<!-- Use 1 to start the week on Monday. -->
<kendo-scheduler [weekStart]="1">
    <kendo-scheduler-month-view></kendo-scheduler-month-view>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>

The weekStart property accepts values from 0 (Sunday) to 6 (Saturday), allowing you to match local calendar conventions or business requirements.

The default first day of the week is determined by your application's locale ID. For example, locales like en-US default to Sunday (0), while en-GB and many European locales default to Monday (1). If your locale already uses Monday as the first day, setting weekStart to 1 will not change the display.

Loading ...

Hiding Specific Days

Control which weekdays appear in the Scheduler by setting the hiddenDays input. The value is an array of Day enum values from Date Math.

The feature is supported by all views except Day and Year views. For Timeline views, it applies only to Timeline Week and Timeline Month.

html

<kendo-scheduler [hiddenDays]="[Day.Saturday, Day.Sunday]">
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>

To override the global configuration for a specific view, set hiddenDays on that view:

html

<kendo-scheduler [hiddenDays]="[Day.Saturday, Day.Sunday]">
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
    <!-- An empty array restores all days for the Month view. -->
    <kendo-scheduler-month-view [hiddenDays]="[]"></kendo-scheduler-month-view>
</kendo-scheduler>

The following example demonstrates how to hide specific weekdays and override the hidden-days configuration per view.

Loading ...

Showing the All-Day Slot

Control the visibility of the all-day event slot in time-based views. This slot appears at the top of Day, Week, and Work Week views to display events that span entire days.

html

<kendo-scheduler>
    <kendo-scheduler-day-view [allDaySlot]="true"></kendo-scheduler-day-view>
    <kendo-scheduler-week-view [allDaySlot]="false"></kendo-scheduler-week-view>
</kendo-scheduler>

By default, the all-day slot is enabled. Set it to false to hide the slot and save vertical space when you don't need to display full-day events.

Configuring Event Height

Configure the height of events displayed in the Scheduler views. This setting helps maintain visual consistency and optimize space usage.

html

<kendo-scheduler>
    <kendo-scheduler-day-view [eventHeight]="40"></kendo-scheduler-day-view>
    <kendo-scheduler-month-view [eventHeight]="'auto'"></kendo-scheduler-month-view>
</kendo-scheduler>

The eventHeight property sets the height in pixels of events in the Scheduler views. For Month, Timeline, and Multi-Week views, it controls the height of regular and all-day events. For Day and Week views, it controls the height of all-day events. The Month view also supports "auto" height based on content.

Loading ...

Displaying Work Hours Only

Show only business hours in time-based views to focus on the working schedule. This feature helps users concentrate on relevant time periods.

html

<kendo-scheduler>
    <kendo-scheduler-day-view
        [showWorkHours]="true"
        workDayStart="09:00"
        workDayEnd="16:00">
    </kendo-scheduler-day-view>
</kendo-scheduler>

When showWorkHours is enabled, the view displays only the specified work hours range. Users can still toggle to see the full day if needed.

Loading ...

Setting the Initial Scroll Position

Set the initial scroll position for time-based views. This feature helps users start at the most relevant time of day.

html

<kendo-scheduler>
    <kendo-scheduler-day-view scrollTime="08:00"></kendo-scheduler-day-view>
    <kendo-scheduler-timeline-view scrollTime="09:30"></kendo-scheduler-timeline-view>
</kendo-scheduler>

Accepts time values in HH:mm format or JavaScript Date objects. The view will automatically scroll to this time when first loaded.

Loading ...

Configuring Time Slot Duration and Divisions

Configure the duration and divisions of time slots in time-based views. This allows you to match your scheduling granularity requirements.

html

<kendo-scheduler>
    <kendo-scheduler-day-view
        [slotDuration]="30"
        [slotDivisions]="2">
    </kendo-scheduler-day-view>
</kendo-scheduler>

The slotDuration sets the time span (in minutes) of each major slot, while slotDivisions determines how many minor divisions appear within each major slot.

Loading ...