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

Common View Features

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.

Change Theme

Theme

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	✓	✓	✓	✓	—	—	✓	—	—

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>

Change Theme

Theme

Loading ...

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

Highlight 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>

Change Theme

Theme

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.

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

<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.

Change Theme

Theme

Loading ...

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.

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.

Change Theme

Theme

Loading ...

Work Hours Display

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.

Change Theme

Theme

Loading ...

Scroll Time

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.

Change Theme

Theme

Loading ...

Time Slot Configuration

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.

Change Theme

Theme

Loading ...