Vue Scheduler - Customize Individual Views

jQuery

To customize an individual view, specify a configuration object in the views[] array. Assign a view type value to the views.type property to define which view is customized. Specify views[] properties to implement your changes.

The following code snippet customizes the "day" and "workWeek" views. This example groups appointments by a resource in the "workWeek" view. For more information about appointment grouping, refer to the following topic: Group Appointments by Resources.

index.js
$(function(){
    $("#schedulerContainer").dxScheduler({
        views: [{
            type: "day",
            cellDuration: 60,
            timeCellTemplate: function(data, index, element) {
                element.text(data.text)
                    .css('color', 'green')
                    .css('font-style', 'italic');
            }
        }, {
            type: "workWeek",
            groups: ["ownerId"]
        }],
        resources: [{ fieldExpr: "ownerId", dataSource: resources }]
    });
});

To add a view without customizations, you can specify ViewType values in the views array:

index.js
$(function(){
    $("#schedulerContainer").dxScheduler({
        views: ["day", "workWeek"],
    });
});
Angular

To customize an individual view, specify a <dxi-view> configuration component. Assign a view type value to the views.type property to define which view is customized. Specify views[] properties to implement your changes.

The following code snippet customizes the "day" and "workWeek" views. This example groups appointments by a resource in the "workWeek" view. For more information about appointment grouping, refer to the following topic: Group Appointments by Resources.

app.component.html
<dx-scheduler ... >
    <dxi-resource
        fieldExpr="ownerId"
        [dataSource]="employees">
    </dxi-resource>
    <dxi-view type="day"
        [cellDuration]="60"
        timeCellTemplate="timeCellTemplate">
    </dxi-view>
    <dxi-view type="workWeek" [groups]="['ownerId']"></dxi-view>
    <div *dxTemplate="let data of 'timeCellTemplate'">
        <i style="color: green">{{data.text}}</i>
    </div>
</dx-scheduler>

To add a view without customizations, specify only the views.type property:

app.component.html
<dx-scheduler ... >
    <dxi-view type="day"></dxi-view>
    <dxi-view type="workWeek"></dxi-view>
</dx-scheduler>
Vue

To customize an individual view, specify a <DxView> configuration component. Assign a view type value to the views.type property to define which view is customized. Specify views[] properties to implement your changes.

The following code snippet customizes the "day" and "workWeek" views. This example groups appointments by a resource in the "workWeek" view. For more information about appointment grouping, refer to the following topic: Group Appointments by Resources.

App.vue
<template>
    <DxScheduler ... >
        <DxResource
            field-expr="ownerId"
            :data-source="employees"
        />
        <DxView type="day"
            :cell-duration="60"
            time-cell-template="time-cell"
        />
        <DxView type="workWeek" :groups="['ownerId']" />
        <template #time-cell="{ data }">
            <i style="color: green">{{data.text}}</i>
        </template>
    </DxScheduler>
</template>

<script>
import { DxScheduler, DxResource, DxView } from 'devextreme-vue/scheduler';
import 'devextreme/dist/css/dx.light.css';

</script>

To add a view without customizations, specify only the views.type property:

App.vue
<template>
    <DxScheduler ... >
        <DxView type="day" />
        <DxView type="workWeek" />
    </DxScheduler>
</template>
React

To customize an individual view, specify a <View> configuration component. Assign a view type value to the views.type property to define which view is customized. Specify views[] properties to implement your changes.

The following code snippet customizes the "day" and "workWeek" views. This example groups appointments by a resource in the "workWeek" view. For more information about appointment grouping, refer to the following topic: Group Appointments by Resources.

App.tsx
import { Scheduler, Resource, View } from 'devextreme-react/scheduler';
import 'devextreme/dist/css/dx.light.css';

function renderTimeCell(data: {text: string}): JSX.Element {
    return (
        <i style="color: green">{data.text}</i>
    );
}

function App() {
    return (
        <Scheduler ... >
            <Resource
                fieldExpr="ownerId"
                dataSource={employees}
            />
            <View type="day"
                cellDuration={60}
                timeCellRender={renderTimeCell}
            />
            <View type="workWeek" groups={['ownerId']} />
        </Scheduler>
    );
}

To add a view without customizations, specify only the views.type property:

App.tsx
function App() {
    return (
        <Scheduler ... >
            <View type="day" />
            <View type="workWeek" />
        </Scheduler>
    );
}
NOTE
Properties defined in the views[] array override their corresponding properties specified in the component configuration. For instance, views.firstDayOfWeek overrides the firstDayOfWeek property.

Customize Individual Views Demo Increase View Duration Demo

See Also