# Views Basics

You can configure the Scheduler to display events in different views. All views support resource grouping, allowing you to organize events by criteria such as meeting rooms, staff members, or any custom categorization.

## View Types

<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/day-week">
      <ComponentTitle>Day, MultiDay, Week, and Work Week</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display events in detailed daily and weekly formats with hourly time slots and customizable work hours.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/multi-week">
      <ComponentTitle>Multi-Week</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Show multiple weeks simultaneously for broader scheduling overview and long-term planning.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/month">
      <ComponentTitle>Month</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Present events in a traditional monthly calendar format with compact event display.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/timeline">
      <ComponentTitle>Timeline and Timeline Week</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Visualize events in horizontal timeline format, ideal for resource scheduling and project management.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/agenda">
      <ComponentTitle>Agenda</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>List events chronologically in a clean, text-based format for easy reading and navigation.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/year">
      <ComponentTitle>Year</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Display an entire year overview with monthly mini-calendars for high-level event visualization.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/scheduler/views/custom-view">
      <ComponentTitle>Custom View</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Create specialized views tailored to specific business requirements using the SchedulerViewDirective.</ComponentDescription>
    </Component>
  </Column>
</Row>

## View Configuration

To select from the available view types and set their configuration options, place the views as child Scheduler components.

> The order of views in the toolbar is determined by the order of the child view components.

```html
<kendo-scheduler>
    <kendo-scheduler-day-view startTime="07:00">
    </kendo-scheduler-day-view>

    <kendo-scheduler-week-view>
    </kendo-scheduler-week-view>
</kendo-scheduler>
```

The following example demonstrates the **Day** and **Week** Scheduler views.

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

In Day and Week views, [multi-day timed events](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/day-week#multi-day-timed-events) appear in the all-day area with time labels and arrows at their sides.

## Shared View Features

All Scheduler views share common functionality including current time markers, ongoing event highlighting, work hours display, and calendar settings.

Configure these features globally at the component level or override them on individual views. For detailed configuration options and examples, see [View Features](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/views/view-features).

## Resource Grouping

Most Scheduler views support resource grouping, which allows you to organize events by criteria such as meeting rooms, staff members, equipment, or any custom categorization. Resources are displayed as separate visual lanes or columns, making it easy to see resource allocation and manage scheduling conflicts.

```html
<kendo-scheduler [resources]="resources" [group]="group">
    <kendo-scheduler-day-view></kendo-scheduler-day-view>
    <kendo-scheduler-week-view></kendo-scheduler-week-view>
</kendo-scheduler>
```

```ts
export class AppComponent {
    public resources: Resource[] = [
        {
            name: 'Rooms',
            field: 'roomId',
            valueField: 'value',
            textField: 'text',
            colorField: 'color',
            data: [
                { text: 'Conference Room A', value: 1, color: '#1e88e5' },
                { text: 'Conference Room B', value: 2, color: '#7b1fa2' }
            ]
        }
    ];

    public group: Group = {
        resources: ['Rooms'], // Match the resource name defined above.
        orientation: 'vertical'
    };
}
```

Resource grouping works across the following view types:

* **Day/Week views** display resources as columns or vertical lanes.
* **Month view** shows resource allocation over longer periods.
* **Timeline views** excel at displaying many resources simultaneously.
* **Agenda view** lists events grouped by resource chronologically.

> The **Year view** does not support resource grouping as it provides a high-level calendar overview rather than detailed event display.

For detailed configuration of shared view functionality (time markers, 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). For resource-specific configuration, examples, and best practices, see the [Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/resources-grouping) article.

## Setting the Selected View

To control the currently selected view, use the [`selectedViewIndex`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#selectedviewindex) attribute.

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

## Suggested Links

* [Scheduler Resources and Grouping](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/resources-grouping)
* [Templates](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/templates)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)