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

Appointment

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.
  • disabled
    Specifies whether or not an appointment is displayed as 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 recurrent appointment.
  • recurrenceException
    Specifies exceptions for the currently 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. For details, refer to the Customize an Item Appearance topic.

If a user clicks an appointment, the widget displays the appointment tooltip.

Scheduler Tooltip

If a user double-clicks an appointment, the widget displays the popup window that holds the information about the selected appointment.

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.