DevExtreme v26.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue Scheduler - Individual Views Customization

To customize a view, configure its settings in an object inside the views[] array. You should specify the view's type and other properties to override global view settings.

This demo customizes two views - Week and Work Week - in the following manner:

Day and Month views use default settings.

Backend API
<template> <DxScheduler time-zone="America/Los_Angeles" :data-source="dataSource" :current-date="currentDate" :start-day-hour="7" :end-day-hour="23" :show-all-day-panel="false" height="730" current-view="workWeek" > <DxView type="day" /> <DxView :groups="typeGroups" type="week" date-cell-template="dateCellSlot" /> <DxView :groups="priorityGroups" :start-day-hour="9" :end-day-hour="18" type="workWeek" date-cell-template="dateCellSlot" /> <DxView type="month" /> <DxResource :data-source="priorityData" :allow-multiple="false" field-expr="priorityId" label="Priority" icon="tags" /> <DxResource :data-source="typeData" :allow-multiple="false" field-expr="typeId" label="Type" /> <DxEditing> <DxSchedulerForm> <DxItem name="mainGroup"> <DxItem name="subjectGroup"/> <DxItem name="dateGroup"/> <DxItem name="repeatGroup"/> <DxItem name="resourcesGroup"> <DxItem :col-count="3" :col-count-by-screen="{ xs: 3 }" name="priorityIdGroup" > <DxItem name="priorityIdIcon"/> <DxItem name="priorityIdEditor"/> <DxItem name="typeIdEditor"/> </DxItem> </DxItem> <DxItem name="descriptionGroup"/> </DxItem> <DxItem name="recurrenceGroup"/> </DxSchedulerForm> </DxEditing> <template #dateCellSlot="{ data: dateCell }"> <DateCell :cell-data="dateCell"/> </template> </DxScheduler> </template> <script setup lang="ts"> import DxScheduler, { DxResource, DxView, DxEditing, DxForm as DxSchedulerForm, } from 'devextreme-vue/scheduler'; import { DxItem } from 'devextreme-vue/form'; import DateCell from './DateCell.vue'; import { data, priorityData, typeData } from './data.ts'; const dataSource = data; const typeGroups = ['typeId']; const priorityGroups = ['priorityId']; const currentDate = new Date(2021, 3, 27); </script> <style> .dx-scheduler-work-space-week .dx-scheduler-header-panel-cell, .dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell { text-align: center; vertical-align: middle; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .name { font-size: 13px; line-height: 15px; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .number { font-size: 15px; line-height: 15px; } </style>
<template> <div> <div class="name">{{ dayOfWeekNames[cellData.date.getDay()] }}</div> <div class="number"> {{ cellData.date.getDate() }}</div> </div> </template> <script setup lang="ts"> withDefaults(defineProps<{ cellData?: any, }>(), { cellData: () => {}, }); const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; </script>
export const data = [{ text: 'Walking a dog', priorityId: 1, typeId: 1, startDate: new Date('2021-04-26T15:00:00.000Z'), endDate: new Date('2021-04-26T15:30:00.000Z'), recurrenceRule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502', }, { text: 'Website Re-Design Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-26T16:00:00.000Z'), endDate: new Date('2021-04-26T18:30:00.000Z'), }, { text: 'Book Flights to San Fran for Sales Trip', priorityId: 2, typeId: 2, startDate: new Date('2021-04-26T19:00:00.000Z'), endDate: new Date('2021-04-26T20:00:00.000Z'), }, { text: 'Install New Router in Dev Room', priorityId: 1, typeId: 2, startDate: new Date('2021-04-26T21:30:00.000Z'), endDate: new Date('2021-04-26T22:30:00.000Z'), }, { text: 'Go Grocery Shopping', priorityId: 1, typeId: 1, startDate: new Date('2021-04-27T01:30:00.000Z'), endDate: new Date('2021-04-27T02:30:00.000Z'), recurrenceRule: 'FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502', }, { text: 'Approve Personal Computer Upgrade Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T17:00:00.000Z'), endDate: new Date('2021-04-27T18:00:00.000Z'), }, { text: 'Final Budget Review', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T19:00:00.000Z'), endDate: new Date('2021-04-27T20:35:00.000Z'), }, { text: 'New Brochures', priorityId: 2, typeId: 2, startDate: new Date('2021-04-27T21:30:00.000Z'), endDate: new Date('2021-04-27T22:45:00.000Z'), }, { text: 'Install New Database', priorityId: 1, typeId: 2, startDate: new Date('2021-04-28T16:45:00.000Z'), endDate: new Date('2021-04-28T18:15:00.000Z'), }, { text: 'Approve New Online Marketing Strategy', priorityId: 2, typeId: 2, startDate: new Date('2021-04-28T19:00:00.000Z'), endDate: new Date('2021-04-28T21:00:00.000Z'), }, { text: 'Upgrade Personal Computers', priorityId: 1, typeId: 2, startDate: new Date('2021-04-28T22:15:00.000Z'), endDate: new Date('2021-04-28T23:30:00.000Z'), }, { text: 'Prepare 2021 Marketing Plan', priorityId: 2, typeId: 2, startDate: new Date('2021-04-29T18:00:00.000Z'), endDate: new Date('2021-04-29T20:30:00.000Z'), }, { text: 'Brochure Design Review', priorityId: 1, typeId: 2, startDate: new Date('2021-04-29T21:00:00.000Z'), endDate: new Date('2021-04-29T22:30:00.000Z'), }, { text: 'Create Icons for Website', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T17:00:00.000Z'), endDate: new Date('2021-04-30T18:30:00.000Z'), }, { text: 'Upgrade Server Hardware', priorityId: 1, typeId: 2, startDate: new Date('2021-04-30T21:30:00.000Z'), endDate: new Date('2021-04-30T23:00:00.000Z'), }, { text: 'Submit New Website Design', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T23:30:00.000Z'), endDate: new Date('2021-05-01T01:00:00.000Z'), }, { text: 'Launch New Website', priorityId: 2, typeId: 2, startDate: new Date('2021-04-30T19:20:00.000Z'), endDate: new Date('2021-04-30T21:00:00.000Z'), }, { text: 'Visiting a Doctor', priorityId: 2, typeId: 1, startDate: new Date('2021-05-01T17:00:00.000Z'), endDate: new Date('2021-05-01T20:30:00.000Z'), }, ]; export const priorityData = [{ text: 'Low Priority', id: 1, color: '#fcb65e', }, { text: 'High Priority', id: 2, color: '#e18e92', }, ]; export const typeData = [{ text: 'Home', id: 1, color: '#b6d623', }, { text: 'Work', id: 2, color: '#679ec5', }, ];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>