React Scheduler - views

Configures individual views.

Type:

Array<String>

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

The option accepts an array of views to be available within the scheduler View Switcher. If you need to customize a view, add a configuration object for it to the array. The configuration options that you can specify are listed further in this documentation section. If a view does not need individual customization, just add its type to the array.

JavaScript
var schedulerOptions = {
    // . . .
    dataSource: schedulerData,
    startDayHour: 9,
    endDayHour: 18,
    views: [
        { type: "day", startDayHour: 7, endDayHour: 22 },
        { type: "workWeek", cellDuration: 60 },
        "week",
        "agenda"
    ]
};

Set a default view by using the currentView option.
For more information on scheduler views, refer to the Views guide.

When using the widget as an ASP.NET MVC Control, specify this option using the SchedulerViewType enum. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth and Agenda.

View Demo Watch Video

agendaDuration

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

Type:

Number

Default Value: 7

appointmentTemplate

Specifies a custom template for appointments.

Type:

template

Template Data:

Object

The current appointment's data.

Default Name: 'item'

View Demo

See Also

appointmentTooltipTemplate

Specifies a custom template for appointment tooltips.

Type:

template

Template Data:

Object

The data of the appointment whose tooltip is rendered.

Default Name: 'appointmentTooltip'

View Demo

See Also

cellDuration

The cell duration in minutes.

Type:

Number

Default Value: 30

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

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

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'

View Demo

See Also

endDayHour

The end hour of the view time scale.

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

When using the widget as an ASP.NET MVC Control, specify this option using the FirstDayOfWeek enum. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday.

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. In the "day", "week" and "workweek" views, this option applies only to all-day appointments.

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 20 pixels in height. If they 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

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

The start hour of the view time scale.

Type:

Number

Default Value: 0

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'

When using the widget as an ASP.NET MVC Control, specify this option using the SchedulerViewType enum. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth and Agenda.