Custom Templates
Documentation
This demo illustrates the rich collection of the appearance customization properties available as a part of the Scheduler component. The appearance of appointments and appointment tooltips are defined using custom templates. Properties for the appointment details form are set within the appointmentFormOpening event handler. Properties 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
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import Scheduler, { 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, 4, 25);
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}
editing={{ allowAdding: false }}
appointmentComponent={Appointment}
appointmentTooltipComponent={AppointmentTooltip}
onAppointmentFormOpening={this.onAppointmentFormOpening}
>
<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 'devextreme/localization/globalize/date';
import Globalize from 'globalize';
import { moviesData } from './data.js';
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>
{Globalize.formatDate(appointmentData.startDate, { time: 'short' })}
{' - '}
{Globalize.formatDate(appointmentData.endDate, { time: 'short' }) }
</div>
</div>
);
}
import React from 'react';
import Query from 'devextreme/data/query';
import 'devextreme/localization/globalize/date';
import Globalize from 'globalize';
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)
};
Globalize.locale('en');
}
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/20.2.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/css/dx.light.css" />
<script type="text/javascript" src="https://unpkg.com/globalize/dist/globalize.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/globalize/dist/globalize/date.min.js"></script>
<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-05-24T16:10:00.000Z'),
endDate: new Date('2021-05-24T18:01:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-24T18:30:00.000Z'),
endDate: new Date('2021-05-24T20:02:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2021-05-24T20:30:00.000Z'),
endDate: new Date('2021-05-24T22:21:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2021-05-24T23:00:00.000Z'),
endDate: new Date('2021-05-25T00:08:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2021-05-25T00:30:00.000Z'),
endDate: new Date('2021-05-25T02:03:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2021-05-25T02:30:00.000Z'),
endDate: new Date('2021-05-25T04:02:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2021-05-25T04:20:00.000Z'),
endDate: new Date('2021-05-25T05:53:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-05-25T16:10:00.000Z'),
endDate: new Date('2021-05-25T18:20:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-25T19:00:00.000Z'),
endDate: new Date('2021-05-25T20:33:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2021-05-25T21:00:00.000Z'),
endDate: new Date('2021-05-25T22:51:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2021-05-25T23:20:00.000Z'),
endDate: new Date('2021-05-26T00:28:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2021-05-26T01:00:00.000Z'),
endDate: new Date('2021-05-26T02:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 15,
startDate: new Date('2021-05-26T03:00:00.000Z'),
endDate: new Date('2021-05-26T04:33:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2021-05-26T04:50:00.000Z'),
endDate: new Date('2021-05-26T05:58:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-26T16:00:00.000Z'),
endDate: new Date('2021-05-26T17:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-26T18:00:00.000Z'),
endDate: new Date('2021-05-26T19:33:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-26T20:20:00.000Z'),
endDate: new Date('2021-05-26T22:11:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-05-26T22:45:00.000Z'),
endDate: new Date('2021-05-27T00:55:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2021-05-27T01:20:00.000Z'),
endDate: new Date('2021-05-27T02:28:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 20,
startDate: new Date('2021-05-27T03:00:00.000Z'),
endDate: new Date('2021-05-27T05:10:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-27T16:00:00.000Z'),
endDate: new Date('2021-05-27T17:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-27T18:00:00.000Z'),
endDate: new Date('2021-05-27T19:33:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-27T20:20:00.000Z'),
endDate: new Date('2021-05-27T22:11:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-05-27T22:45:00.000Z'),
endDate: new Date('2021-05-28T00:55:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2021-05-28T01:20:00.000Z'),
endDate: new Date('2021-05-28T02:28:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-05-28T03:00:00.000Z'),
endDate: new Date('2021-05-28T05:10:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-28T16:30:00.000Z'),
endDate: new Date('2021-05-28T18:03:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-28T18:30:00.000Z'),
endDate: new Date('2021-05-28T20:02:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2021-05-28T20:30:00.000Z'),
endDate: new Date('2021-05-28T22:21:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-05-28T23:00:00.000Z'),
endDate: new Date('2021-05-29T01:10:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2021-05-29T01:30:00.000Z'),
endDate: new Date('2021-05-29T02:38:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2021-05-29T03:20:00.000Z'),
endDate: new Date('2021-05-29T05:11:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-29T16:30:00.000Z'),
endDate: new Date('2021-05-29T18:03:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2021-05-29T18:30:00.000Z'),
endDate: new Date('2021-05-29T20:02:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-29T20:30:00.000Z'),
endDate: new Date('2021-05-29T22:21:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-05-29T23:00:00.000Z'),
endDate: new Date('2021-05-30T01:10:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2021-05-30T01:30:00.000Z'),
endDate: new Date('2021-05-30T02:38:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-30T03:20:00.000Z'),
endDate: new Date('2021-05-30T05:11:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-30T16:30:00.000Z'),
endDate: new Date('2021-05-30T18:03:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-30T18:30:00.000Z'),
endDate: new Date('2021-05-30T20:02:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-30T20:30:00.000Z'),
endDate: new Date('2021-05-30T22:21:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-05-30T23:00:00.000Z'),
endDate: new Date('2021-05-31T01:10:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2021-05-31T01:30:00.000Z'),
endDate: new Date('2021-05-31T02:38:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2021-05-31T03:20:00.000Z'),
endDate: new Date('2021-05-31T05:11:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-05-31T16:30:00.000Z'),
endDate: new Date('2021-05-31T18:03:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-05-31T18:30:00.000Z'),
endDate: new Date('2021-05-31T19:57:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-05-31T20:20:00.000Z'),
endDate: new Date('2021-05-31T22:11:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-05-31T23:00:00.000Z'),
endDate: new Date('2021-06-01T00:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2021-06-01T01:00:00.000Z'),
endDate: new Date('2021-06-01T02:33:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 20,
startDate: new Date('2021-06-01T03:00:00.000Z'),
endDate: new Date('2021-06-01T04:27:00.000Z')
}, {
theatreId: 0,
movieId: 4,
price: 15,
startDate: new Date('2021-06-01T04:50:00.000Z'),
endDate: new Date('2021-06-01T05:58:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-02T02:00:00.000Z'),
endDate: new Date('2021-06-01T17:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-01T18:30:00.000Z'),
endDate: new Date('2021-06-01T20:03:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-01T20:30:00.000Z'),
endDate: new Date('2021-06-01T22:21:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-01T22:30:00.000Z'),
endDate: new Date('2021-06-02T00:21:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-02T00:30:00.000Z'),
endDate: new Date('2021-06-02T01:57:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-06-02T03:00:00.000Z'),
endDate: new Date('2021-06-02T05:10:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-03T02:00:00.000Z'),
endDate: new Date('2021-06-02T17:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-03T04:00:00.000Z'),
endDate: new Date('2021-06-03T05:33:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-02T20:00:00.000Z'),
endDate: new Date('2021-06-02T21:51:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-02T22:30:00.000Z'),
endDate: new Date('2021-06-03T00:21:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-03T00:30:00.000Z'),
endDate: new Date('2021-06-03T01:57:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-06-03T03:00:00.000Z'),
endDate: new Date('2021-06-03T05:10:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-03T16:00:00.000Z'),
endDate: new Date('2021-06-03T17:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-03T18:00:00.000Z'),
endDate: new Date('2021-06-03T19:33:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-03T20:00:00.000Z'),
endDate: new Date('2021-06-03T21:51:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-03T22:30:00.000Z'),
endDate: new Date('2021-06-04T00:21:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-04T00:30:00.000Z'),
endDate: new Date('2021-06-04T01:57:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2021-06-04T03:00:00.000Z'),
endDate: new Date('2021-06-04T05:10:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-04T16:00:00.000Z'),
endDate: new Date('2021-06-04T17:33:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-04T18:00:00.000Z'),
endDate: new Date('2021-06-04T19:32:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-04T20:00:00.000Z'),
endDate: new Date('2021-06-04T21:51:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-06-04T22:30:00.000Z'),
endDate: new Date('2021-06-05T00:40:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-05T01:00:00.000Z'),
endDate: new Date('2021-06-05T02:27:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2021-06-05T03:00:00.000Z'),
endDate: new Date('2021-06-05T04:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-05T16:00:00.000Z'),
endDate: new Date('2021-06-05T17:33:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-05T18:00:00.000Z'),
endDate: new Date('2021-06-05T19:32:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-05T20:00:00.000Z'),
endDate: new Date('2021-06-05T21:51:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-06-05T22:30:00.000Z'),
endDate: new Date('2021-06-06T00:40:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-06T01:00:00.000Z'),
endDate: new Date('2021-06-06T02:27:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2021-06-06T03:00:00.000Z'),
endDate: new Date('2021-06-06T04:32:00.000Z')
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2021-06-06T16:00:00.000Z'),
endDate: new Date('2021-06-06T17:33:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2021-06-06T18:00:00.000Z'),
endDate: new Date('2021-06-06T19:32:00.000Z')
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2021-06-06T20:00:00.000Z'),
endDate: new Date('2021-06-06T21:51:00.000Z')
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2021-06-06T22:30:00.000Z'),
endDate: new Date('2021-06-07T00:40:00.000Z')
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2021-06-07T01:00:00.000Z'),
endDate: new Date('2021-06-07T02:27:00.000Z')
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2021-06-07T03:00:00.000Z'),
endDate: new Date('2021-06-07T04:32:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-05-25T02:30:00.000Z'),
endDate: new Date('2021-05-24T18:21:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-24T19:00:00.000Z'),
endDate: new Date('2021-05-24T20:32:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2021-05-24T21:00:00.000Z'),
endDate: new Date('2021-05-24T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2021-05-24T23:10:00.000Z'),
endDate: new Date('2021-05-25T00:18:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2021-05-25T00:30:00.000Z'),
endDate: new Date('2021-05-25T02:03:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2021-05-24T16:30:00.000Z'),
endDate: new Date('2021-05-25T04:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2021-05-25T04:20:00.000Z'),
endDate: new Date('2021-05-25T05:53:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-25T16:30:00.000Z'),
endDate: new Date('2021-05-25T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-25T18:30:00.000Z'),
endDate: new Date('2021-05-25T20:03:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-05-25T20:30:00.000Z'),
endDate: new Date('2021-05-25T22:40:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2021-05-25T23:00:00.000Z'),
endDate: new Date('2021-05-26T00:08:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2021-05-26T00:30:00.000Z'),
endDate: new Date('2021-05-26T02:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2021-05-26T02:40:00.000Z'),
endDate: new Date('2021-05-26T04:13:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2021-05-26T04:40:00.000Z'),
endDate: new Date('2021-05-26T05:48:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-26T16:30:00.000Z'),
endDate: new Date('2021-05-26T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-26T18:30:00.000Z'),
endDate: new Date('2021-05-26T20:03:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-05-26T20:30:00.000Z'),
endDate: new Date('2021-05-26T22:41:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-05-26T23:00:00.000Z'),
endDate: new Date('2021-05-27T01:10:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2021-05-27T01:30:00.000Z'),
endDate: new Date('2021-05-27T02:38:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2021-05-27T03:20:00.000Z'),
endDate: new Date('2021-05-27T05:30:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-27T16:30:00.000Z'),
endDate: new Date('2021-05-27T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-27T18:30:00.000Z'),
endDate: new Date('2021-05-27T20:03:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-05-27T20:30:00.000Z'),
endDate: new Date('2021-05-27T22:41:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-05-27T23:00:00.000Z'),
endDate: new Date('2021-05-28T01:10:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2021-05-28T01:30:00.000Z'),
endDate: new Date('2021-05-28T02:38:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-05-28T03:20:00.000Z'),
endDate: new Date('2021-05-28T05:30:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-28T16:10:00.000Z'),
endDate: new Date('2021-05-28T17:43:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-28T18:00:00.000Z'),
endDate: new Date('2021-05-28T19:32:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 5,
startDate: new Date('2021-05-28T20:10:00.000Z'),
endDate: new Date('2021-05-28T22:01:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-05-28T22:40:00.000Z'),
endDate: new Date('2021-05-29T00:50:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2021-05-29T01:20:00.000Z'),
endDate: new Date('2021-05-29T02:28:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2021-05-29T03:20:00.000Z'),
endDate: new Date('2021-05-29T05:11:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-29T17:00:00.000Z'),
endDate: new Date('2021-05-29T18:33:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2021-05-29T19:00:00.000Z'),
endDate: new Date('2021-05-29T20:32:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-05-29T21:00:00.000Z'),
endDate: new Date('2021-05-29T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-05-29T23:30:00.000Z'),
endDate: new Date('2021-05-30T01:40:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2021-05-30T02:00:00.000Z'),
endDate: new Date('2021-05-30T03:08:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2021-05-30T03:30:00.000Z'),
endDate: new Date('2021-05-30T05:50:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-30T17:00:00.000Z'),
endDate: new Date('2021-05-30T18:33:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-05-30T19:00:00.000Z'),
endDate: new Date('2021-05-30T20:32:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-05-30T21:00:00.000Z'),
endDate: new Date('2021-05-30T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-05-30T23:30:00.000Z'),
endDate: new Date('2021-05-31T01:40:00.000Z')
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2021-05-31T02:00:00.000Z'),
endDate: new Date('2021-05-31T03:08:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-05-31T03:30:00.000Z'),
endDate: new Date('2021-05-31T05:50:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-05-31T17:00:00.000Z'),
endDate: new Date('2021-05-31T18:33:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-05-31T19:00:00.000Z'),
endDate: new Date('2021-05-31T20:27:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-05-31T21:00:00.000Z'),
endDate: new Date('2021-05-31T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2021-05-31T23:30:00.000Z'),
endDate: new Date('2021-06-01T01:02:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-06-01T01:30:00.000Z'),
endDate: new Date('2021-06-01T03:40:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 20,
startDate: new Date('2021-06-01T04:00:00.000Z'),
endDate: new Date('2021-06-01T05:27:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-01T16:30:00.000Z'),
endDate: new Date('2021-06-01T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2021-06-01T19:00:00.000Z'),
endDate: new Date('2021-06-01T20:27:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-01T21:00:00.000Z'),
endDate: new Date('2021-06-01T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-01T23:30:00.000Z'),
endDate: new Date('2021-06-02T01:21:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-01T16:00:00.000Z'),
endDate: new Date('2021-06-02T03:27:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2021-06-02T04:00:00.000Z'),
endDate: new Date('2021-06-02T05:33:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-02T17:00:00.000Z'),
endDate: new Date('2021-06-02T18:32:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2021-06-02T19:00:00.000Z'),
endDate: new Date('2021-06-02T20:27:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-02T21:00:00.000Z'),
endDate: new Date('2021-06-02T22:51:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2021-06-02T23:30:00.000Z'),
endDate: new Date('2021-06-03T01:03:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-02T16:00:00.000Z'),
endDate: new Date('2021-06-03T03:27:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2021-06-02T18:00:00.000Z'),
endDate: new Date('2021-06-02T19:33:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-03T16:30:00.000Z'),
endDate: new Date('2021-06-03T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-06-03T18:30:00.000Z'),
endDate: new Date('2021-06-03T20:03:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2021-06-03T21:00:00.000Z'),
endDate: new Date('2021-06-03T22:27:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-03T23:00:00.000Z'),
endDate: new Date('2021-06-04T00:51:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-04T01:10:00.000Z'),
endDate: new Date('2021-06-04T02:37:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2021-06-04T03:30:00.000Z'),
endDate: new Date('2021-06-04T05:40:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-06-04T16:30:00.000Z'),
endDate: new Date('2021-06-04T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-04T18:30:00.000Z'),
endDate: new Date('2021-06-04T20:02:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2021-06-04T21:00:00.000Z'),
endDate: new Date('2021-06-04T22:27:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-06-04T23:00:00.000Z'),
endDate: new Date('2021-06-05T00:51:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-05T01:10:00.000Z'),
endDate: new Date('2021-06-05T02:37:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2021-06-05T03:20:00.000Z'),
endDate: new Date('2021-06-05T05:30:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-06-05T16:30:00.000Z'),
endDate: new Date('2021-06-05T18:02:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-05T18:30:00.000Z'),
endDate: new Date('2021-06-05T20:02:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-05T20:30:00.000Z'),
endDate: new Date('2021-06-05T22:21:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-06-05T23:00:00.000Z'),
endDate: new Date('2021-06-06T01:10:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-06T01:30:00.000Z'),
endDate: new Date('2021-06-06T02:57:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2021-06-06T03:30:00.000Z'),
endDate: new Date('2021-06-06T05:03:00.000Z')
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2021-06-06T16:30:00.000Z'),
endDate: new Date('2021-06-06T18:03:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2021-06-06T18:30:00.000Z'),
endDate: new Date('2021-06-06T20:02:00.000Z')
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2021-06-06T20:30:00.000Z'),
endDate: new Date('2021-06-06T22:21:00.000Z')
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2021-06-06T23:00:00.000Z'),
endDate: new Date('2021-06-07T01:10:00.000Z')
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2021-06-07T01:30:00.000Z'),
endDate: new Date('2021-06-07T02:57:00.000Z')
}, {
theatreId: 1,
movieId: 1,
price: 15,
startDate: new Date('2021-06-07T03:30:00.000Z'),
endDate: new Date('2021-06-07T05:02:00.000Z')
}
];
System.config({
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16.14.0/umd/react.development.js',
'react-dom': 'npm:react-dom@16.14.0/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.26.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@20.2.7',
'devextreme-react': 'npm:devextreme-react@20.2.7',
'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.0.23/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@2.0.29/dist/dx-gantt.js',
'preact': 'npm:preact@10.5.13/dist/preact.js',
'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.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-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'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});