Your search did not match any results.
Scheduler

Custom Templates

Documentation

This demo illustrates the rich collection of the appearance customization options available as a part of the Scheduler widget. The appearance of appointments and appointment tooltips are defined using custom templates. Options for the appointment details form are set within the appointmentFormCreated event handler. Options for the Scheduler are also modified: the timelineDay view is added to the View Selector and the All-day panel is hidden.

www.wikipedia.org
Copy to CodeSandBox
Apply
Reset
<template> <div> <dx-scheduler :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" :editing="editing" :on-content-ready="onContentReady" :on-appointment-form-opening="onAppointmentFormOpening" appointment-template="AppointmentTemplateSlot" appointment-tooltip-template="AppointmentTooltipTemplateSlot" current-view="day" > <dx-resource :use-color-as-default="true" :data-source="moviesData" field-expr="movieId" /> <dx-resource :data-source="theatreData" field-expr="theatreId" /> <appointment-template slot="AppointmentTemplateSlot" slot-scope="{ data }" :scheduler="scheduler" :template-data="data" /> <appointment-tooltip-template slot="AppointmentTooltipTemplateSlot" slot-scope="{ data }" :scheduler="scheduler" :template-tooltip-data="data" /> </dx-scheduler> </div> </template> <script> import DxScheduler, { DxResource } from 'devextreme-vue/scheduler'; import AppointmentTemplate from './AppointmentTemplate.vue'; import AppointmentTooltipTemplate from './AppointmentTooltipTemplate.vue'; import { data, moviesData, theatreData } from './data.js'; import Query from 'devextreme/data/query'; const getMovieById = function(resourceId) { return Query(moviesData) .filter('id', resourceId) .toArray()[0]; }; export default { components: { DxScheduler, DxResource, AppointmentTemplate, AppointmentTooltipTemplate }, data() { return { views: ['day', 'week', 'timelineDay'], groups: ['theatreId'], scheduler: null, currentDate: new Date(2015, 4, 25), dataSource: data, moviesData: moviesData, theatreData: theatreData, editing: { allowAdding: false } }; }, methods: { onContentReady(e) { this.scheduler = e.component; }, onAppointmentFormOpening(data) { let form = data.form, movieInfo = getMovieById(data.appointmentData.movieId) || {}, startDate = data.appointmentData.startDate; form.option('items', [{ label: { text: 'Movie' }, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: moviesData, displayExpr: 'text', valueExpr: 'id', onValueChanged: function(args) { movieInfo = getMovieById(args.value); form.getEditor('director') .option('value', movieInfo.director); form.getEditor('endDate') .option('value', new Date (startDate.getTime() + 60 * 1000 * movieInfo.duration)); } }, }, { label: { text: 'Director' }, name: 'director', editorType: 'dxTextBox', editorOptions: { value: movieInfo.director, readOnly: true } }, { dataField: 'startDate', editorType: 'dxDateBox', editorOptions: { width: '100%', type: 'datetime', onValueChanged: function(args) { startDate = args.value; form.getEditor('endDate') .option('value', new Date (startDate.getTime() + 60 * 1000 * movieInfo.duration)); } } }, { name: 'endDate', dataField: 'endDate', editorType: 'dxDateBox', editorOptions: { width: '100%', type: 'datetime', readOnly: true } }, { dataField: 'price', editorType: 'dxRadioGroup', editorOptions: { dataSource: [5, 10, 15, 20], itemTemplate: function(itemData) { return '$'.concat(itemData); } } } ]); } }, }; </script>
<template> <div class="showtime-preview"> <div> {{ movieData.text }}</div> <div> Ticket Price: <strong>{{ '$' + templateData.price }}</strong> </div> <div> {{ Globalize.formatDate(templateData.startDate, { time: "short" }) }} - {{ Globalize.formatDate(templateData.endDate, { time: "short" }) }} </div> </div> </template> <script> import 'devextreme/localization/globalize/date'; import Globalize from 'globalize'; import DxButton from 'devextreme-vue/button'; import Query from 'devextreme/data/query'; import { moviesData } from './data.js'; const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const getMovieById = function(resourceId) { return Query(moviesData) .filter('id', resourceId) .toArray()[0]; }; export default { components: { DxButton }, props: { scheduler: { type: Object, default: () => { } }, templateData: { type: Object, default: () => { } } }, data() { return { dayOfWeekNames: dayOfWeekNames, Globalize: Globalize, movieData: getMovieById(this.templateData.movieId) }; }, mounted() { Globalize.locale('en'); }, }; </script> <style scoped> .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { padding: 14px; } .showtime-preview > div:first-child { font-size: 12px; white-space: normal; } .showtime-preview > div:not(:first-child) { font-size: 11px; white-space: normal; } .movie-tooltip .movie-info { display: inline-block; margin-left: 10px; vertical-align: top; text-align: left; } .movie-tooltip img { height: 80px; margin-bottom: 10px; } .movie-tooltip .movie-title { font-size: 1.5em; line-height: 40px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; } </style>
<template> <div class="movie-tooltip"> <img :src="movieData.image"> <div class="movie-info"> <div class="movie-title"> {{ movieData.text }} ({{ movieData.year }}) </div><div> Director: {{ movieData.director }} </div> <div> Duration: {{ movieData.duration }} minutes </div> </div> </div> </template> <script> import 'devextreme/localization/globalize/date'; import Globalize from 'globalize'; import Query from 'devextreme/data/query'; import { moviesData } from './data.js'; const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const getMovieById = function(resourceId) { return Query(moviesData) .filter('id', resourceId) .toArray()[0]; }; export default { props: { scheduler: { type: Object, default: () => { } }, templateTooltipData: { type: Object, default: () => { } } }, data() { return { dayOfWeekNames: dayOfWeekNames, Globalize: Globalize, movieData: getMovieById(this.templateTooltipData.movieId) }; }, mounted() { Globalize.locale('en'); }, }; </script> <style scoped> .appointment-content { width: 360px; margin-top: 3px; } .dx-popup-content .appointment-content { margin-top: 7px; height: 50px; } .appointment-badge { text-align: center; float: left; margin-right: 12px; color: white; width: 28px; height: 28px; font-size: 20px; line-height: 20px; border-radius: 28px; margin-top: 5px; display: flex; justify-content: center; flex-direction: column; } .appointment-dates { color: #959595; font-size: 12px; text-align: left; float: left; } .appointment-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 270px; font-size: 15px; text-align: left; float: left; } .delete-appointment { position: relative; border: none; box-shadow: none; top: -8px; height: 50px; } .delete-appointment .dx-button-content { width: 50px; height: 50px; padding-left: 4px; } .delete-appointment.dx-state-hover, .dx-list-item.dx-state-hover .dx-button { box-shadow: none; background-color: inherit; } .delete-appointment .dx-icon-trash { color: #337ab7 !important; font-size: 23px !important; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="long-title"><h3>DXCinema Show Times</h3></div> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export const moviesData = [{ id: 1, text: 'His Girl Friday', director: 'Howard Hawks', year: 1940, image: '../../../../images/movies/HisGirlFriday.jpg', duration: 92, color: '#cb6bb2' }, { id: 2, text: 'Royal Wedding', director: 'Stanley Donen', year: 1951, image: '../../../../images/movies/RoyalWedding.jpg', duration: 93, color: '#56ca85' }, { id: 3, text: 'A Star Is Born', director: 'William A. Wellman', year: 1937, image: '../../../../images/movies/AStartIsBorn.jpg', duration: 111, color: '#1e90ff' }, { id: 4, text: 'The Screaming Skull', director: 'Alex Nicol', year: 1958, image: '../../../../images/movies/ScreamingSkull.jpg', duration: 68, color: '#ff9747' }, { id: 5, text: 'It\'s a Wonderful Life', director: 'Frank Capra', year: 1946, image: '../../../../images/movies/ItsAWonderfulLife.jpg', duration: 130, color: '#f05797' }, { id: 6, text: 'City Lights', director: 'Charlie Chaplin', year: 1931, image: '../../../../images/movies/CityLights.jpg', duration: 87, color: '#2a9010' }]; 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(2015, 4, 24, 9, 10), endDate: new Date(2015, 4, 24, 11, 1) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 24, 11, 30), endDate: new Date(2015, 4, 24, 13, 2) }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date(2015, 4, 24, 13, 30), endDate: new Date(2015, 4, 24, 15, 21) }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date(2015, 4, 24, 16, 0), endDate: new Date(2015, 4, 24, 17, 8) }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date(2015, 4, 24, 17, 30), endDate: new Date(2015, 4, 24, 19, 3) }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date(2015, 4, 24, 19, 30), endDate: new Date(2015, 4, 24, 21, 2) }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date(2015, 4, 24, 21, 20), endDate: new Date(2015, 4, 24, 22, 53) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 4, 25, 9, 10), endDate: new Date(2015, 4, 25, 11, 20) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 25, 12, 0), endDate: new Date(2015, 4, 25, 13, 33) }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date(2015, 4, 25, 14, 0), endDate: new Date(2015, 4, 25, 15, 51) }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date(2015, 4, 25, 16, 20), endDate: new Date(2015, 4, 25, 17, 28) }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date(2015, 4, 25, 18, 0), endDate: new Date(2015, 4, 25, 19, 32) }, { theatreId: 0, movieId: 2, price: 15, startDate: new Date(2015, 4, 25, 20, 0), endDate: new Date(2015, 4, 25, 21, 33) }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date(2015, 4, 25, 21, 50), endDate: new Date(2015, 4, 25, 22, 58) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 26, 9, 0), endDate: new Date(2015, 4, 26, 10, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 26, 11, 0), endDate: new Date(2015, 4, 26, 12, 33) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 26, 13, 20), endDate: new Date(2015, 4, 26, 15, 11) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 4, 26, 15, 45), endDate: new Date(2015, 4, 26, 17, 55) }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date(2015, 4, 26, 18, 20), endDate: new Date(2015, 4, 26, 19, 28) }, { theatreId: 0, movieId: 5, price: 20, startDate: new Date(2015, 4, 26, 20, 0), endDate: new Date(2015, 4, 26, 22, 10) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 27, 9, 0), endDate: new Date(2015, 4, 27, 10, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 27, 11, 0), endDate: new Date(2015, 4, 27, 12, 33) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 27, 13, 20), endDate: new Date(2015, 4, 27, 15, 11) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 4, 27, 15, 45), endDate: new Date(2015, 4, 27, 17, 55) }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date(2015, 4, 27, 18, 20), endDate: new Date(2015, 4, 27, 19, 28) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 4, 27, 20, 0), endDate: new Date(2015, 4, 27, 22, 10) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 28, 9, 30), endDate: new Date(2015, 4, 28, 11, 3) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 28, 11, 30), endDate: new Date(2015, 4, 28, 13, 2) }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date(2015, 4, 28, 13, 30), endDate: new Date(2015, 4, 28, 15, 21) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 4, 28, 16, 0), endDate: new Date(2015, 4, 28, 18, 10) }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date(2015, 4, 28, 18, 30), endDate: new Date(2015, 4, 28, 19, 38) }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date(2015, 4, 28, 20, 20), endDate: new Date(2015, 4, 28, 22, 11) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 29, 9, 30), endDate: new Date(2015, 4, 29, 11, 3) }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date(2015, 4, 29, 11, 30), endDate: new Date(2015, 4, 29, 13, 2) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 29, 13, 30), endDate: new Date(2015, 4, 29, 15, 21) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 4, 29, 16, 0), endDate: new Date(2015, 4, 29, 18, 10) }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date(2015, 4, 29, 18, 30), endDate: new Date(2015, 4, 29, 19, 38) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 29, 20, 20), endDate: new Date(2015, 4, 29, 22, 11) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 30, 9, 30), endDate: new Date(2015, 4, 30, 11, 3) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 30, 11, 30), endDate: new Date(2015, 4, 30, 13, 2) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 30, 13, 30), endDate: new Date(2015, 4, 30, 15, 21) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 4, 30, 16, 0), endDate: new Date(2015, 4, 30, 18, 10) }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date(2015, 4, 30, 18, 30), endDate: new Date(2015, 4, 30, 19, 38) }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date(2015, 4, 30, 20, 20), endDate: new Date(2015, 4, 30, 22, 11) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 4, 31, 9, 30), endDate: new Date(2015, 4, 31, 11, 3) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 4, 31, 11, 30), endDate: new Date(2015, 4, 31, 12, 57) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 4, 31, 13, 20), endDate: new Date(2015, 4, 31, 15, 11) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 4, 31, 16, 0), endDate: new Date(2015, 4, 31, 17, 32) }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date(2015, 4, 31, 18, 0), endDate: new Date(2015, 4, 31, 19, 33) }, { theatreId: 0, movieId: 6, price: 20, startDate: new Date(2015, 4, 31, 20, 0), endDate: new Date(2015, 4, 31, 21, 27) }, { theatreId: 0, movieId: 4, price: 15, startDate: new Date(2015, 4, 31, 21, 50), endDate: new Date(2015, 4, 31, 22, 58) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 1, 9, 0), endDate: new Date(2015, 5, 1, 10, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 1, 11, 30), endDate: new Date(2015, 5, 1, 13, 3) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 1, 13, 30), endDate: new Date(2015, 5, 1, 15, 21) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 1, 15, 30), endDate: new Date(2015, 5, 1, 17, 21) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 1, 17, 30), endDate: new Date(2015, 5, 1, 18, 57) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 5, 1, 20, 0), endDate: new Date(2015, 5, 1, 22, 10) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 2, 9, 0), endDate: new Date(2015, 5, 2, 10, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 2, 11, 0), endDate: new Date(2015, 5, 2, 12, 33) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 2, 13, 0), endDate: new Date(2015, 5, 2, 14, 51) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 2, 15, 30), endDate: new Date(2015, 5, 2, 17, 21) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 2, 17, 30), endDate: new Date(2015, 5, 2, 18, 57) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 5, 2, 20, 0), endDate: new Date(2015, 5, 2, 22, 10) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 3, 9, 0), endDate: new Date(2015, 5, 3, 10, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 3, 11, 0), endDate: new Date(2015, 5, 3, 12, 33) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 3, 13, 0), endDate: new Date(2015, 5, 3, 14, 51) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 3, 15, 30), endDate: new Date(2015, 5, 3, 17, 21) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 3, 17, 30), endDate: new Date(2015, 5, 3, 18, 57) }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date(2015, 5, 3, 20, 0), endDate: new Date(2015, 5, 3, 22, 10) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 4, 9, 0), endDate: new Date(2015, 5, 4, 10, 33) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 4, 11, 0), endDate: new Date(2015, 5, 4, 12, 32) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 4, 13, 0), endDate: new Date(2015, 5, 4, 14, 51) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 5, 4, 15, 30), endDate: new Date(2015, 5, 4, 17, 40) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 4, 18, 0), endDate: new Date(2015, 5, 4, 19, 27) }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date(2015, 5, 4, 20, 0), endDate: new Date(2015, 5, 4, 21, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 5, 9, 0), endDate: new Date(2015, 5, 5, 10, 33) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 5, 11, 0), endDate: new Date(2015, 5, 5, 12, 32) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 5, 13, 0), endDate: new Date(2015, 5, 5, 14, 51) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 5, 5, 15, 30), endDate: new Date(2015, 5, 5, 17, 40) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 5, 18, 0), endDate: new Date(2015, 5, 5, 19, 27) }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date(2015, 5, 5, 20, 0), endDate: new Date(2015, 5, 5, 21, 32) }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date(2015, 5, 6, 9, 0), endDate: new Date(2015, 5, 6, 10, 33) }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date(2015, 5, 6, 11, 0), endDate: new Date(2015, 5, 6, 12, 32) }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date(2015, 5, 6, 13, 0), endDate: new Date(2015, 5, 6, 14, 51) }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date(2015, 5, 6, 15, 30), endDate: new Date(2015, 5, 6, 17, 40) }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date(2015, 5, 6, 18, 0), endDate: new Date(2015, 5, 6, 19, 27) }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date(2015, 5, 6, 20, 0), endDate: new Date(2015, 5, 6, 21, 32) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 4, 24, 9, 30), endDate: new Date(2015, 4, 24, 11, 21) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 24, 12, 0), endDate: new Date(2015, 4, 24, 13, 32) }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date(2015, 4, 24, 14, 0), endDate: new Date(2015, 4, 24, 15, 51) }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date(2015, 4, 24, 16, 10), endDate: new Date(2015, 4, 24, 17, 18) }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date(2015, 4, 24, 17, 30), endDate: new Date(2015, 4, 24, 19, 3) }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date(2015, 4, 24, 19, 30), endDate: new Date(2015, 4, 24, 21, 2) }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date(2015, 4, 24, 21, 20), endDate: new Date(2015, 4, 24, 22, 53) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 25, 9, 30), endDate: new Date(2015, 4, 25, 11, 2) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 25, 11, 30), endDate: new Date(2015, 4, 25, 13, 3) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 25, 13, 30), endDate: new Date(2015, 4, 25, 15, 40) }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date(2015, 4, 25, 16, 0), endDate: new Date(2015, 4, 25, 17, 8) }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date(2015, 4, 25, 17, 30), endDate: new Date(2015, 4, 25, 19, 2) }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date(2015, 4, 25, 19, 40), endDate: new Date(2015, 4, 25, 21, 13) }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date(2015, 4, 25, 21, 40), endDate: new Date(2015, 4, 25, 22, 48) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 26, 9, 30), endDate: new Date(2015, 4, 26, 11, 2) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 26, 11, 30), endDate: new Date(2015, 4, 26, 13, 3) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 4, 26, 13, 30), endDate: new Date(2015, 4, 26, 15, 41) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 26, 16, 0), endDate: new Date(2015, 4, 26, 18, 10) }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date(2015, 4, 26, 18, 30), endDate: new Date(2015, 4, 26, 19, 38) }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date(2015, 4, 26, 20, 20), endDate: new Date(2015, 4, 26, 22, 30) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 27, 9, 30), endDate: new Date(2015, 4, 27, 11, 2) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 27, 11, 30), endDate: new Date(2015, 4, 27, 13, 3) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 4, 27, 13, 30), endDate: new Date(2015, 4, 27, 15, 41) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 4, 27, 16, 0), endDate: new Date(2015, 4, 27, 18, 10) }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date(2015, 4, 27, 18, 30), endDate: new Date(2015, 4, 27, 19, 38) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 27, 20, 20), endDate: new Date(2015, 4, 27, 22, 30) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 28, 9, 10), endDate: new Date(2015, 4, 28, 10, 43) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 28, 11, 0), endDate: new Date(2015, 4, 28, 12, 32) }, { theatreId: 1, movieId: 3, price: 5, startDate: new Date(2015, 4, 28, 13, 10), endDate: new Date(2015, 4, 28, 15, 1) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 4, 28, 15, 40), endDate: new Date(2015, 4, 28, 17, 50) }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date(2015, 4, 28, 18, 20), endDate: new Date(2015, 4, 28, 19, 28) }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date(2015, 4, 28, 20, 20), endDate: new Date(2015, 4, 28, 22, 11) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 29, 10, 0), endDate: new Date(2015, 4, 29, 11, 33) }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date(2015, 4, 29, 12, 0), endDate: new Date(2015, 4, 29, 13, 32) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 4, 29, 14, 0), endDate: new Date(2015, 4, 29, 15, 51) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 4, 29, 16, 30), endDate: new Date(2015, 4, 29, 18, 40) }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date(2015, 4, 29, 19, 0), endDate: new Date(2015, 4, 29, 20, 8) }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date(2015, 4, 29, 20, 30), endDate: new Date(2015, 4, 29, 22, 50) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 30, 10, 0), endDate: new Date(2015, 4, 30, 11, 33) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 4, 30, 12, 0), endDate: new Date(2015, 4, 30, 13, 32) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 4, 30, 14, 0), endDate: new Date(2015, 4, 30, 15, 51) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 30, 16, 30), endDate: new Date(2015, 4, 30, 18, 40) }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date(2015, 4, 30, 19, 0), endDate: new Date(2015, 4, 30, 20, 8) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 30, 20, 30), endDate: new Date(2015, 4, 30, 22, 50) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 4, 31, 10, 0), endDate: new Date(2015, 4, 31, 11, 33) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 4, 31, 12, 0), endDate: new Date(2015, 4, 31, 13, 27) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 4, 31, 14, 0), endDate: new Date(2015, 4, 31, 15, 51) }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date(2015, 4, 31, 16, 30), endDate: new Date(2015, 4, 31, 18, 2) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 4, 31, 18, 30), endDate: new Date(2015, 4, 31, 20, 40) }, { theatreId: 1, movieId: 6, price: 20, startDate: new Date(2015, 4, 31, 21, 0), endDate: new Date(2015, 4, 31, 22, 27) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 1, 9, 30), endDate: new Date(2015, 5, 1, 11, 2) }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date(2015, 5, 1, 12, 0), endDate: new Date(2015, 5, 1, 13, 27) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 1, 14, 0), endDate: new Date(2015, 5, 1, 15, 51) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 1, 16, 30), endDate: new Date(2015, 5, 1, 18, 21) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 1, 19, 0), endDate: new Date(2015, 5, 1, 20, 27) }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date(2015, 5, 1, 21, 0), endDate: new Date(2015, 5, 1, 22, 33) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 2, 10, 0), endDate: new Date(2015, 5, 2, 11, 32) }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date(2015, 5, 2, 12, 0), endDate: new Date(2015, 5, 2, 13, 27) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 2, 14, 0), endDate: new Date(2015, 5, 2, 15, 51) }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date(2015, 5, 2, 16, 30), endDate: new Date(2015, 5, 2, 18, 3) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 2, 19, 0), endDate: new Date(2015, 5, 2, 20, 27) }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date(2015, 5, 2, 21, 0), endDate: new Date(2015, 5, 2, 22, 33) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 3, 9, 30), endDate: new Date(2015, 5, 3, 11, 2) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 5, 3, 11, 30), endDate: new Date(2015, 5, 3, 13, 3) }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date(2015, 5, 3, 14, 0), endDate: new Date(2015, 5, 3, 15, 27) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 3, 16, 0), endDate: new Date(2015, 5, 3, 17, 51) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 3, 18, 10), endDate: new Date(2015, 5, 3, 19, 37) }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date(2015, 5, 3, 20, 30), endDate: new Date(2015, 5, 3, 22, 40) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 5, 4, 9, 30), endDate: new Date(2015, 5, 4, 11, 2) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 4, 11, 30), endDate: new Date(2015, 5, 4, 13, 2) }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date(2015, 5, 4, 14, 0), endDate: new Date(2015, 5, 4, 15, 27) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 5, 4, 16, 0), endDate: new Date(2015, 5, 4, 17, 51) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 4, 18, 10), endDate: new Date(2015, 5, 4, 19, 37) }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date(2015, 5, 4, 20, 20), endDate: new Date(2015, 5, 4, 22, 30) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 5, 5, 9, 30), endDate: new Date(2015, 5, 5, 11, 2) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 5, 11, 30), endDate: new Date(2015, 5, 5, 13, 2) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 5, 13, 30), endDate: new Date(2015, 5, 5, 15, 21) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 5, 5, 16, 0), endDate: new Date(2015, 5, 5, 18, 10) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 5, 18, 30), endDate: new Date(2015, 5, 5, 19, 57) }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date(2015, 5, 5, 20, 30), endDate: new Date(2015, 5, 5, 22, 3) }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date(2015, 5, 6, 9, 30), endDate: new Date(2015, 5, 6, 11, 3) }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date(2015, 5, 6, 11, 30), endDate: new Date(2015, 5, 6, 13, 2) }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date(2015, 5, 6, 13, 30), endDate: new Date(2015, 5, 6, 15, 21) }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date(2015, 5, 6, 16, 0), endDate: new Date(2015, 5, 6, 18, 10) }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date(2015, 5, 6, 18, 30), endDate: new Date(2015, 5, 6, 19, 57) }, { theatreId: 1, movieId: 1, price: 15, startDate: new Date(2015, 5, 6, 20, 30), endDate: new Date(2015, 5, 6, 22, 2) } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js', 'globalize': 'npm:globalize/dist/globalize', 'cldr': 'npm:cldrjs/dist/cldr', 'cldr-data': 'js/cldr', 'json': 'npm:systemjs-plugin-json/json.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'globalize': { main: '../globalize.js', defaultExtension: 'js' }, 'cldr': { main: '../cldr.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });