DevExtreme v25.2 is now available.

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

Your search did not match any results.

Vue Scheduler - Edit Form and Templates

You can double-click a DevExtreme Scheduler appointment or an empty cell to activate our built in edit form. Our Scheduler allows you to customize the form as needs dictate (rearrange items, create custom fields, and specify popup settings).

The form includes two groups: mainGroup (general information) and recurrenceGroup (recurrence settings). Scheduler displays mainGroup first and switches to recurrenceGroup when users change the "Repeat" drop-down. Configure editing.form to customize form layout and editing.popup to customize the dialog window. This demo configures these objects to add custom fields (movieId and price) to the edit form.

For additional information, refer to the following help topic: Appointment Edit Form.

www.wikipedia.org
Backend API
<template> <div> <DxScheduler time-zone="America/Los_Angeles" :data-source="dataSource" :views="views" :current-date="currentDate" :height="600" :groups="groups" :first-day-of-week="0" :start-day-hour="9" :end-day-hour="23" :show-all-day-panel="false" :cross-scrolling-enabled="true" :cell-duration="20" :on-content-ready="onContentReady" appointment-template="AppointmentTemplateSlot" appointment-tooltip-template="AppointmentTooltipTemplateSlot" current-view="day" > <DxEditing :allow-adding="false" :popup="popupOptions" > <DxSchedulerForm :on-initialized="onFormInitialized"> <DxItem template="movie-info-form-template"/> <DxItem :col-count="2" :col-count-by-screen="colCountByScreen" item-type="group" > <DxItem :col-span="1" :editor-options="movieEditorOptions" data-field="movieId" editor-type="dxSelectBox" > <DxLabel>Movie</DxLabel> </DxItem> <DxItem :col-span="1" :editor-options="priceEditorOptions" data-field="price" editor-type="dxSelectBox" > <DxLabel>Price</DxLabel> </DxItem> </DxItem> <DxItem name="startDateGroup"/> <DxItem :disabled="true" name="endDateGroup" /> </DxSchedulerForm> </DxEditing> <template #movie-info-form-template> <MovieInfoContainer :movie="currentMovie"/> </template> <DxResource :use-color-as-default="true" :data-source="moviesData" field-expr="movieId" /> <DxResource :data-source="theatreData" field-expr="theatreId" /> <template #AppointmentTemplateSlot="{ data }"> <AppointmentTemplate :scheduler="scheduler" :template-model="data" /> </template> <template #AppointmentTooltipTemplateSlot="{ data }"> <AppointmentTooltipTemplate :scheduler="scheduler" :template-tooltip-model="data" /> </template> </DxScheduler> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxScheduler, { DxResource, DxEditing, DxLabel, DxItem, DxForm as DxSchedulerForm, type DxSchedulerTypes, } from 'devextreme-vue/scheduler'; import type { DxFormTypes } from 'devextreme-vue/form'; import type { DxSelectBoxTypes } from 'devextreme-vue/select-box'; import type { DxPopupTypes } from 'devextreme-vue/popup'; import { query } from 'devextreme-vue/common/data'; import type { MovieResource } from './data.ts'; import AppointmentTemplate from './AppointmentTemplate.vue'; import AppointmentTooltipTemplate from './AppointmentTooltipTemplate.vue'; import MovieInfoContainer from './MovieInfoContainer.vue'; import { data, moviesData, theatreData } from './data.ts'; type dxForm = NonNullable<DxFormTypes.InitializedEvent['component']>; const views = ['day', 'week', 'timelineDay']; const groups = ['theatreId']; const scheduler = ref<DxScheduler['instance']>(); const currentDate = new Date(2025, 3, 27); const dataSource = data; const currentMovie = ref<MovieResource | null>(null); const formInstance = ref<dxForm | null>(null); const onContentReady = (e: DxSchedulerTypes.ContentReadyEvent) => { scheduler.value = e.component; }; const getMovieById = (id: number | undefined): MovieResource | null => id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null; const getEditorStylingMode = (): 'filled' | 'outlined' => { const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material'); return isMaterialOrFluent ? 'filled' : 'outlined'; }; const priceDisplayExpr = (value: number): string => `$${value}`; const colCountByScreen = { xs: 2 }; const onPopupOptionChanged = (e: DxPopupTypes.OptionChangedEvent): void => { if (e.fullName === 'toolbarItems' && e.value) { e.value.forEach((item: any, index: number) => { if (item.shortcut === 'done' || item.shortcut === 'cancel') { e.component.option(`toolbarItems[${index}].toolbar`, 'bottom'); } }); } }; const popupOptions = { maxWidth: 440, onOptionChanged: onPopupOptionChanged, }; const updateEndDate = (movie: MovieResource): void => { const form = formInstance.value!; const formData = form.option('formData'); const { startDate } = formData; if (startDate) { const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); form.updateData('endDate', newEndDate); } }; const onFormInitialized = (e: DxFormTypes.InitializedEvent): void => { const form = e.component!; const formData = form.option('formData'); formInstance.value = form; currentMovie.value = formData?.movieId ? getMovieById(formData.movieId) : null; form.on('fieldDataChanged', (fieldEvent: DxFormTypes.FieldDataChangedEvent) => { if (fieldEvent.dataField === 'startDate') { const movie = getMovieById(form.option('formData').movieId); if (movie) { updateEndDate(movie); } } }); }; const onMovieValueChanged = (e: DxSelectBoxTypes.ValueChangedEvent): void => { const form = formInstance.value!; const movie = getMovieById(e.value); currentMovie.value = movie; if (movie) { form.updateData('director', movie.director); updateEndDate(movie); } }; const onCustomEditorContentReady = (e: DxSelectBoxTypes.ContentReadyEvent): void => { e.component.option('stylingMode', getEditorStylingMode()); }; const movieEditorOptions = { items: moviesData, displayExpr: 'text', valueExpr: 'id', stylingMode: getEditorStylingMode(), onValueChanged: onMovieValueChanged, onContentReady: onCustomEditorContentReady, }; const priceEditorOptions = { items: [5, 10, 15, 20], displayExpr: priceDisplayExpr, stylingMode: getEditorStylingMode(), onContentReady: onCustomEditorContentReady, }; </script>
<template> <div class="movie-preview"> <div class="movie-preview-image"> <img :src="movieData.image" :alt="movieData.text" > </div> <div class="movie-details"> <div class="title">{{ movieData.text }}</div> <div> Ticket Price: <strong>${{ templateModel.targetedAppointmentData?.price }}</strong> </div> <div> {{ getFormatDate(templateModel.targetedAppointmentData?.displayStartDate) }} - {{ getFormatDate(templateModel.targetedAppointmentData?.displayEndDate) }} </div> </div> </div> </template> <script setup lang="ts"> import { formatDate } from 'devextreme-vue/common/core/localization'; import { query as Query } from 'devextreme-vue/common/data'; import DxScheduler, { type DxSchedulerTypes } from 'devextreme-vue/scheduler'; import { moviesData } from './data.ts'; const props = defineProps<{ scheduler: DxScheduler['instance']; templateModel: DxSchedulerTypes.AppointmentTemplateData; }>(); function getFormatDate(value: Date) { return formatDate(value, 'shortTime'); } const getMovieById = function (resourceId: string) { return Query(moviesData) .filter(['id', resourceId]) .toArray()[0]; }; const movieData = getMovieById(props.templateModel.targetedAppointmentData?.movieId); </script>
<template> <div class="movie-info"> <div class="movie-preview-image"> <img :src="movieData.image" :alt="movieData.text" > </div> <div class="movie-details"> <div class="title"> {{ movieData.text }} ({{ movieData.year }}) </div> <div> Director: {{ movieData.director }} </div> <div> Duration: {{ movieData.duration }} minutes </div> </div> </div> </template> <script setup lang="ts"> import { query as Query } from 'devextreme-vue/common/data'; import DxScheduler, { type DxSchedulerTypes } from 'devextreme-vue/scheduler'; import { moviesData } from './data.ts'; const props = defineProps<{ scheduler?: DxScheduler['instance'] templateTooltipModel?: DxSchedulerTypes.AppointmentTooltipTemplateData }>(); const getMovieById = function (resourceId: string) { return Query(moviesData) .filter(['id', resourceId]) .toArray()[0]; }; const movieData = getMovieById(props.templateTooltipModel?.appointmentData.movieId); </script>
<template> <div class="movie-info-container"> <div v-if="movie" class="movie-info" > <div class="movie-preview-image"> <img :src="movie.image" :alt="movie.text" > </div> <div class="movie-details"> <div class="title">{{ movie.text }} ({{ movie.year }})</div> <div>Director: {{ movie.director }}</div> <div>Duration: {{ movie.duration }} minutes</div> </div> </div> <div v-else class="movie-info" > <div class="movie-preview-image"/> <div class="movie-details"> <div class="title">Select a movie</div> </div> </div> </div> </template> <script setup lang="ts"> import type { MovieResource } from './data'; defineProps<{ movie: MovieResource | null | undefined; }>(); </script>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'project:': '../../../../', 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, map: { 'vue': 'npm:vue@3.4.27/dist/vue.esm-browser.js', '@vue/shared': 'npm:@vue/shared@3.4.27/dist/shared.cjs.prod.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.2/index.js', 'demo-ts-loader': 'project:utils/demo-ts-loader.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'svg-loader': 'project:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign', 'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs', 'devextreme-vue': 'npm:devextreme-vue@link:../../packages/devextreme-vue/npm/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js', 'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', '@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme-vue/common': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; window.process = { env: { NODE_ENV: 'production', }, }; System.config(window.config); // eslint-disable-next-line const useTgzInCSB = ['openai'];
export interface MovieResource { id: number; text: string; director: string; year: number; image: string; duration: number; color: string; } export const moviesData: MovieResource[] = [{ id: 1, text: 'His Girl Friday', director: 'Howard Hawks', year: 1940, image: '../../../../images/movies/HisGirlFriday.jpg', duration: 92, color: '#9FD89F', }, { id: 2, text: 'Royal Wedding', director: 'Stanley Donen', year: 1951, image: '../../../../images/movies/RoyalWedding.jpg', duration: 93, color: '#F1BBBC', }, { id: 3, text: 'A Star Is Born', director: 'William A. Wellman', year: 1937, image: '../../../../images/movies/AStartIsBorn.jpg', duration: 111, color: '#F9E2AE', }, { id: 4, text: 'The Screaming Skull', director: 'Alex Nicol', year: 1958, image: '../../../../images/movies/ScreamingSkull.jpg', duration: 68, color: '#EDBBE7', }, { id: 5, text: "It's a Wonderful Life", director: 'Frank Capra', year: 1946, image: '../../../../images/movies/ItsAWonderfulLife.jpg', duration: 130, color: '#B4D6FA', }, { id: 6, text: 'City Lights', director: 'Charlie Chaplin', year: 1931, image: '../../../../images/movies/CityLights.jpg', duration: 87, color: '#C6B1DE', }]; export const theatreData = [{ text: 'Cinema Hall 1', id: 0, }, { text: 'Cinema Hall 2', id: 1, }]; export const data = [{ theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-04-26T16:10:00.000Z'), endDate: new Date('2025-04-26T18:01:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-04-26T18:30:00.000Z'), endDate: new Date('2025-04-26T20:02:00.000Z'), }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2025-04-26T20:30:00.000Z'), endDate: new Date('2025-04-26T22:21:00.000Z'), }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2025-04-26T23:00:00.000Z'), endDate: new Date('2025-04-27T00:08:00.000Z'), }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2025-04-27T00:30:00.000Z'), endDate: new Date('2025-04-27T02:03:00.000Z'), }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2025-04-27T02:30:00.000Z'), endDate: new Date('2025-04-27T04:02:00.000Z'), }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2025-04-27T04:20:00.000Z'), endDate: new Date('2025-04-27T05:53:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-04-27T16:10:00.000Z'), endDate: new Date('2025-04-27T18:20:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-04-27T19:00:00.000Z'), endDate: new Date('2025-04-27T20:33:00.000Z'), }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date('2025-04-27T21:00:00.000Z'), endDate: new Date('2025-04-27T22:51:00.000Z'), }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2025-04-27T23:20:00.000Z'), endDate: new Date('2025-04-28T00:28:00.000Z'), }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2025-04-28T01:00:00.000Z'), endDate: new Date('2025-04-28T02:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 15, startDate: new Date('2025-04-28T03:00:00.000Z'), endDate: new Date('2025-04-28T04:33:00.000Z'), }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2025-04-28T04:50:00.000Z'), endDate: new Date('2025-04-28T05:58:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-04-28T16:00:00.000Z'), endDate: new Date('2025-04-28T17:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-04-28T18:00:00.000Z'), endDate: new Date('2025-04-28T19:33:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-04-28T20:20:00.000Z'), endDate: new Date('2025-04-28T22:11:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-04-28T22:45:00.000Z'), endDate: new Date('2025-04-29T00:55:00.000Z'), }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2025-04-29T01:20:00.000Z'), endDate: new Date('2025-04-29T02:28:00.000Z'), }, { theatreId: 0, movieId: 5, price: 20, startDate: new Date('2025-04-29T03:00:00.000Z'), endDate: new Date('2025-04-29T05:10:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-04-29T16:00:00.000Z'), endDate: new Date('2025-04-29T17:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-04-29T18:00:00.000Z'), endDate: new Date('2025-04-29T19:33:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-04-29T20:20:00.000Z'), endDate: new Date('2025-04-29T22:11:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-04-29T22:45:00.000Z'), endDate: new Date('2025-04-30T00:55:00.000Z'), }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2025-04-30T01:20:00.000Z'), endDate: new Date('2025-04-30T02:28:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-04-30T03:00:00.000Z'), endDate: new Date('2025-04-30T05:10:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-04-30T16:30:00.000Z'), endDate: new Date('2025-04-30T18:03:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-04-30T18:30:00.000Z'), endDate: new Date('2025-04-30T20:02:00.000Z'), }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date('2025-04-30T20:30:00.000Z'), endDate: new Date('2025-04-30T22:21:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-04-30T23:00:00.000Z'), endDate: new Date('2025-05-01T01:10:00.000Z'), }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2025-05-01T01:30:00.000Z'), endDate: new Date('2025-05-01T02:38:00.000Z'), }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2025-05-01T03:20:00.000Z'), endDate: new Date('2025-05-01T05:11:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-01T16:30:00.000Z'), endDate: new Date('2025-05-01T18:03:00.000Z'), }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2025-05-01T18:30:00.000Z'), endDate: new Date('2025-05-01T20:02:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-01T20:30:00.000Z'), endDate: new Date('2025-05-01T22:21:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-05-01T23:00:00.000Z'), endDate: new Date('2025-05-02T01:10:00.000Z'), }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2025-05-02T01:30:00.000Z'), endDate: new Date('2025-05-02T02:38:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-02T03:20:00.000Z'), endDate: new Date('2025-05-02T05:11:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-02T16:30:00.000Z'), endDate: new Date('2025-05-02T18:03:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-02T18:30:00.000Z'), endDate: new Date('2025-05-02T20:02:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-02T20:30:00.000Z'), endDate: new Date('2025-05-02T22:21:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-05-02T23:00:00.000Z'), endDate: new Date('2025-05-03T01:10:00.000Z'), }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2025-05-03T01:30:00.000Z'), endDate: new Date('2025-05-03T02:38:00.000Z'), }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2025-05-03T03:20:00.000Z'), endDate: new Date('2025-05-03T05:11:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-03T16:30:00.000Z'), endDate: new Date('2025-05-03T18:03:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-03T18:30:00.000Z'), endDate: new Date('2025-05-03T19:57:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-03T20:20:00.000Z'), endDate: new Date('2025-05-03T22:11:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-03T23:00:00.000Z'), endDate: new Date('2025-05-04T00:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2025-05-04T01:00:00.000Z'), endDate: new Date('2025-05-04T02:33:00.000Z'), }, { theatreId: 0, movieId: 6, price: 20, startDate: new Date('2025-05-04T03:00:00.000Z'), endDate: new Date('2025-05-04T04:27:00.000Z'), }, { theatreId: 0, movieId: 4, price: 15, startDate: new Date('2025-05-04T04:50:00.000Z'), endDate: new Date('2025-05-04T05:58:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-04T16:30:00.000Z'), endDate: new Date('2025-05-04T18:02:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-04T18:30:00.000Z'), endDate: new Date('2025-05-04T20:03:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-04T20:30:00.000Z'), endDate: new Date('2025-05-04T22:21:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-04T22:30:00.000Z'), endDate: new Date('2025-05-05T00:21:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-05T00:30:00.000Z'), endDate: new Date('2025-05-05T01:57:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-05-05T03:00:00.000Z'), endDate: new Date('2025-05-05T05:10:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-05T16:00:00.000Z'), endDate: new Date('2025-05-05T17:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-05T18:00:00.000Z'), endDate: new Date('2025-05-05T19:33:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-05T20:00:00.000Z'), endDate: new Date('2025-05-05T21:51:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-05T22:30:00.000Z'), endDate: new Date('2025-05-06T00:21:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-06T00:30:00.000Z'), endDate: new Date('2025-05-06T01:57:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-05-06T03:00:00.000Z'), endDate: new Date('2025-05-06T05:10:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-06T16:00:00.000Z'), endDate: new Date('2025-05-06T17:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-06T18:00:00.000Z'), endDate: new Date('2025-05-06T19:33:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-06T20:00:00.000Z'), endDate: new Date('2025-05-06T21:51:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-06T22:30:00.000Z'), endDate: new Date('2025-05-07T00:21:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-07T00:30:00.000Z'), endDate: new Date('2025-05-07T01:57:00.000Z'), }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2025-05-07T03:00:00.000Z'), endDate: new Date('2025-05-07T05:10:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-07T16:00:00.000Z'), endDate: new Date('2025-05-07T17:33:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-07T18:00:00.000Z'), endDate: new Date('2025-05-07T19:32:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-07T20:00:00.000Z'), endDate: new Date('2025-05-07T21:51:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-05-07T22:30:00.000Z'), endDate: new Date('2025-05-08T00:40:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-08T01:00:00.000Z'), endDate: new Date('2025-05-08T02:27:00.000Z'), }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2025-05-08T03:00:00.000Z'), endDate: new Date('2025-05-08T04:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-08T16:00:00.000Z'), endDate: new Date('2025-05-08T17:33:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-08T18:00:00.000Z'), endDate: new Date('2025-05-08T19:32:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-08T20:00:00.000Z'), endDate: new Date('2025-05-08T21:51:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-05-08T22:30:00.000Z'), endDate: new Date('2025-05-09T00:40:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-09T01:00:00.000Z'), endDate: new Date('2025-05-09T02:27:00.000Z'), }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2025-05-09T03:00:00.000Z'), endDate: new Date('2025-05-09T04:32:00.000Z'), }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2025-05-09T16:00:00.000Z'), endDate: new Date('2025-05-09T17:33:00.000Z'), }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2025-05-09T18:00:00.000Z'), endDate: new Date('2025-05-09T19:32:00.000Z'), }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2025-05-09T20:00:00.000Z'), endDate: new Date('2025-05-09T21:51:00.000Z'), }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2025-05-09T22:30:00.000Z'), endDate: new Date('2025-05-10T00:40:00.000Z'), }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2025-05-10T01:00:00.000Z'), endDate: new Date('2025-05-10T02:27:00.000Z'), }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2025-05-10T03:00:00.000Z'), endDate: new Date('2025-05-10T04:32:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-04-26T16:10:00.000Z'), endDate: new Date('2025-04-26T18:01:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-04-26T19:00:00.000Z'), endDate: new Date('2025-04-26T20:32:00.000Z'), }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date('2025-04-26T21:00:00.000Z'), endDate: new Date('2025-04-26T22:51:00.000Z'), }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2025-04-26T23:10:00.000Z'), endDate: new Date('2025-04-27T00:18:00.000Z'), }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2025-04-27T00:30:00.000Z'), endDate: new Date('2025-04-27T02:03:00.000Z'), }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2025-04-27T02:30:00.000Z'), endDate: new Date('2025-04-27T04:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2025-04-27T04:20:00.000Z'), endDate: new Date('2025-04-27T05:53:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-04-27T16:30:00.000Z'), endDate: new Date('2025-04-27T18:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-04-27T18:30:00.000Z'), endDate: new Date('2025-04-27T20:03:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-04-27T20:30:00.000Z'), endDate: new Date('2025-04-27T22:40:00.000Z'), }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2025-04-27T23:00:00.000Z'), endDate: new Date('2025-04-28T00:08:00.000Z'), }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2025-04-28T00:30:00.000Z'), endDate: new Date('2025-04-28T02:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2025-04-28T02:40:00.000Z'), endDate: new Date('2025-04-28T04:13:00.000Z'), }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2025-04-28T04:40:00.000Z'), endDate: new Date('2025-04-28T05:48:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-04-28T16:30:00.000Z'), endDate: new Date('2025-04-28T18:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-04-28T18:30:00.000Z'), endDate: new Date('2025-04-28T20:03:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-04-28T20:30:00.000Z'), endDate: new Date('2025-04-28T22:41:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-04-28T23:00:00.000Z'), endDate: new Date('2025-04-29T01:10:00.000Z'), }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2025-04-29T01:30:00.000Z'), endDate: new Date('2025-04-29T02:38:00.000Z'), }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2025-04-29T03:20:00.000Z'), endDate: new Date('2025-04-29T05:30:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-04-29T16:30:00.000Z'), endDate: new Date('2025-04-29T18:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-04-29T18:30:00.000Z'), endDate: new Date('2025-04-29T20:03:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-04-29T20:30:00.000Z'), endDate: new Date('2025-04-29T22:41:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-04-29T23:00:00.000Z'), endDate: new Date('2025-04-30T01:10:00.000Z'), }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2025-04-30T01:30:00.000Z'), endDate: new Date('2025-04-30T02:38:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-04-30T03:20:00.000Z'), endDate: new Date('2025-04-30T05:30:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-04-30T16:10:00.000Z'), endDate: new Date('2025-04-30T17:43:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-04-30T18:00:00.000Z'), endDate: new Date('2025-04-30T19:32:00.000Z'), }, { theatreId: 1, movieId: 3, price: 5, startDate: new Date('2025-04-30T20:10:00.000Z'), endDate: new Date('2025-04-30T22:01:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-04-30T22:40:00.000Z'), endDate: new Date('2025-05-01T00:50:00.000Z'), }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2025-05-01T01:20:00.000Z'), endDate: new Date('2025-05-01T02:28:00.000Z'), }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date('2025-05-01T03:20:00.000Z'), endDate: new Date('2025-05-01T05:11:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-01T17:00:00.000Z'), endDate: new Date('2025-05-01T18:33:00.000Z'), }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2025-05-01T19:00:00.000Z'), endDate: new Date('2025-05-01T20:32:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-01T21:00:00.000Z'), endDate: new Date('2025-05-01T22:51:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-05-01T23:30:00.000Z'), endDate: new Date('2025-05-02T01:40:00.000Z'), }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2025-05-02T02:00:00.000Z'), endDate: new Date('2025-05-02T03:08:00.000Z'), }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2025-05-02T03:30:00.000Z'), endDate: new Date('2025-05-02T05:50:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-02T17:00:00.000Z'), endDate: new Date('2025-05-02T18:33:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-02T19:00:00.000Z'), endDate: new Date('2025-05-02T20:32:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-02T21:00:00.000Z'), endDate: new Date('2025-05-02T22:51:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-05-02T23:30:00.000Z'), endDate: new Date('2025-05-03T01:40:00.000Z'), }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2025-05-03T02:00:00.000Z'), endDate: new Date('2025-05-03T03:08:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-05-03T03:30:00.000Z'), endDate: new Date('2025-05-03T05:50:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-03T17:00:00.000Z'), endDate: new Date('2025-05-03T18:33:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-03T19:00:00.000Z'), endDate: new Date('2025-05-03T20:27:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-03T21:00:00.000Z'), endDate: new Date('2025-05-03T22:51:00.000Z'), }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2025-05-03T23:30:00.000Z'), endDate: new Date('2025-05-04T01:02:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-05-04T01:30:00.000Z'), endDate: new Date('2025-05-04T03:40:00.000Z'), }, { theatreId: 1, movieId: 6, price: 20, startDate: new Date('2025-05-04T04:00:00.000Z'), endDate: new Date('2025-05-04T05:27:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-04T16:30:00.000Z'), endDate: new Date('2025-05-04T18:02:00.000Z'), }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date('2025-05-04T19:00:00.000Z'), endDate: new Date('2025-05-04T20:27:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-04T21:00:00.000Z'), endDate: new Date('2025-05-04T22:51:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-04T23:30:00.000Z'), endDate: new Date('2025-05-05T01:21:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-05T01:30:00.000Z'), endDate: new Date('2025-05-05T02:57:00.000Z'), }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2025-05-05T03:30:00.000Z'), endDate: new Date('2025-05-05T05:03:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-05T16:30:00.000Z'), endDate: new Date('2025-05-05T18:02:00.000Z'), }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date('2025-05-05T19:00:00.000Z'), endDate: new Date('2025-05-05T20:27:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-05T21:00:00.000Z'), endDate: new Date('2025-05-05T22:51:00.000Z'), }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2025-05-05T23:30:00.000Z'), endDate: new Date('2025-05-06T01:03:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-06T01:30:00.000Z'), endDate: new Date('2025-05-06T02:57:00.000Z'), }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2025-05-06T03:30:00.000Z'), endDate: new Date('2025-05-06T05:03:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-06T16:30:00.000Z'), endDate: new Date('2025-05-06T18:02:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-06T18:30:00.000Z'), endDate: new Date('2025-05-06T20:03:00.000Z'), }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date('2025-05-06T21:00:00.000Z'), endDate: new Date('2025-05-06T22:27:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-06T23:00:00.000Z'), endDate: new Date('2025-05-07T00:51:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-07T01:10:00.000Z'), endDate: new Date('2025-05-07T02:37:00.000Z'), }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2025-05-07T03:30:00.000Z'), endDate: new Date('2025-05-07T05:40:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-07T16:30:00.000Z'), endDate: new Date('2025-05-07T18:02:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-07T18:30:00.000Z'), endDate: new Date('2025-05-07T20:02:00.000Z'), }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date('2025-05-07T21:00:00.000Z'), endDate: new Date('2025-05-07T22:27:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-05-07T23:00:00.000Z'), endDate: new Date('2025-05-08T00:51:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-08T01:10:00.000Z'), endDate: new Date('2025-05-08T02:37:00.000Z'), }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2025-05-08T03:20:00.000Z'), endDate: new Date('2025-05-08T05:30:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-08T16:30:00.000Z'), endDate: new Date('2025-05-08T18:02:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-08T18:30:00.000Z'), endDate: new Date('2025-05-08T20:02:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-08T20:30:00.000Z'), endDate: new Date('2025-05-08T22:21:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-05-08T23:00:00.000Z'), endDate: new Date('2025-05-09T01:10:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-09T01:30:00.000Z'), endDate: new Date('2025-05-09T02:57:00.000Z'), }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2025-05-09T03:30:00.000Z'), endDate: new Date('2025-05-09T05:03:00.000Z'), }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2025-05-09T16:30:00.000Z'), endDate: new Date('2025-05-09T18:03:00.000Z'), }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2025-05-09T18:30:00.000Z'), endDate: new Date('2025-05-09T20:02:00.000Z'), }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2025-05-09T20:30:00.000Z'), endDate: new Date('2025-05-09T22:21:00.000Z'), }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2025-05-09T23:00:00.000Z'), endDate: new Date('2025-05-10T01:10:00.000Z'), }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2025-05-10T01:30:00.000Z'), endDate: new Date('2025-05-10T02:57:00.000Z'), }, { theatreId: 1, movieId: 1, price: 15, startDate: new Date('2025-05-10T03:30:00.000Z'), endDate: new Date('2025-05-10T05:02:00.000Z'), }, ];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
.dx-scheduler-work-space-week .dx-scheduler-date-table { width: 3500px; } .dx-scheduler-timeline-day .dx-scheduler-date-table { width: 3500px; } .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { padding: 12px; } .movie-preview-image { max-height: 80px; max-width: 80px; min-height: 60px; min-width: 60px; border-radius: 2px; overflow: hidden; } .movie-preview-image img { width: 100%; position: relative; top: -25%; pointer-events: none; } .movie-preview { display: flex; gap: 8px; max-height: 100%; white-space: normal; } .movie-preview>.movie-details { font-size: 12px; color: #242424; } .movie-preview>.movie-details>.title { font-weight: 600; font-size: 14px; margin-bottom: 4px; } .movie-info-container { border-radius: 8px; padding-bottom: 8px; } .movie-info { display: flex; gap: 12px; } .dx-theme-material .movie-info { gap: 16px; } .movie-info .movie-preview-image { border: 1px solid var(--dx-color-border); } .movie-info .movie-details { text-align: left; } .movie-info .movie-details>.title { font-weight: 600; font-size: 14px; margin-bottom: 8px; } .dx-scheduler-form-end-date-group.dx-field-item { padding-bottom: 12px; } .long-title h3 { font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; } .dx-scheduler-appointment::before { opacity: 0.26 !important; }
<!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" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.9.3/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="long-title"><h3>DXCinema Show Times</h3></div> <div id="app"> </div> </div> </body> </html>

You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):

Image Source: Wikimedia Commons