Vue Scheduler - views

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

Selector: DxView
Type:

Array<String | Object>

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

This property 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 property to specify the view to which the configuration should apply. This documentation section describes available properties. The properties set for an individual view have a higher priority than the same properties set on the root level for all views.

    JavaScript
    views: [{
            type: 'workWeek',
            name: 'Vertical Grouping',
            groupOrientation: 'vertical',
            cellDuration: 60,
            intervalCount: 2,
        }, {
            type: 'workWeek',
            name: 'Horizontal Grouping',
            groupOrientation: 'horizontal',
            cellDuration: 30,
            intervalCount: 2,
        },
        'agenda'
    ]

To specify the default view, use the currentView property.

View Demo View on GitHub

agendaDuration

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

Selector: agenda-duration
Type:

Number

Default Value: 7

allDayPanelMode

Specifies the display mode for the All day panel.

Selector: all-day-panel-mode
Default Value: 'all'

View Demo

allDayPanelMode set to 'all'

To hide the All day panel, set this property to hidden.

If you set the allDayPanelMode property to allDay, the All day panel displays only the appointments whose allDay property is set to true.

To also display appointments that have a duration equal to or more than 24 hours, assign all to this property.

jQuery
index.js
$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            type: 'week',
            name: 'Week',
            allDayPanelMode: 'all',
        }, 
        // ...
        ],            

    });
});
Angular
app.component.html
app.module.ts
<dx-scheduler ... >
    <dxi-view type="week" allDayPanelMode="all" name="Week">
    </dxi-view>
</dx-scheduler>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxScheduler ...>
        <DxView
            type="week"
            name="Week"
            all-day-panel-mode="all"
        />
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Scheduler } from 'devextreme-react/scheduler';

class App extends React.Component {
    render() {
        return (
            <Scheduler ...>
                <View
                    type="week"
                    name="Week"
                    allDayPanelMode="all"
                />                    
            </Scheduler>
        );
    }
}

export default App;

appointmentCollectorTemplate

Specifies a custom template for cell overflow indicators in this view.

Selector: appointment-collector-template
Type:

template

Template Data:
Name Type Description
appointmentCount

Number

The count of hidden appointments.

isCompact

Boolean

Indicates whether the overflow indicator is compact.

Default Name: 'appointmentCollector'

jQuery
index.js
$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            // ...
            appointmentCollectorTemplate: function(data, $indicatorElement) {
                $indicatorElement.append(
                    // Custom jQuery elements go here
                )
                // ===== or =====
                return /* your markup goes here */
            }
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<dx-scheduler ... >
    <dxi-view ...
        appointmentCollectorTemplate="myTemplate">
    </dxi-view>
    <div *dxTemplate="let data of 'myTemplate'">
        <!-- your markup goes here -->
    </div>
</dx-scheduler>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxScheduler ... >
        <DxView ...
            appointment-collector-template="myTemplate"
        />
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler, DxView } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Scheduler, View } from 'devextreme-react/scheduler';

const renderCellOverflowIndicator = (data) => {
    return (
        {/* your markup goes here */}
    );
}

class App extends React.Component {
    render() {
        return (
            <Scheduler ... >
                <View ...
                    appointmentCollectorRender={renderCellOverflowIndicator}
                />
            </Scheduler>
        );
    }
}

export default App;
See Also

appointmentTemplate

Specifies a custom template for appointments.

Selector: appointment-template
Type:

template

Template Data:
Name Type Description
appointmentData

dxSchedulerAppointment

The appointment's data object.

targetedAppointmentData

dxSchedulerAppointment

The appointment's data object.
The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Name: 'item'

appointmentTooltipTemplate

Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator in this view.

Selector: appointment-tooltip-template
Type:

template

Template Data:
Name Type Description
appointmentData

dxSchedulerAppointment

The appointment's data object.

targetedAppointmentData

dxSchedulerAppointment

The clicked appointment's data object.

isButtonClicked

Boolean

Specifies whether you click a button or an appointment element.

Default Name: 'appointmentTooltip'

cellDuration

The cell duration in minutes.

Selector: cell-duration
Type:

Number

Default Value: 30

dataCellTemplate

Specifies a custom template for table cells.

Selector: data-cell-template
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.

Selector: date-cell-template
Type:

template

Template Data:

Object

The data of the current date scale item.

Default Name: null

View Demo

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

dropDownAppointmentTemplate Deprecated

Use the appointmentTooltipTemplate property instead.

Specifies a custom template for tooltips displayed when users click a cell overflow indicator in this view.

Selector: drop-down-appointment-template
Type:

template

Template Data:

Object

The appointment's object.

Default Name: 'dropDownAppointment'

endDayHour

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

Selector: end-day-hour
Type:

Number

Default Value: 24

firstDayOfWeek

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

Selector: first-day-of-week
Default Value: undefined

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".

Selector: group-by-date
Type:

Boolean

Default Value: false

groupOrientation

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

Selector: group-orientation
Type:

Orientation

This property'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: []

intervalCount

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

Selector: interval-count
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".

Selector: max-appointments-per-cell
Default Value: 'auto'

name

A custom view name displayed in the view switcher.

Type:

String

Default Value: undefined

resourceCellTemplate

Specifies a custom template for resource headers.

Selector: resource-cell-template
Type:

template

Template Data:

Object

The current resource header's data.

Default Name: null

scrolling

Configures scrolling for a view.

Selector: DxScrolling
Type: dxSchedulerScrolling

Scrolling allows a user to browse data outside the current viewport. Information about the available scrolling modes is in the mode property description.

View Demo

See Also

startDate

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

Selector: start-date
Type:

Date

|

Number

|

String

Default Value: undefined

If this property 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.

Selector: start-day-hour
Type:

Number

Default Value: 0

timeCellTemplate

Specifies a custom template for time scale items.

Selector: time-cell-template
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 type of the view.

Type:

ViewType

Default Value: undefined