Your search did not match any results.
Scheduler

Custom Templates

The Scheduler contains the following properties used to specify custom templates globally and for individual views:

To customize the appointment details form, implement the onAppointmentFormOpening handler. In this demo, this handler adds custom fields to the appointment details form.

www.wikipedia.org
Backend API
Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Scheduler, { Editing, Resource } from 'devextreme-react/scheduler'; import Query from 'devextreme/data/query'; import Appointment from './Appointment.js'; import AppointmentTooltip from './AppointmentTooltip.js'; import { data, moviesData, theatreData } from './data.js'; const currentDate = new Date(2021, 3, 27); const views = ['day', 'week', 'timelineDay']; const groups = ['theatreId']; class App extends React.Component { constructor(props) { super(props); this.onAppointmentFormOpening = this.onAppointmentFormOpening.bind(this); } render() { return ( <Scheduler timeZone="America/Los_Angeles" dataSource={data} views={views} defaultCurrentView="day" defaultCurrentDate={currentDate} groups={groups} height={600} firstDayOfWeek={0} startDayHour={9} endDayHour={23} showAllDayPanel={false} crossScrollingEnabled={true} cellDuration={20} appointmentComponent={Appointment} appointmentTooltipComponent={AppointmentTooltip} onAppointmentFormOpening={this.onAppointmentFormOpening} > <Editing allowAdding={false} /> <Resource dataSource={moviesData} fieldExpr="movieId" useColorAsDefault={true} /> <Resource dataSource={theatreData} fieldExpr="theatreId" /> </Scheduler> ); } 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.updateData('director', movieInfo.director); form.updateData('endDate', 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.updateData('endDate', 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 `$${itemData}`; } } } ]); } } function getMovieById(id) { return Query(moviesData).filter(['id', id]).toArray()[0]; } export default App;
import React from 'react'; import Query from 'devextreme/data/query'; import { moviesData } from './data.js'; import localization from 'devextreme/localization'; function getMovieById(id) { return Query(moviesData).filter(['id', id]).toArray()[0]; } export default function Appointment(model) { const { appointmentData } = model.data; const movieData = getMovieById(appointmentData.movieId) || {}; return ( <div className="showtime-preview"> <div> {movieData.text}</div> <div> Ticket Price: <strong>${ appointmentData.price }</strong> </div> <div> {localization.formatDate(appointmentData.startDate, 'shortTime')} {' - '} {localization.formatDate(appointmentData.endDate, 'shortTime')} </div> </div> ); }
import React from 'react'; import Query from 'devextreme/data/query'; import 'devextreme/localization/globalize/date'; import { moviesData } from './data.js'; function getMovieById(id) { return Query(moviesData).filter(['id', id]).toArray()[0]; } export default class AppointmentTooltip extends React.Component { constructor(props) { super(props); this.state = { movieData: getMovieById(props.data.appointmentData.movieId) }; } render() { const { movieData } = this.state; return ( <div className="movie-tooltip"> <img src={movieData.image} /> <div className="movie-info"> <div className="movie-title"> {movieData.text} ({movieData.year}) </div> <div> Director: {movieData.director} </div> <div> Duration: {movieData.duration} minutes </div> </div> </div> ); } }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/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"></div> </div> </body> </html>
.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; }
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('2021-04-26T16:10:00.000Z'), endDate: new Date('2021-04-26T18:01:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-04-26T18:30:00.000Z'), endDate: new Date('2021-04-26T20:02:00.000Z') }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2021-04-26T20:30:00.000Z'), endDate: new Date('2021-04-26T22:21:00.000Z') }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2021-04-26T23:00:00.000Z'), endDate: new Date('2021-04-27T00:08:00.000Z') }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2021-04-27T00:30:00.000Z'), endDate: new Date('2021-04-27T02:03:00.000Z') }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2021-04-27T02:30:00.000Z'), endDate: new Date('2021-04-27T04:02:00.000Z') }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2021-04-27T04:20:00.000Z'), endDate: new Date('2021-04-27T05:53:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-04-27T16:10:00.000Z'), endDate: new Date('2021-04-27T18:20:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-04-27T19:00:00.000Z'), endDate: new Date('2021-04-27T20:33:00.000Z') }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date('2021-04-27T21:00:00.000Z'), endDate: new Date('2021-04-27T22:51:00.000Z') }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2021-04-27T23:20:00.000Z'), endDate: new Date('2021-04-28T00:28:00.000Z') }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2021-04-28T01:00:00.000Z'), endDate: new Date('2021-04-28T02:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 15, startDate: new Date('2021-04-28T03:00:00.000Z'), endDate: new Date('2021-04-28T04:33:00.000Z') }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2021-04-28T04:50:00.000Z'), endDate: new Date('2021-04-28T05:58:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-04-28T16:00:00.000Z'), endDate: new Date('2021-04-28T17:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-04-28T18:00:00.000Z'), endDate: new Date('2021-04-28T19:33:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-04-28T20:20:00.000Z'), endDate: new Date('2021-04-28T22:11:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-04-28T22:45:00.000Z'), endDate: new Date('2021-04-29T00:55:00.000Z') }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2021-04-29T01:20:00.000Z'), endDate: new Date('2021-04-29T02:28:00.000Z') }, { theatreId: 0, movieId: 5, price: 20, startDate: new Date('2021-04-29T03:00:00.000Z'), endDate: new Date('2021-04-29T05:10:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-04-29T16:00:00.000Z'), endDate: new Date('2021-04-29T17:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-04-29T18:00:00.000Z'), endDate: new Date('2021-04-29T19:33:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-04-29T20:20:00.000Z'), endDate: new Date('2021-04-29T22:11:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-04-29T22:45:00.000Z'), endDate: new Date('2021-04-30T00:55:00.000Z') }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2021-04-30T01:20:00.000Z'), endDate: new Date('2021-04-30T02:28:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-04-30T03:00:00.000Z'), endDate: new Date('2021-04-30T05:10:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-04-30T16:30:00.000Z'), endDate: new Date('2021-04-30T18:03:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-04-30T18:30:00.000Z'), endDate: new Date('2021-04-30T20:02:00.000Z') }, { theatreId: 0, movieId: 3, price: 5, startDate: new Date('2021-04-30T20:30:00.000Z'), endDate: new Date('2021-04-30T22:21:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-04-30T23:00:00.000Z'), endDate: new Date('2021-05-01T01:10:00.000Z') }, { theatreId: 0, movieId: 4, price: 5, startDate: new Date('2021-05-01T01:30:00.000Z'), endDate: new Date('2021-05-01T02:38:00.000Z') }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2021-05-01T03:20:00.000Z'), endDate: new Date('2021-05-01T05:11:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-01T16:30:00.000Z'), endDate: new Date('2021-05-01T18:03:00.000Z') }, { theatreId: 0, movieId: 1, price: 10, startDate: new Date('2021-05-01T18:30:00.000Z'), endDate: new Date('2021-05-01T20:02:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-01T20:30:00.000Z'), endDate: new Date('2021-05-01T22:21:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-05-01T23:00:00.000Z'), endDate: new Date('2021-05-02T01:10:00.000Z') }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2021-05-02T01:30:00.000Z'), endDate: new Date('2021-05-02T02:38:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-02T03:20:00.000Z'), endDate: new Date('2021-05-02T05:11:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-02T16:30:00.000Z'), endDate: new Date('2021-05-02T18:03:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-02T18:30:00.000Z'), endDate: new Date('2021-05-02T20:02:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-02T20:30:00.000Z'), endDate: new Date('2021-05-02T22:21:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-05-02T23:00:00.000Z'), endDate: new Date('2021-05-03T01:10:00.000Z') }, { theatreId: 0, movieId: 4, price: 10, startDate: new Date('2021-05-03T01:30:00.000Z'), endDate: new Date('2021-05-03T02:38:00.000Z') }, { theatreId: 0, movieId: 3, price: 15, startDate: new Date('2021-05-03T03:20:00.000Z'), endDate: new Date('2021-05-03T05:11:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-03T16:30:00.000Z'), endDate: new Date('2021-05-03T18:03:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-03T18:30:00.000Z'), endDate: new Date('2021-05-03T19:57:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-03T20:20:00.000Z'), endDate: new Date('2021-05-03T22:11:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-03T23:00:00.000Z'), endDate: new Date('2021-05-04T00:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 10, startDate: new Date('2021-05-04T01:00:00.000Z'), endDate: new Date('2021-05-04T02:33:00.000Z') }, { theatreId: 0, movieId: 6, price: 20, startDate: new Date('2021-05-04T03:00:00.000Z'), endDate: new Date('2021-05-04T04:27:00.000Z') }, { theatreId: 0, movieId: 4, price: 15, startDate: new Date('2021-05-04T04:50:00.000Z'), endDate: new Date('2021-05-04T05:58:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-05T02:00:00.000Z'), endDate: new Date('2021-05-04T17:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-04T18:30:00.000Z'), endDate: new Date('2021-05-04T20:03:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-04T20:30:00.000Z'), endDate: new Date('2021-05-04T22:21:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-04T22:30:00.000Z'), endDate: new Date('2021-05-05T00:21:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-05T00:30:00.000Z'), endDate: new Date('2021-05-05T01:57:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-05-05T03:00:00.000Z'), endDate: new Date('2021-05-05T05:10:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-06T02:00:00.000Z'), endDate: new Date('2021-05-05T17:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-06T04:00:00.000Z'), endDate: new Date('2021-05-06T05:33:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-05T20:00:00.000Z'), endDate: new Date('2021-05-05T21:51:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-05T22:30:00.000Z'), endDate: new Date('2021-05-06T00:21:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-06T00:30:00.000Z'), endDate: new Date('2021-05-06T01:57:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-05-06T03:00:00.000Z'), endDate: new Date('2021-05-06T05:10:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-06T16:00:00.000Z'), endDate: new Date('2021-05-06T17:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-06T18:00:00.000Z'), endDate: new Date('2021-05-06T19:33:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-06T20:00:00.000Z'), endDate: new Date('2021-05-06T21:51:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-06T22:30:00.000Z'), endDate: new Date('2021-05-07T00:21:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-07T00:30:00.000Z'), endDate: new Date('2021-05-07T01:57:00.000Z') }, { theatreId: 0, movieId: 5, price: 15, startDate: new Date('2021-05-07T03:00:00.000Z'), endDate: new Date('2021-05-07T05:10:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-07T16:00:00.000Z'), endDate: new Date('2021-05-07T17:33:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-07T18:00:00.000Z'), endDate: new Date('2021-05-07T19:32:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-07T20:00:00.000Z'), endDate: new Date('2021-05-07T21:51:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-05-07T22:30:00.000Z'), endDate: new Date('2021-05-08T00:40:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-08T01:00:00.000Z'), endDate: new Date('2021-05-08T02:27:00.000Z') }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2021-05-08T03:00:00.000Z'), endDate: new Date('2021-05-08T04:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-08T16:00:00.000Z'), endDate: new Date('2021-05-08T17:33:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-08T18:00:00.000Z'), endDate: new Date('2021-05-08T19:32:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-08T20:00:00.000Z'), endDate: new Date('2021-05-08T21:51:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-05-08T22:30:00.000Z'), endDate: new Date('2021-05-09T00:40:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-09T01:00:00.000Z'), endDate: new Date('2021-05-09T02:27:00.000Z') }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2021-05-09T03:00:00.000Z'), endDate: new Date('2021-05-09T04:32:00.000Z') }, { theatreId: 0, movieId: 2, price: 5, startDate: new Date('2021-05-09T16:00:00.000Z'), endDate: new Date('2021-05-09T17:33:00.000Z') }, { theatreId: 0, movieId: 1, price: 5, startDate: new Date('2021-05-09T18:00:00.000Z'), endDate: new Date('2021-05-09T19:32:00.000Z') }, { theatreId: 0, movieId: 3, price: 10, startDate: new Date('2021-05-09T20:00:00.000Z'), endDate: new Date('2021-05-09T21:51:00.000Z') }, { theatreId: 0, movieId: 5, price: 10, startDate: new Date('2021-05-09T22:30:00.000Z'), endDate: new Date('2021-05-10T00:40:00.000Z') }, { theatreId: 0, movieId: 6, price: 15, startDate: new Date('2021-05-10T01:00:00.000Z'), endDate: new Date('2021-05-10T02:27:00.000Z') }, { theatreId: 0, movieId: 1, price: 15, startDate: new Date('2021-05-10T03:00:00.000Z'), endDate: new Date('2021-05-10T04:32:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-04-27T02:30:00.000Z'), endDate: new Date('2021-04-26T18:21:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-04-26T19:00:00.000Z'), endDate: new Date('2021-04-26T20:32:00.000Z') }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date('2021-04-26T21:00:00.000Z'), endDate: new Date('2021-04-26T22:51:00.000Z') }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2021-04-26T23:10:00.000Z'), endDate: new Date('2021-04-27T00:18:00.000Z') }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2021-04-27T00:30:00.000Z'), endDate: new Date('2021-04-27T02:03:00.000Z') }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2021-04-26T16:30:00.000Z'), endDate: new Date('2021-04-27T04:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2021-04-27T04:20:00.000Z'), endDate: new Date('2021-04-27T05:53:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-04-27T16:30:00.000Z'), endDate: new Date('2021-04-27T18:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-04-27T18:30:00.000Z'), endDate: new Date('2021-04-27T20:03:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-04-27T20:30:00.000Z'), endDate: new Date('2021-04-27T22:40:00.000Z') }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2021-04-27T23:00:00.000Z'), endDate: new Date('2021-04-28T00:08:00.000Z') }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2021-04-28T00:30:00.000Z'), endDate: new Date('2021-04-28T02:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2021-04-28T02:40:00.000Z'), endDate: new Date('2021-04-28T04:13:00.000Z') }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2021-04-28T04:40:00.000Z'), endDate: new Date('2021-04-28T05:48:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-04-28T16:30:00.000Z'), endDate: new Date('2021-04-28T18:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-04-28T18:30:00.000Z'), endDate: new Date('2021-04-28T20:03:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-04-28T20:30:00.000Z'), endDate: new Date('2021-04-28T22:41:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-04-28T23:00:00.000Z'), endDate: new Date('2021-04-29T01:10:00.000Z') }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2021-04-29T01:30:00.000Z'), endDate: new Date('2021-04-29T02:38:00.000Z') }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2021-04-29T03:20:00.000Z'), endDate: new Date('2021-04-29T05:30:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-04-29T16:30:00.000Z'), endDate: new Date('2021-04-29T18:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-04-29T18:30:00.000Z'), endDate: new Date('2021-04-29T20:03:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-04-29T20:30:00.000Z'), endDate: new Date('2021-04-29T22:41:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-04-29T23:00:00.000Z'), endDate: new Date('2021-04-30T01:10:00.000Z') }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2021-04-30T01:30:00.000Z'), endDate: new Date('2021-04-30T02:38:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-04-30T03:20:00.000Z'), endDate: new Date('2021-04-30T05:30:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-04-30T16:10:00.000Z'), endDate: new Date('2021-04-30T17:43:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-04-30T18:00:00.000Z'), endDate: new Date('2021-04-30T19:32:00.000Z') }, { theatreId: 1, movieId: 3, price: 5, startDate: new Date('2021-04-30T20:10:00.000Z'), endDate: new Date('2021-04-30T22:01:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-04-30T22:40:00.000Z'), endDate: new Date('2021-05-01T00:50:00.000Z') }, { theatreId: 1, movieId: 4, price: 5, startDate: new Date('2021-05-01T01:20:00.000Z'), endDate: new Date('2021-05-01T02:28:00.000Z') }, { theatreId: 1, movieId: 3, price: 15, startDate: new Date('2021-05-01T03:20:00.000Z'), endDate: new Date('2021-05-01T05:11:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-01T17:00:00.000Z'), endDate: new Date('2021-05-01T18:33:00.000Z') }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2021-05-01T19:00:00.000Z'), endDate: new Date('2021-05-01T20:32:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-01T21:00:00.000Z'), endDate: new Date('2021-05-01T22:51:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-05-01T23:30:00.000Z'), endDate: new Date('2021-05-02T01:40:00.000Z') }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2021-05-02T02:00:00.000Z'), endDate: new Date('2021-05-02T03:08:00.000Z') }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2021-05-02T03:30:00.000Z'), endDate: new Date('2021-05-02T05:50:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-02T17:00:00.000Z'), endDate: new Date('2021-05-02T18:33:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-02T19:00:00.000Z'), endDate: new Date('2021-05-02T20:32:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-02T21:00:00.000Z'), endDate: new Date('2021-05-02T22:51:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-05-02T23:30:00.000Z'), endDate: new Date('2021-05-03T01:40:00.000Z') }, { theatreId: 1, movieId: 4, price: 10, startDate: new Date('2021-05-03T02:00:00.000Z'), endDate: new Date('2021-05-03T03:08:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-05-03T03:30:00.000Z'), endDate: new Date('2021-05-03T05:50:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-03T17:00:00.000Z'), endDate: new Date('2021-05-03T18:33:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-03T19:00:00.000Z'), endDate: new Date('2021-05-03T20:27:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-03T21:00:00.000Z'), endDate: new Date('2021-05-03T22:51:00.000Z') }, { theatreId: 1, movieId: 1, price: 10, startDate: new Date('2021-05-03T23:30:00.000Z'), endDate: new Date('2021-05-04T01:02:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-05-04T01:30:00.000Z'), endDate: new Date('2021-05-04T03:40:00.000Z') }, { theatreId: 1, movieId: 6, price: 20, startDate: new Date('2021-05-04T04:00:00.000Z'), endDate: new Date('2021-05-04T05:27:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-04T16:30:00.000Z'), endDate: new Date('2021-05-04T18:02:00.000Z') }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date('2021-05-04T19:00:00.000Z'), endDate: new Date('2021-05-04T20:27:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-04T21:00:00.000Z'), endDate: new Date('2021-05-04T22:51:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-04T23:30:00.000Z'), endDate: new Date('2021-05-05T01:21:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-04T16:00:00.000Z'), endDate: new Date('2021-05-05T03:27:00.000Z') }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2021-05-05T04:00:00.000Z'), endDate: new Date('2021-05-05T05:33:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-05T17:00:00.000Z'), endDate: new Date('2021-05-05T18:32:00.000Z') }, { theatreId: 1, movieId: 6, price: 5, startDate: new Date('2021-05-05T19:00:00.000Z'), endDate: new Date('2021-05-05T20:27:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-05T21:00:00.000Z'), endDate: new Date('2021-05-05T22:51:00.000Z') }, { theatreId: 1, movieId: 2, price: 10, startDate: new Date('2021-05-05T23:30:00.000Z'), endDate: new Date('2021-05-06T01:03:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-05T16:00:00.000Z'), endDate: new Date('2021-05-06T03:27:00.000Z') }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2021-05-05T18:00:00.000Z'), endDate: new Date('2021-05-05T19:33:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-06T16:30:00.000Z'), endDate: new Date('2021-05-06T18:02:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-06T18:30:00.000Z'), endDate: new Date('2021-05-06T20:03:00.000Z') }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date('2021-05-06T21:00:00.000Z'), endDate: new Date('2021-05-06T22:27:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-06T23:00:00.000Z'), endDate: new Date('2021-05-07T00:51:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-07T01:10:00.000Z'), endDate: new Date('2021-05-07T02:37:00.000Z') }, { theatreId: 1, movieId: 5, price: 20, startDate: new Date('2021-05-07T03:30:00.000Z'), endDate: new Date('2021-05-07T05:40:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-07T16:30:00.000Z'), endDate: new Date('2021-05-07T18:02:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-07T18:30:00.000Z'), endDate: new Date('2021-05-07T20:02:00.000Z') }, { theatreId: 1, movieId: 6, price: 10, startDate: new Date('2021-05-07T21:00:00.000Z'), endDate: new Date('2021-05-07T22:27:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-05-07T23:00:00.000Z'), endDate: new Date('2021-05-08T00:51:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-08T01:10:00.000Z'), endDate: new Date('2021-05-08T02:37:00.000Z') }, { theatreId: 1, movieId: 5, price: 15, startDate: new Date('2021-05-08T03:20:00.000Z'), endDate: new Date('2021-05-08T05:30:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-08T16:30:00.000Z'), endDate: new Date('2021-05-08T18:02:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-08T18:30:00.000Z'), endDate: new Date('2021-05-08T20:02:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-08T20:30:00.000Z'), endDate: new Date('2021-05-08T22:21:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-05-08T23:00:00.000Z'), endDate: new Date('2021-05-09T01:10:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-09T01:30:00.000Z'), endDate: new Date('2021-05-09T02:57:00.000Z') }, { theatreId: 1, movieId: 2, price: 15, startDate: new Date('2021-05-09T03:30:00.000Z'), endDate: new Date('2021-05-09T05:03:00.000Z') }, { theatreId: 1, movieId: 2, price: 5, startDate: new Date('2021-05-09T16:30:00.000Z'), endDate: new Date('2021-05-09T18:03:00.000Z') }, { theatreId: 1, movieId: 1, price: 5, startDate: new Date('2021-05-09T18:30:00.000Z'), endDate: new Date('2021-05-09T20:02:00.000Z') }, { theatreId: 1, movieId: 3, price: 10, startDate: new Date('2021-05-09T20:30:00.000Z'), endDate: new Date('2021-05-09T22:21:00.000Z') }, { theatreId: 1, movieId: 5, price: 10, startDate: new Date('2021-05-09T23:00:00.000Z'), endDate: new Date('2021-05-10T01:10:00.000Z') }, { theatreId: 1, movieId: 6, price: 15, startDate: new Date('2021-05-10T01:30:00.000Z'), endDate: new Date('2021-05-10T02:57:00.000Z') }, { theatreId: 1, movieId: 1, price: 15, startDate: new Date('2021-05-10T03:30:00.000Z'), endDate: new Date('2021-05-10T05:02:00.000Z') } ];
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'globalize': 'npm:globalize@1.1.1/dist/globalize', 'json': 'npm:systemjs-plugin-json@0.3.0/json.js', 'cldr': 'npm:cldrjs@0.4.4/dist/cldr', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@21.1.6', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.4.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.32/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.14/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', // SystemJS plugins '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' }, packages: { 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'globalize': { main: '../globalize.js', defaultExtension: 'js' }, 'cldr': { main: '../cldr.js', defaultExtension: 'js' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", ], babelOptions: { sourceMaps: false, stage0: true, react: true } }; System.config(window.config);