Vue Scheduler - Timetable
The Scheduler UI component allows you to customize its timetable. You can specify the time period and a single cell's duration via the startDayHour, endDayHour, and cellDuration properties. Using the firstDayOfWeek property, you can define the weekday that is shown first.
- <template>
- <DxScheduler
- :data-source="dataSource"
- :current-date="currentDate"
- :start-day-hour="8"
- :end-day-hour="19"
- :cell-duration="60"
- :first-day-of-week="1"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxScheduler } from 'devextreme-vue/scheduler';
- export default {
- components: {
- DxScheduler
- },
- data() {
- return {
- dataSource: [{
- text: 'Website Re-Design Plan',
- startDate: new Date("2016-04-25T09:30:00.000Z"),
- endDate: new Date("2016-04-25T11:30:00.000Z")
- }, {
- text: 'Book Flights to San Fran for Sales Trip',
- startDate: new Date("2016-04-25T12:00:00.000Z"),
- endDate: new Date("2016-04-25T13:00:00.000Z")
- },
- // ...
- ],
- currentDate: new Date(2016, 4, 25)
- };
- }
- }
- </script>
You can also adjust cells' size in the table and around it using the DevExtreme CSS classes. For example, the .dx-scheduler-cell-sizes-horizontal
and .dx-scheduler-cell-sizes-vertical
classes specify the cells' width and height, respectively. These classes apply if the crossScrollingEnabled property is set to true.
- #yourSchedulerID .dx-scheduler-cell-sizes-horizontal {
- width: 200px;
- }
- #yourSchedulerID .dx-scheduler-cell-sizes-vertical {
- height: 200px;
- }
For a more detailed customization, define custom templates for cells, time scales, and date scales. The following code shows how to define templates for timetable parts:
- <template>
- <DxScheduler
- :data-source="schedulerData"
- :current-date="currentDate"
- :show-all-day-panel="false"
- data-cell-template="dataCellTemplate"
- date-cell-template="dateCellTemplate"
- time-cell-template="timeCellTemplate"
- current-view="week"
- >
- <template #dataCellTemplate>
- <div v-bind:style="styles"></div>
- </template>
- <template #dateCellTemplate="{ data }">
- <b v-bind:style="{ color: 'green' }">{{data.text}}</b>
- </template>
- <template #timeCellTemplate="{ data }">
- <b v-bind:style="{ color: 'green' }">{{data.text}}</b>
- </template>
- </DxScheduler>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxScheduler } from 'devextreme-vue/scheduler';
- export default {
- components: {
- DxScheduler
- },
- data() {
- return {
- currentDate: new Date(2016, 4, 24),
- styles: {
- 'background-color': 'rgba(86, 202, 133, 0.1)',
- width: '100%',
- height: '40px'
- }
- };
- }
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.