View Types

The Scheduler widget provides several types of views. This topic describes visual elements and their position for each view.

A user switches between views with the View Switcher. To specify which views are available in it, assign an array to the views option. To define what view is displayed after the first launch, set the currentView option.

JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        views: ['day', 'week', 'agenda'],
        currentView: 'week'
    });
});

Day View

The day view displays appointments scheduled to a specified date. The Scheduler widget arranges appointments from top to bottom. If their time intervals overlap, the width of appointments is decreased and they are placed alongside.

Day View

All-day appointments are displayed in the all-day panel. This panel can hold one or two appointments; all others are shown collapsed.

Collapsed appointments

When collapsed appointments occupy more than 75% of a cell width, they all are aggregated in an appointment collector. It has a default color, but if collapsed appointments are associated with the same resource, the collector has the color of this resource.

Appointment Collector

To view associated appointments, a user clicks the appointment collector.

Drop-down List of Appointments

If you group appointments by resources, the resource headers are displayed above the all-day panel.

Resource headers

Week and WorkWeek Views

The week and workWeek views display appointments scheduled to a week. They differ from each other in that the workWeek view does not include weekends. The Scheduler widget arranges appointments from top to bottom. If their time intervals overlap, the width of appointments is decreased and they are placed alongside.

Week View

The all-day appointments are displayed in the all-day panel. This panel can hold one or two appointments; all others are shown collapsed.

Collapsed appointments

When collapsed appointments occupy more than 75% of a cell width, they all are aggregated in an appointment collector. It has a default color, but if collapsed appointments are associated with the same resource, the collector has the color of this resource.

Appointment Collector

To view associated appointments, a user should click the appointment collector.

Drop-down List of Appointments

If you group appointments by resources, the resource headers are located above the day scale.

Resource Headers

Month View

The month view displays appointments scheduled to a month. The Scheduler widget arranges appointments from left to right. The size of an appointment depends on its duration in days. Even if an appointment lasts only for several hours or minutes, it occupies the entire day cell. The time scale and all-day panel are not available in this view.

Month View

By default, a day cell holds one or two appointments; all others are shown collapsed.

Collapsed appointments

When collapsed appointments occupy more than 75% of a cell width, they all are aggregated in an appointment collector. It has a default color, but if collapsed appointments are associated with the same resource, the collector has the color of this resource.

Appointment collector

To view associated appointments, a user should click the appointment collector.

Drop-down List of Appointments

If you group appointments by resources, the resource headers are located above the day scale.

Resource Headers

Timeline Views

Timeline views display appointments on a horizontal timeline. The Scheduler widget arranges appointments from left to right. If their time intervals overlap, the width of appointments is decreased and they are placed alongside or under each other.

View Demo

The Scheduler widget supports the following timeline views.

  • timelineDay

    TimelineDay View

  • timelineWeek and timelineWorkWeek

    TimelineWeek View

  • timelineMonth

    TimelineMonth View

    Note that the size of an appointment depends on its duration in days. Even if an appointment lasts only for several hours or minutes, it occupies the entire day cell.

If you group appointments by resources, the resource headers are located at the left side of the view.

Resource Headers

Agenda View

The agenda view lists all available appointments grouped by date. This view provides a compact representation of appointments, which is useful when displaying on narrow screens. If an appointment lasts for several days, it is displayed for every day it belongs to. If an appointment lasts all day, it is placed above other appointments of that day.

Agenda View

By default, the agenda view displays appointments for seven dates at a time from the currentDate onward. To change the number of dates, specify the agendaDuration option. For details on individual views customization, see this topic.

JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            type: "agenda",
            agendaDuration: 5
        }]
    });
});

If you group appointmetns by resources, the resource headers are located at the left side of the date scale.

Resource Headers

NOTE
The agenda view does not allow a user to add appointments or modify them by dragging.
See Also