Visual Elements

This guide gives a detailed overview of Scheduler visual elements. Each topic in this guide contains a brief description of an element and its main features, which can be configured.

Below is a scheduler element map. It may be helpful as you begin learning the capabilities of the Scheduler widget. Hover over an element on the map to discover the name of this element. A click on an element navigates you to a topic devoted to this element.

DevExtreme dxScheduler Elements Date Navigator View Selector Resource Headers Appointment Appointment Image Map

Watch Video

Appointment

An appointment in the Scheduler widget is displayed as a rectangle lying on the timetable of the scheduler area. The time cells it occupies correspond to its scheduled time interval.

Scheduler Appointment

The appointment displayed above uses a default template defined for the Scheduler widget. This template is based on a predefined set of fields in the widget data source, requiring you to provide the required set of fields for your widget's data source, so that widget items are displayed using a default template. The following are the fields that are used in the default item template.

  • visible
    Specifies whether or not the appointment is visible.
  • disabled
    Specifies whether or not an appointment is displayed disabled.
  • html
    Specifies the html code inserted into the appointment rectangle.
  • template
    Specifies an item template that should be used to render this appointment only.
  • text
    Specifies the subject inserted into the appointment element.
  • description
    Specifies a detailed description of the appointment.
  • startDate
    Specifies the appointment's start date inserted into the appointment element.
  • endDate
    Specifies the appointment's end date inserted into the appointment element.
  • allDay
    Specifies whether or not the appointment lasts all day.
  • recurrenceRule
    Indicates the appointment as a recurring appointment.
  • recurrenceException
    Specifies exceptions for the current recurring appointment.
  • endDateTimeZone
    Specifies the timezone of the appointment end date.
  • startDateTimeZone
    Specifies the timezone of the appointment start date.

You can customize the appearance of appointments. For instance, they may consist of several text blocks with images. To define a custom appearance, specify a custom appointment template for the widget using the appointmentTemplate or onAppointmentRendered option. For details, refer to the Customize an Item Appearance topic.

When the appointment is clicked, the tooltip is displayed.

Scheduler Tooltip

When the appointment is double-clicked, the popup window with the information about the selected appointment appears.

Scheduler Popup window

View Switcher

View switcher is a scheduler element used for quick switching between different scheduler views.

You can specify which views are available within the switcher. For this purpose, use the widget's views option.

JavaScript
var schedulerOptions = {
    // ...
    views: ['week', 'month']
}

When the Scheduler is displayed on a mobile device, it uses a drop-down menu to switch views. To specify whether or not the widget uses drop-down menu instead of tabs, use the useDropDownViewSwitcher option.

JavaScript
var schedulerOptions = {
    // ...
    useDropDownViewSwitcher: true
}

Drop-down View Switcher

Date Navigator

The Date navigator provides a quick and easy way of changing dates in the currently displayed scheduling area.

Scheduler View Selector

Resource Headers

Resource headers display information about resources, assigned to appointments. They are visible only when the appointments are grouped by resources.

Scheduler View Selector

Read the Group Appointments by Resources topic to learn how to set grouping.