DevExtreme v24.1 is now available.

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

Your search did not match any results.

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
import React from 'react'; import Scheduler, { Editing, Resource, SchedulerTypes } from 'devextreme-react/scheduler'; import Query from 'devextreme/data/query'; import { SelectBoxTypes } from 'devextreme-react/select-box'; import { DateBoxTypes } from 'devextreme-react/date-box'; import Appointment from './Appointment.tsx'; import AppointmentTooltip from './AppointmentTooltip.tsx'; import { data, moviesData, theatreData, Appointment as AppointmentType, } from './data.ts'; const currentDate = new Date(2021, 3, 27); const views: SchedulerTypes.ViewType[] = ['day', 'week', 'timelineDay']; const groups = ['theatreId']; const onAppointmentFormOpening = (e: SchedulerTypes.AppointmentFormOpeningEvent) => { let movieInfo = getMovieById((e.appointmentData as AppointmentType).movieId) || {}; let { startDate } = e.appointmentData!; e.form.option('items', [{ label: { text: 'Movie', }, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: moviesData, displayExpr: 'text', valueExpr: 'id', onValueChanged(args: SelectBoxTypes.ValueChangedEvent) { movieInfo = getMovieById(args.value); e.form.updateData('director', movieInfo.director); e.form.updateData('endDate', new Date((startDate as Date).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(args: DateBoxTypes.ValueChangedEvent) { startDate = args.value; e.form.updateData('endDate', new Date((startDate as Date).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(itemData) { return `$${itemData}`; }, }, }, ]); }; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; const App = () => ( <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={onAppointmentFormOpening} > <Editing allowAdding={false} /> <Resource dataSource={moviesData} fieldExpr="movieId" useColorAsDefault={true} /> <Resource dataSource={theatreData} fieldExpr="theatreId" /> </Scheduler> ); export default App;
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']; const onAppointmentFormOpening = (e) => { let movieInfo = getMovieById(e.appointmentData.movieId) || {}; let { startDate } = e.appointmentData; e.form.option('items', [ { label: { text: 'Movie', }, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: moviesData, displayExpr: 'text', valueExpr: 'id', onValueChanged(args) { movieInfo = getMovieById(args.value); e.form.updateData('director', movieInfo.director); e.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(args) { startDate = args.value; e.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(itemData) { return `$${itemData}`; }, }, }, ]); }; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; const App = () => ( <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={onAppointmentFormOpening} > <Editing allowAdding={false} /> <Resource dataSource={moviesData} fieldExpr="movieId" useColorAsDefault={true} /> <Resource dataSource={theatreData} fieldExpr="theatreId" /> </Scheduler> ); export default App;
import React, { useMemo } from 'react'; import Query from 'devextreme/data/query'; import { formatDate } from 'devextreme/localization'; import { SchedulerTypes } from 'devextreme-react/scheduler'; import { moviesData } from './data.ts'; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; type AppointmentProps = { data: { targetedAppointmentData: SchedulerTypes.Appointment; } }; const Appointment = (props: AppointmentProps) => { const { targetedAppointmentData } = props.data; const { movieId } = targetedAppointmentData; const movieData = useMemo(() => getMovieById(movieId), [movieId]); return ( <div className="showtime-preview"> <div> {movieData.text}</div> <div> Ticket Price: <strong>${ targetedAppointmentData.price }</strong> </div> <div> {formatDate(targetedAppointmentData.displayStartDate, 'shortTime')} {' - '} {formatDate(targetedAppointmentData.displayEndDate, 'shortTime')} </div> </div> ); }; export default Appointment;
import React, { useMemo } from 'react'; import Query from 'devextreme/data/query'; import { SchedulerTypes } from 'devextreme-react/scheduler'; import { moviesData } from './data.ts'; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; type AppointmentProps = { data: { appointmentData: SchedulerTypes.Appointment & { movieId: number }; } }; const AppointmentTooltip = (props: AppointmentProps) => { const { movieId } = props.data.appointmentData; const movieData = useMemo(() => getMovieById(movieId), [movieId]); 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> ); }; export default AppointmentTooltip;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
import { SchedulerTypes } from 'devextreme-react/scheduler'; export type Appointment = SchedulerTypes.Appointment & { theatreId: number; movieId: number; price: number; }; type MovieResource = { id: number; text: string; director: string; year: number; image: string; duration: number; color: string; }; type TheatreResource = { text: string; id: number; }; export const moviesData: MovieResource[] = [{ 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: TheatreResource[] = [{ text: 'Cinema Hall 1', id: 0, }, { text: 'Cinema Hall 2', id: 1, }]; export const data: Appointment[] = [{ 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.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '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.8.1/prop-types.js', 'globalize': 'npm:globalize@1.7.0/dist/globalize', 'json': 'npm:systemjs-plugin-json@0.3.0/json.js', 'cldr': 'npm:cldrjs@0.5.5/dist/cldr', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.4/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.4/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.10/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // 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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, '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', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React, { useMemo } from 'react'; import Query from 'devextreme/data/query'; import { formatDate } from 'devextreme/localization'; import { moviesData } from './data.js'; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; const Appointment = (props) => { const { targetedAppointmentData } = props.data; const { movieId } = targetedAppointmentData; const movieData = useMemo(() => getMovieById(movieId), [movieId]); return ( <div className="showtime-preview"> <div> {movieData.text}</div> <div> Ticket Price: <strong>${targetedAppointmentData.price}</strong> </div> <div> {formatDate(targetedAppointmentData.displayStartDate, 'shortTime')} {' - '} {formatDate(targetedAppointmentData.displayEndDate, 'shortTime')} </div> </div> ); }; export default Appointment;
import React, { useMemo } from 'react'; import Query from 'devextreme/data/query'; import { moviesData } from './data.js'; const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0]; const AppointmentTooltip = (props) => { const { movieId } = props.data.appointmentData; const movieData = useMemo(() => getMovieById(movieId), [movieId]); 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> ); }; export default AppointmentTooltip;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
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'), }, ];
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/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.tsx"); </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; }