# Day and Week Views

The **Day**, **Multi-Day**, **Week**, and **Work Week** views display events in a familiar calendar layout.

## Configuration

The **Day**, **Multi-Day**, **Week**, and **Work Week** views provide the following common settings:

* `startTime`—The first visible hour of the day.
* `endTime`—The last visible hour of the day.
* `showWorkHours`—Determines whether to show only working hours or the interval that is defined by the `startTime` and `endTime` options.
* `allDaySlot`—Toggles the all day slot.

For the full list of configuration options, refer to the [`DayViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/dayviewcomponent), [`MultiDayViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/multidayviewcomponent), [`WeekViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/weekviewcomponent), and [`WorkWeekViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/workweekviewcomponent).

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

> For configuration options shared across all views (current time marker, ongoing event highlighting, first day of week, work hours display), see [View Features](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/view-features).

## Multi-Day Timed Events

Timed events that cross midnight appear in the all-day area with time labels, even if they last less than 24 hours. Their dates and [`isAllDay`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulerevent#isallday) values do not change.

Arrows at the sides of an event indicate that it starts before or ends after the visible date range. Single-day timed events stay in the time grid; all-day events have no time labels.

When the [`allDaySlot`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#alldayslot) property is `false`, the all-day area is hidden and these events appear in the time grid. The **Show all-day area** checkbox in the example below switches between these layouts.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/views/dayweek/multi-day-events/source.txt)

## Configuring Time Slots within a Time Range

The Scheduler component allows you to configure a block of time with predefined time slots that are available for the users to book. It enables you to personalize the scheduling approach and achieve granularity:

* To set the range of time (block of time) where the time slots appear, use the [`startTime`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#starttime) and [`endTime`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#endtime) options of the Scheduler component.
* To set the length of the time slots, use the [`slotDuration`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#slotduration) property.
* To divide a time slot, use the  [`slotDivisions`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#slotdivisions) property.

The following example demonstrates the interactive configuration of time slots in the Day and Week views.

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

## Suggested Links

* [Scheduler 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)