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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/overview/source.txt)

## Feature Compatibility

| Feature                  | Day | Multi-<br />Day | Week | Work<br />Week | Multi-<br />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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/time-marker/source.txt)

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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/highlight-events/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/dayviewcomponent#highlightongoingevents).

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

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/week-start/source.txt)

## Hiding Specific Days

Control which weekdays appear in the Scheduler by setting the [`hiddenDays`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#hiddendays) input. The value is an array of [`Day`](https://www.telerik.com/kendo-angular-ui-develop/components/date-math/api/day) enum values from [Date Math](https://www.telerik.com/kendo-angular-ui-develop/components/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>
    
    <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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/hidden-days/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/event-height/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/work-hours/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/scroll-time/source.txt)

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/common-features/time-slot-config/source.txt)

## Suggested Links

* [View Types Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views)
* [Day and Week Views](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/day-week)
* [Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/resources-grouping)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)