Visual Elements

This guide gives a detailed overview of dxScheduler 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 dxScheduler 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


An appointment in the dxScheduler widget is displayed as a rectangle laying 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 dxScheduler 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.
  • 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.
  • startDate
    Specifies the appointment's start date inserted into the appointment element.
  • endDate
    Specifies the appointment's end date inserted into the appointment element.
  • recurrenceRule
    Indicates the appointment as a recurring appointment.

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.

See Also

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.

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

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.