JavaScript/jQuery 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.
$(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:
$(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.
<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:
<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.
<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:
<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.
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:
function App() {
return (
<Scheduler ... >
<View type="day" />
<View type="workWeek" />
</Scheduler>
);
}Customize Individual Views Demo Increase View Duration Demo