React Scheduler - views

Specifies and configures the views to be available in the view switcher.

Type:

Array<String | Object>

Default Value: ['day', 'week']
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

This option accepts an array of strings and objects:

  • String
    A view name. Use a string if the view does not need customization, but should be available in the view switcher.

  • Object
    An individual view's configuration. Set the type option to specify the view to which the configuration should apply. This documentation section describes available options. The options set for an individual view have a higher priority than the same options set on the root level for all views.

To specify the default view, use the currentView option.

Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.

View Demo

agendaDuration

Specifies the number of dates that can be shown at a time in the agenda view.

Type:

Number

Default Value: 7

appointmentCollectorComponent

An alias for the appointmentCollectorTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentCollectorRender

An alias for the appointmentCollectorTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentCollectorTemplate

Specifies an appointment collector's custom template.

Type:

template

Template Data:
Name Type Description
appointmentCount

Number

The count of appointments aggregated in the appointment collector.
isCompact

Boolean

Indicates whether the appointment collector is compact. See an image below.
Default Name: 'appointmentCollector'

Scheduler Appointment Collector Scheduler Compact Appointment Collector

You can also set a similar option for all views at once.

See Also

appointmentComponent

An alias for the appointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentRender

An alias for the appointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentTemplate

Specifies a custom template for appointments.

Type:

template

Template Data:

Object

The current appointment's data.

Default Name: 'item'

View Demo

See Also

appointmentTooltipComponent

An alias for the appointmentTooltipTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentTooltipRender

An alias for the appointmentTooltipTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentTooltipTemplate

Specifies a custom template for appointment tooltips and appointments in the appointment collector's drop-down list.

Type:

template

Template Data:

Object

The initial appointment's data.

Default Name: 'appointmentTooltip'

For appointments in the appointment collector, this option can be ignored in favor of the dropDownAppointmentTemplate.

View Demo

See Also

cellDuration

The cell duration in minutes.

Type:

Number

Default Value: 30

dataCellComponent

An alias for the dataCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dataCellRender

An alias for the dataCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dataCellTemplate

Specifies a custom template for table cells.

Type:

template

Template Data:

Object

The current table cell's data.

Default Name: null

NOTE
There is no dataCellTemplate in the agenda view.

View Demo

See Also

dateCellComponent

An alias for the dateCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dateCellRender

An alias for the dateCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dateCellTemplate

Specifies a custom template for date scale items.

Type:

template

Template Data:

Object

The data of the current date scale item.

Default Name: null

NOTE
There is no dateCellTemplate in such views as "day" and "timelineDay".
See Also

dropDownAppointmentComponent

An alias for the dropDownAppointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dropDownAppointmentRender

An alias for the dropDownAppointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dropDownAppointmentTemplate

Specifies a custom template for appointments in the appointment collector's drop-down list.

Type:

template

Template Data:

Object

The current appointment's object.

Default Name: 'dropDownAppointment'

See Also

endDayHour

Specifies the last hour on the view's time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 24

firstDayOfWeek

The first day of a week. Does not apply to the agenda view.

Type:

Number

Default Value: undefined
Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

Use the FirstDayOfWeek enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday.

groupByDate

If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal".

Type:

Boolean

Default Value: false

DevExtreme Scheduler Group By Date

View Demo

groupOrientation

Arranges resource headers vertically (in a column) or horizontally (in a row).

Type:

String

Accepted Values: 'horizontal' | 'vertical'

This option's default value depends on the view type. The following list illustrates the dependency:

  • "horizontal"
    For the day, month, week, and workWeek view types.

  • "vertical"
    For the timelineDay, timelineMonth, timelineWeek, and timelineWorkWeek view types. For the agenda, resource headers are always organized vertically.

View Demo

See Also

groups

The resource kinds by which appointments are grouped.

Type:

Array<String>

Default Value: []

See Also

intervalCount

Multiplies the default view interval. Applies to all view types except "agenda".

Type:

Number

Default Value: 1

The following is a list of views and their default intervals:

  • "day", "timelineDay" - a day
  • "week", "timelineWeek" - a week
  • "workWeek", "timelineWorkWeek" - a week without weekends
  • "month" - a month

View Demo

See Also

maxAppointmentsPerCell

Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".

Type:

Number

|

String

Default Value: 'auto'
Accepted Values: 'auto' | 'unlimited'

This option accepts the following values:

  • "unlimited"
    The widget resizes the appointments without a limit to fit them into a cell.

  • "auto"
    The widget narrows the appointments down to a predefined size value that depends on the view. If the appointments still do not fit into the cell, the widget aggregates them in an appointment collector.

  • Number
    The number of appointments allowed in a single cell. Appointments are aggregated in an appointment collector when this number is exceeded.

View Demo

name

A custom name for the view. This name goes to the view switcher.

Type:

String

Default Value: undefined

resourceCellComponent

An alias for the resourceCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

resourceCellRender

An alias for the resourceCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

resourceCellTemplate

Specifies a custom template for resource headers.

Type:

template

Template Data:

Object

The current resource header's data.

Default Name: null

View Demo

See Also

startDate

Specifies the date from which to start counting the view interval. Applies to all view types except "agenda".

Type:

Date

|

Number

|

String

Default Value: undefined

If this option is not defined, the count starts from the currentDate.

View Demo

startDayHour

Specifies the first hour on the view's time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 0

timeCellComponent

An alias for the timeCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

timeCellRender

An alias for the timeCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

timeCellTemplate

Specifies a custom template for time scale items.

Type:

template

Template Data:

Object

The data of the current time scale item.

Default Name: null

NOTE
There is no timeCellTemplate in such views as "month", "timelineMonth" and "agenda".
See Also

type

The name of the view.

Type:

String

Default Value: undefined
Accepted Values: 'agenda' | 'day' | 'month' | 'timelineDay' | 'timelineMonth' | 'timelineWeek' | 'timelineWorkWeek' | 'week' | 'workWeek'

Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.