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 customize. Properties set for an individual view override their corresponding component configuration properties.

  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'
  ]

  For more information about how to customize an individual view, refer to the following topic: Customize Individual Views.

To specify the current view, configure the currentView property.

View Demo View on GitHub

View Demo

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.

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

    });
});

<dx-scheduler ... >
    <dxi-scheduler-view type="week" allDayPanelMode="all" name="Week">
    </dxi-scheduler-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 { }

<template>
    <DxScheduler ...>
        <DxView
            type="week"
            name="Week"
            all-day-panel-mode="all"
        />
    </DxScheduler>
</template>

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

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

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.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;

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            // ...
            appointmentCollectorTemplate: function(data, $indicatorElement) {
                $indicatorElement.append(
                    // Custom jQuery elements go here
                )
                // ===== or =====
                return /* your markup goes here */
            }
        },
        // ...
        ]
    });
});

<dx-scheduler ... >
    <dxi-scheduler-view ...
        appointmentCollectorTemplate="myTemplate">
    </dxi-scheduler-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 { }

<template>
    <DxScheduler ... >
        <DxView ...
            appointment-collector-template="myTemplate"
        />
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
    </DxScheduler>
</template>

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

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

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.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

• appointmentCollectorTemplate

View Demo

See Also

• Customize Individual Views
• Customize Appointment
• Custom Templates

View Demo

See Also

• appointmentTooltipTemplate
• Customize Individual Views
• Customize Appointment Tooltip
• Custom Templates

View Demo

View Demo

See Also

• Customize Individual Views
• Timetable

Configure dateCellTemplate to customize the date scale. To customize the time scale, use timeCellTemplate.

The itemData parameter of dateCellTemplate includes the following fields:

• date: The cell's date.
• groupIndex: The index of the group that contains the cell. Use this field to determine the cell's location among displayed Scheduler groups.
• groups: An object that contains key-value pairs of the cell's groups. Use this object to determine the cell's location in each group.
• text: The cell's text.

View Demo

See Also

• timeCellTemplate
• Customize Individual Views
• Timetable

View Demo

View Demo

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

• Group Appointments by Resources

View Demo

See Also

• Scheduler - Group Appointments by Resources

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

• agendaDuration

View Demo

View Demo

This property shifts the interval between startDayHour and endDayHour. The offset value can be between -1440 (24 hours back) and 1440 (24 hours forward).

You can implement offset along with different startDayHour, endDayHour, and cellDuration combinations to customize the view. The following code snippet integrates these properties to configure days from 4:40 AM to 11:40 AM and a 40-minute cell duration:

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

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

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

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

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

View Demo

See Also

• Customize Individual Views
• Customize Resource Headers

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

• scrollTo(date, group, allDay)

The Scheduler can snap appointments to the grid. When snapToCellsMode is set to "always" or "auto", the component only increases appointment dimensions.

The following snapToCellsMode values are available:

• "always": Scheduler snaps all appointments to the grid.
• "auto": Only appointments that occupy two or fewer cells are snapped to the grid.
• "never": Scheduler does not snap appointments to the grid.

The default snapToCellsMode value varies by view:

• snapToCellsMode does not affect appointment resizing.
• This property overrides snapToCellsMode defined at the component level.
• The "agenda" view ignores this property.

[/note]

See Also

• cellDuration

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

View Demo

View Demo

Configure timeCellTemplate to customize the time scale. To customize the date scale, use dateCellTemplate.

The itemData parameter of timeCellTemplate includes the following fields:

• date: The cell's date.
• groupIndex: The index of the group that contains the cell. Use this field to determine the cell's location among displayed Scheduler groups.
• groups: An object that contains key-value pairs of the cell's groups. Use this object to determine the cell's location in each group.
• text: The cell's text.

See Also

• dateCellTemplate
• Customize Individual Views
• Timetable

Basic Views Demo Timelines Demo Agenda Demo