Vue Scheduler - views

Default Value: 7

allDayPanelMode

Specifies the display mode for the All day panel.

Selector: all-day-panel-mode

Type:

AllDayPanelMode

Default Value: 'all'

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 Data:

Name	Type	Description
appointmentCount	Number	The count of hidden appointments.
isCompact	Boolean	Indicates whether the overflow indicator is compact.

Name

Type

Description

appointmentCount

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;

appointmentTemplate

Specifies a custom template for appointments.

Selector: appointment-template

Type:

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.

Name

Type

Description

appointmentData

The appointment's data object.

targetedAppointmentData

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

Name

Type

Description

appointmentData

The appointment's data object.

targetedAppointmentData

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:

Default Value: 30

dataCellTemplate

Specifies a custom template for table cells.

Selector: data-cell-template

Type:

Template Data:

The current table cell's data.

Default Name: null

NOTE

There is no dataCellTemplate in the agenda view.

dateCellTemplate

Specifies a custom template for date scale items.

Selector: date-cell-template

Type:

Template Data:

The data of the current date scale item.

Default Name: null

NOTE

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

dropDownAppointmentTemplate

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 Data:

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:

Default Value: 24

firstDayOfWeek

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

Selector: first-day-of-week

Type:

FirstDayOfWeek

| undefined

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

DevExtreme Scheduler Group By Date

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.

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:

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

maxAppointmentsPerCell

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

Selector: max-appointments-per-cell

Type:

|

CellAppointmentsLimit

Default Value: 'auto'

name

A custom view name displayed in the view switcher.

Type:

String

| undefined

Default Value: undefined

offset

Specifies the minute offset within the view indicating the starting point of a day.

Type:

Default Value: 0

This property moves the interval between startDayHour and endDayHour. The offset is a multiple of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours). For instance, if the following is true:

The offset is set to 240.
startDayHour is 0 (default).
endDayHour is 24 (default).

Then, the day starts and ends at 04:00 AM instead of 00:00.

You can combine this property with different values of startDayHour, endDayHour, and cellDuration to get the desired result. For example, the following code snippet uses all these properties, and as a result, the day starts at 4:40 AM and ends at 12:00 PM.

jQuery

index.js

$(() => {
    $('#scheduler').dxScheduler({
        // ...
        views: [
            {
                type: 'workWeek',
                offset: -20,
                startDayHour: 5,
                endDayHour: 12,
                cellDuration: 40,
            }
        ]
    });
});

Angular

app.component.html

<dx-scheduler ... >
    <dxi-view ...
        type="workWeek"
        [offset]="-20"
        [startDayHour]="5"
        [endDayHour]="12"
        [cellDuration]="40"
    >
    </dxi-view>
</dx-scheduler>

Vue

App.vue

<template>
    <DxScheduler ... >
        <DxView
            type="workWeek"
            offset="-20"
            start-day-hour="5"
            end-day-hour="12"
            cell-duration="40" 
        />
    </DxScheduler>
</template>

<script>
// ...
</script>

React

App.js

// ...
export default function App() {
    return (
        <Scheduler ... >
            <View
                type="workWeek"
                offset="-20"
                startDayHour="5"
                endDayHour="12"
                cellDuration="40"
            />
        </Scheduler>
    )
}

NOTE

This property has no effect on the agenda view.

resourceCellTemplate

Specifies a custom template for resource headers.

Selector: resource-cell-template

Type:

Template Data:

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.

startDate

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

Selector: start-date

Type:

Date

|

|

String

| undefined

Default Value: undefined

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

startDayHour

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

Selector: start-day-hour

Type:

Default Value: 0

timeCellTemplate

Specifies a custom template for time scale items.

Selector: time-cell-template

Type:

Template Data: