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.

App.vue
  • <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.

CSS
  • #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:

App.vue
  • <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>

View Demo

See Also