Views

The Scheduler widget provides several views.

  • day
  • week
  • workWeek
  • month
  • timelineDay
  • timelineWeek
  • timelineWorkWeek
  • timelineMonth
  • agenda

To specify views available in the scheduler's View Switcher, assign an array of the required views to the widget's views option. By default, it holds ['day', 'week'].

To specify the view used by default, set the currentView option. Its default value is 'day'. You can also change this option at runtime.

Use the startDayHour and the endDayHour options to set start and end hours of the time scale. The time scale is displayed in all views, except month and timelinemonth.

The cellDuration option specifies the time cell duration in minutes. The time scale labels change depending on the specified value.

To specify the first day of a week, set the firstDayOfWeek option. It does not affect the appearance of the day, timelineDay and timelineMonth views.

In the following cases, appointments are marked with icons.

Recurrence Icon

  • In all views except agenda, if an appointment lasts for several days and partially lays outside the current view, it is marked with the break icon.

Break Icon

The crossScrollingEnabled option enables scrolling in both directions at the same time. This option is useful when displaying Scheduler on narrow screens. This option is not available in the agenda view.

Day View

The day view displays appointments assigned to the specified date.

Day View

The time scale is located at the left side of the view. Appointments are placed from top to bottom.

If time intervals of appointments overlap each other, the width of appointments decreases and they are placed alongside.

By default, the all-day panel is available in the day view. If there are no appointments in the all-day panel, it is narrow. After adding appointments, it becomes wide. The all-day panel can show three appointments, if there are more, they are shown collapsed.

Collapsed appointments

If collapsed appointments occupy more than 75% of the time cell width, they are displayed as a single appointment collector.

Appointment Collector

Click the appointment collector to view associated appointments in a drop-down list.

Drop-down List of Appointments

To make the all-day panel invisible, set the showAllDayPanel option to false.

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 assigned to a week. However, the workWeek view does not include the weekend.

Week View

The time scale is located at the left side of the view. The day scale is at the top of the view. Appointments are placed from top to bottom.

If time intervals of appointments coincide or overlap, appointments are reduced in width and placed alongside.

The all-day panel is displayed above time cells. If there are no all-day appointments, the panel is narrow. After adding appointments, it becomes wide. The panel cell can display three appointments; if there are more, they are shown collapsed.

Collapsed appointments

If collapsed appointments occupy more than 75% of the time cell width, they are displayed as a single appointment collector.

Appointment Collector

Click the appointment collector to view associated appointments in a drop-down list.

Drop-down List of Appointments

Assign false to the showAllDayPanel option to hide the all-day panel.

If you use grouping for appointments, the resource headers are located above the day scale.

Resource Headers

Month View

The month view displays appointments assigned to a month.

Month View

Appointments are placed from left to right. The day scale is located at the top of the view. The time scale and all-day panel are not available in this view. 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.

Appointment

By default, a day cell displays two appointments, if there are more, they are shown collapsed.

Collapsed appointments

If collapsed appointments occupy more than 75% of the day cell width, they are displayed as a single appointment collector.

Appointment collector

Click the appointment collector to view associated appointments in a drop-down list.

Drop-down List of Appointments

If an appointment collector encloses appointments associated with the same resource, it has the color of the assigned resource. Otherwise the collector is colored in default color.

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

Resource Headers

Timeline Views

Timeline views display appointments associated with a particular time period on a horizontal timeline.

The Scheduler widget supports the following timeline views.

  • timelineDay

TimelineDay View

  • timelineWeek and timelineWorkWeek

TimelineWeek View

  • timelineMonth

TimelineMonth View

On timeline views, appointments are placed from left to right. The time scale is located at the top of the view. In the timelineWeek and timelineWorkWeek views the day scale is located at the top, above the time scale.

If time intervals of appointments coincide or overlap, the width of appointments decreases and they are placed alongside or under each other.

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

Resource Headers

In the timelineMonth view, 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.

Appointment

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.

Agenda View

The agenda view can display appointments for seven dates at a time starting with the date specified using the currentDate option. The all-day panel is not available in the agenda view. If an appointment lasts all day, it is placed above other appointments of that day.

If you group appointments by resources, the resource headers are located to the left of the dates.

Resource Headers

If an appointment lasts for several days, it is displayed for every date it belongs to. The start and end dates of such appointments automatically change according to the current day time interval an appointment takes.

The agenda view does not support the adding and dragging of appointments.