Vue Scheduler - Customize Individual Views

To customize individual views, assign an array of configuration objects to the views property. Each object contains the type property that defines which view is customized. Refer to the API Reference for a list of properties.

The following code defines three views: the first is not customized, the second has a specific cell duration and a custom template for the time scale, and the third is grouped by resources.

jQuery
JavaScript
var data = [{
    text: "Google AdWords Strategy",
    ownerId: [2],
    startDate: new Date("2016-01-01T09:00:00.000Z"),
    endDate: new Date("2016-01-01T10:30:00.000Z")
}, {
    text: "New Brochures",
    ownerId: [1],
    startDate: new Date("2016-01-01T11:30:00.000Z"),
    endDate: new Date("2016-01-01T14:15:00.000Z")
},
// ...
];

var resources = [
    { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
    { text: "John Heart", id: 2, color: "#56ca85" }
];

$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: data,
        currentDate: new Date(2016, 1, 1),
        views: ["month", {
            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 }]
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    currentView="day">
    <dxi-resource
        fieldExpr="ownerId"
        [dataSource]="employees">
    </dxi-resource>
    <dxi-view type="month"></dxi-view>
    <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>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    schedulerData = [{
        text: "Google AdWords Strategy",
        ownerId: [2],
        startDate: new Date("2016-01-01T09:00:00.000Z"),
        endDate: new Date("2016-01-01T10:30:00.000Z")
    }, {
        text: "New Brochures",
        ownerId: [1],
        startDate: new Date("2016-01-01T11:30:00.000Z"),
        endDate: new Date("2016-01-01T14:15:00.000Z")
    },
    // ...
    ];
    currentDate = new Date(2016, 1, 1);
    employees [
        { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
        { text: "John Heart", id: 2, color: "#56ca85" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxScheduler
        :data-source="schedulerData"
        :current-date="currentDate">
        <DxResource
            field-expr="ownerId"
            :data-source="employees"
        />
        <DxView type="month" />
        <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 'devextreme/dist/css/dx.light.css';

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

export default {
    components: {
        DxScheduler,
        DxResource,
        DxView
    },
    data() {
        return {
            schedulerData: [{
                text: "Google AdWords Strategy",
                ownerId: [2],
                startDate: new Date("2016-01-01T09:00:00.000Z"),
                endDate: new Date("2016-01-01T10:30:00.000Z")
            }, {
                text: "New Brochures",
                ownerId: [1],
                startDate: new Date("2016-01-01T11:30:00.000Z"),
                endDate: new Date("2016-01-01T14:15:00.000Z")
            },
            // ...
            ],
            currentDate: new Date(2016, 1, 1),
            employees: [
                { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
                { text: "John Heart", id: 2, color: "#56ca85" }
            ]
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

const schedulerData = [{
    text: 'Google AdWords Strategy',
    ownerId: [2],
    startDate: new Date("2016-01-01T09:00:00.000Z"),
    endDate: new Date("2016-01-01T10:30:00.000Z")
}, {
    text: 'New Brochures',
    ownerId: [1],
    startDate: new Date("2016-01-01T11:30:00.000Z"),
    endDate: new Date("2016-01-01T14:15:00.000Z")
},
// ...
];
const currentDate = new Date(2016, 1, 1);
const employees = [
    { text: 'Samantha Bright', id: 1, color: '#cb6bb2' },
    { text: 'John Heart', id: 2, color: '#56ca85' }
];
const renderTimeCell = (data) => <i style='color: green'>{data.text}</i>;

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={schedulerData}
                defaultCurrentDate={currentDate}>
                <Resource
                    fieldExpr="ownerId"
                    dataSource={employees}
                />
                <View type="month" />
                <View type="day"
                    cellDuration={60}
                    timeCellTemplate={renderTimeCell}
                />
                <View type="workWeek" groups={['ownerId']} />
            </Scheduler>
        );
    }
}
export default App;

Customize Individual Views Demo Increase View Duration Demo

See Also