# Views

The Scheduler supports different views to display its events.

## Default Views

The Scheduler provides the following built-in views:

* `day`—Displays the events in a single day.
* `week`—Displays the events in a whole week.
* `workWeek`—Displays the events in a work week.
* `month`—Displays the events in a single month.
* `year`—Displays the events in a twelve months period.
* `agenda`—Displays the events from the current date until the next week (seven days).
* `timeline`—Displays the events for the day in line.
* `timelineWeek`—Displays the events in a whole week in line.
* `timelineWorkWeek`—Displays the events in a work week in line.
* `timelineMonth`—Displays the events for a month in line.

By default, the **Day** and **Week** views are enabled. To enable other views or configure them, use the [`views`](https://www.telerik.com/kendo-jquery-ui/documentation/api/web/scheduler#configuration-views) option.

> The built-in Scheduler views are designed to render a time-frame that ends on the day it starts. To render views which start on one day and end on another, [build a custom view](https://www.telerik.com/kendo-jquery-ui/documentation/controls/scheduler/views#custom-views).

The following example demonstrates how to enable all Scheduler views.

```
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  views: [
    "day", // A view configuration can be a string (the view type) or an object (the view configuration).
    { type: "week", selected: true }, // The "week" view will appear as initially selected.
    "month",
	    "year",
    "agenda"
  ],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Breakfast"
    },
    {
      id: 2,
      start: new Date("2013/6/6 10:15 AM"),
      end: new Date("2013/6/6 12:30 PM"),
      title: "Job Interview"
    }
  ]
});
</script>
```

## Custom Views

The Scheduler enables you to create custom views which meet the specific project requirements by extending the default `View` classes of the Scheduler. To implement a custom view, extend (inherit from) one of the existing views.

The following source-code files contain the views implementation:

* `kendo.scheduler.view.js`—Contains the basic logic of the Scheduler views. Each of the other predefined views extends the `kendo.ui.SchedulerView` class.
* `kendo.scheduler.dayview.js`—Contains the logic which implements the `MultiDayView`. The `MultiDayView` class is further extended to create the `DayView`, the `WeekView`, and the `WorkWeekView`.
* `kendo.scheduler.monthview.js`—Contains the implementation of the `MonthView` which extends the `SchedulerView`.
* `kendo.scheduler.yearview.js`—Contains the implementation of the `YearView` which extends the `SchedulerView`.
* `kendo.scheduler.timelineview.js`—Implements the `TimelineView`, the `TimelineWeekView`, the `TimelineWorkWeekView`, and the `TimelineMonthView`. The `TimelineWeekView`, the `TimelineWorkWeekView`, and the `TimelineMonthView` extend the `TimelineView` class.
* `kendo.scheduler.agendaview.js`—Implements the `AgendaView` which extends the `SchedulerView`.

You can override each method and property that are defined in the list by extending the respective class. In this way, the functionality and the appearance of the view will be altered by creating the new, custom view. For more information, refer to the `kendo.scheduler.dayview.js` and `kendo.scheduler.timelineview.js` files which contain definitions of views which extend the already defined `MultiDayView` and `TimelineView` views.

For a runnable example please refer to this [Create Custom Scheduler Views by Inheriting Built-In Views example](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/custom-view).

## See Also

* [Basic Usage of the Scheduler (Demo)](https://demos.telerik.com/kendo-ui/scheduler/index)
* [Using the API of the Scheduler (Demo)](https://demos.telerik.com/kendo-ui/scheduler/api)
* [JavaScript API Reference of the Scheduler](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/scheduler)