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.
$(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
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.