Backend API
import React, { useCallback, useMemo, useRef } from 'react';
import Scheduler, {
Editing,
Resource,
Form as SchedulerForm,
Item,
Label,
type SchedulerTypes,
} from 'devextreme-react/scheduler';
import { query } from 'devextreme-react/common/data';
import { type SelectBoxTypes } from 'devextreme-react/select-box';
import { type FormTypes } from 'devextreme-react/form';
import { type PopupTypes } from 'devextreme-react/popup';
import Appointment from './Appointment.tsx';
import AppointmentTooltip from './AppointmentTooltip.tsx';
import MovieInfoContainer from './MovieInfoContainer.tsx';
import {
data, moviesData, theatreData, type MovieResource,
} from './data.ts';
type dxForm = NonNullable<FormTypes.InitializedEvent['component']>;
const currentDate = new Date(2025, 3, 27);
const views: SchedulerTypes.ViewType[] = ['day', 'week', 'timelineDay'];
const groups = ['theatreId'];
const getMovieById = (id: number | undefined): MovieResource | null => id
? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null
: null;
const getEditorStylingMode = (): 'filled' | 'outlined' => {
const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
return isMaterialOrFluent ? 'filled' : 'outlined';
};
const priceDisplayExpr = (value: number): string => `$${value}`;
const colCountByScreen = { xs: 2 };
const App = () => {
const formInstanceRef = useRef<dxForm | null>(null);
const onPopupOptionChanged = useCallback((e: PopupTypes.OptionChangedEvent) => {
if (e.fullName === 'toolbarItems' && e.value) {
e.value.forEach((item, index: number) => {
if (item.shortcut === 'done' || item.shortcut === 'cancel') {
e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
}
});
}
}, []);
const popupOptions = useMemo(() => ({
maxWidth: 440,
onOptionChanged: onPopupOptionChanged,
}), [onPopupOptionChanged]);
const updateEndDate = useCallback((movie: MovieResource): void => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const { startDate } = formData;
if (startDate) {
const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
form.updateData('endDate', newEndDate);
}
}, []);
const onFormInitialized = useCallback((e: FormTypes.InitializedEvent) => {
const form = e.component;
formInstanceRef.current = form;
form.on('fieldDataChanged', (fieldEvent: FormTypes.FieldDataChangedEvent) => {
if (fieldEvent.dataField === 'startDate') {
const currentFormData = form.option('formData');
const movie = getMovieById(currentFormData.movieId);
if (movie) {
updateEndDate(movie);
}
}
});
}, [updateEndDate]);
const onMovieValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
const form = formInstanceRef.current;
const movie = getMovieById(e.value);
if (movie) {
form.updateData('director', movie.director);
updateEndDate(movie);
}
}, [updateEndDate]);
const movieInfoContainerRender = useCallback(
() => <MovieInfoContainer formInstanceRef={formInstanceRef} />,
[],
);
const onCustomEditorContentReady = useCallback((e: SelectBoxTypes.ContentReadyEvent) => {
e.component.option('stylingMode', getEditorStylingMode());
}, []);
const movieEditorOptions = useMemo(() => ({
items: moviesData,
displayExpr: 'text',
valueExpr: 'id',
stylingMode: getEditorStylingMode(),
onValueChanged: onMovieValueChanged,
onContentReady: onCustomEditorContentReady,
}), [onMovieValueChanged, onCustomEditorContentReady]);
const priceEditorOptions = useMemo(() => ({
items: [5, 10, 15, 20],
displayExpr: priceDisplayExpr,
stylingMode: getEditorStylingMode(),
onContentReady: onCustomEditorContentReady,
}), [onCustomEditorContentReady]);
return (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="day"
defaultCurrentDate={currentDate}
groups={groups}
height={600}
firstDayOfWeek={0}
startDayHour={9}
endDayHour={23}
showAllDayPanel={false}
crossScrollingEnabled={true}
cellDuration={20}
appointmentComponent={Appointment}
appointmentTooltipComponent={AppointmentTooltip}
>
<Editing
allowAdding={false}
popup={popupOptions}
>
<SchedulerForm onInitialized={onFormInitialized}>
<Item render={movieInfoContainerRender} />
<Item itemType="group" colCount={2} colCountByScreen={colCountByScreen}>
<Item
dataField="movieId"
editorType="dxSelectBox"
colSpan={1}
editorOptions={movieEditorOptions}
>
<Label>Movie</Label>
</Item>
<Item
dataField="price"
editorType="dxSelectBox"
colSpan={1}
editorOptions={priceEditorOptions}
>
<Label>Price</Label>
</Item>
</Item>
<Item itemType="group" name="startDateGroup" />
<Item itemType="group" name="endDateGroup" disabled={true} />
</SchedulerForm>
</Editing>
<Resource
dataSource={moviesData}
fieldExpr="movieId"
useColorAsDefault={true}
/>
<Resource
dataSource={theatreData}
fieldExpr="theatreId"
/>
</Scheduler>
);
};
export default App;
import React, { useCallback, useMemo, useRef } from 'react';
import Scheduler, {
Editing,
Resource,
Form as SchedulerForm,
Item,
Label,
} from 'devextreme-react/scheduler';
import { query } from 'devextreme-react/common/data';
import Appointment from './Appointment.js';
import AppointmentTooltip from './AppointmentTooltip.js';
import MovieInfoContainer from './MovieInfoContainer.js';
import { data, moviesData, theatreData } from './data.js';
const currentDate = new Date(2025, 3, 27);
const views = ['day', 'week', 'timelineDay'];
const groups = ['theatreId'];
const getMovieById = (id) =>
id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null;
const getEditorStylingMode = () => {
const isMaterialOrFluent = document.querySelector('.dx-theme-fluent, .dx-theme-material');
return isMaterialOrFluent ? 'filled' : 'outlined';
};
const priceDisplayExpr = (value) => `$${value}`;
const colCountByScreen = { xs: 2 };
const App = () => {
const formInstanceRef = useRef(null);
const onPopupOptionChanged = useCallback((e) => {
if (e.fullName === 'toolbarItems' && e.value) {
e.value.forEach((item, index) => {
if (item.shortcut === 'done' || item.shortcut === 'cancel') {
e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
}
});
}
}, []);
const popupOptions = useMemo(
() => ({
maxWidth: 440,
onOptionChanged: onPopupOptionChanged,
}),
[onPopupOptionChanged],
);
const updateEndDate = useCallback((movie) => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const { startDate } = formData;
if (startDate) {
const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
form.updateData('endDate', newEndDate);
}
}, []);
const onFormInitialized = useCallback(
(e) => {
const form = e.component;
formInstanceRef.current = form;
form.on('fieldDataChanged', (fieldEvent) => {
if (fieldEvent.dataField === 'startDate') {
const currentFormData = form.option('formData');
const movie = getMovieById(currentFormData.movieId);
if (movie) {
updateEndDate(movie);
}
}
});
},
[updateEndDate],
);
const onMovieValueChanged = useCallback(
(e) => {
const form = formInstanceRef.current;
const movie = getMovieById(e.value);
if (movie) {
form.updateData('director', movie.director);
updateEndDate(movie);
}
},
[updateEndDate],
);
const movieInfoContainerRender = useCallback(
() => <MovieInfoContainer formInstanceRef={formInstanceRef} />,
[],
);
const onCustomEditorContentReady = useCallback((e) => {
e.component.option('stylingMode', getEditorStylingMode());
}, []);
const movieEditorOptions = useMemo(
() => ({
items: moviesData,
displayExpr: 'text',
valueExpr: 'id',
stylingMode: getEditorStylingMode(),
onValueChanged: onMovieValueChanged,
onContentReady: onCustomEditorContentReady,
}),
[onMovieValueChanged, onCustomEditorContentReady],
);
const priceEditorOptions = useMemo(
() => ({
items: [5, 10, 15, 20],
displayExpr: priceDisplayExpr,
stylingMode: getEditorStylingMode(),
onContentReady: onCustomEditorContentReady,
}),
[onCustomEditorContentReady],
);
return (
<Scheduler
timeZone="America/Los_Angeles"
dataSource={data}
views={views}
defaultCurrentView="day"
defaultCurrentDate={currentDate}
groups={groups}
height={600}
firstDayOfWeek={0}
startDayHour={9}
endDayHour={23}
showAllDayPanel={false}
crossScrollingEnabled={true}
cellDuration={20}
appointmentComponent={Appointment}
appointmentTooltipComponent={AppointmentTooltip}
>
<Editing
allowAdding={false}
popup={popupOptions}
>
<SchedulerForm onInitialized={onFormInitialized}>
<Item render={movieInfoContainerRender} />
<Item
itemType="group"
colCount={2}
colCountByScreen={colCountByScreen}
>
<Item
dataField="movieId"
editorType="dxSelectBox"
colSpan={1}
editorOptions={movieEditorOptions}
>
<Label>Movie</Label>
</Item>
<Item
dataField="price"
editorType="dxSelectBox"
colSpan={1}
editorOptions={priceEditorOptions}
>
<Label>Price</Label>
</Item>
</Item>
<Item
itemType="group"
name="startDateGroup"
/>
<Item
itemType="group"
name="endDateGroup"
disabled={true}
/>
</SchedulerForm>
</Editing>
<Resource
dataSource={moviesData}
fieldExpr="movieId"
useColorAsDefault={true}
/>
<Resource
dataSource={theatreData}
fieldExpr="theatreId"
/>
</Scheduler>
);
};
export default App;
import React, { useMemo } from 'react';
import { query as Query } from 'devextreme-react/common/data';
import { formatDate } from 'devextreme-react/common/core/localization';
import { type SchedulerTypes } from 'devextreme-react/scheduler';
import { moviesData } from './data.ts';
const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];
type AppointmentProps = {
data: { targetedAppointmentData: SchedulerTypes.Appointment; }
};
const Appointment = (props: AppointmentProps) => {
const { targetedAppointmentData } = props.data;
const { movieId, price, displayStartDate, displayEndDate } = targetedAppointmentData;
const movieData = useMemo(() => getMovieById(movieId), [movieId]);
return (
<div className="movie-preview">
<div className="movie-preview-image">
<img src={movieData.image} alt={movieData.text} />
</div>
<div className="movie-details">
<div className="title">{movieData.text}</div>
<div>Ticket Price: <b>${price}</b></div>
<div>
{formatDate(displayStartDate, 'shortTime')}
{' - '}
{formatDate(displayEndDate, 'shortTime')}
</div>
</div>
</div>
);
};
export default Appointment;
import React, { useMemo } from 'react';
import { query as Query } from 'devextreme-react/common/data';
import { type SchedulerTypes } from 'devextreme-react/scheduler';
import { moviesData } from './data.ts';
const getMovieById = (id: number) => Query(moviesData).filter(['id', id]).toArray()[0];
type AppointmentProps = {
data: { appointmentData: SchedulerTypes.Appointment & { movieId: number } };
};
const AppointmentTooltip: React.FC<AppointmentProps> = ({ data }) => {
const { movieId } = data.appointmentData;
const movieData = useMemo(
() => getMovieById(movieId),
[movieId],
);
return (
<div className="movie-info">
<div className="movie-preview-image">
<img src={movieData.image} alt={movieData.text} />
</div>
<div className="movie-details">
<div className="title">
{movieData.text} ({movieData.year})
</div>
<div>
Director: {movieData.director}
</div>
<div>
Duration: {movieData.duration} minutes
</div>
</div>
</div>
);
};
export default AppointmentTooltip;
import React, { useState, useEffect } from 'react';
import { type FormTypes } from 'devextreme-react/form';
import { query } from 'devextreme-react/common/data';
import { moviesData, type MovieResource } from './data.ts';
type dxForm = NonNullable<FormTypes.InitializedEvent['component']>;
type MovieInfoContainerProps = {
formInstanceRef: React.RefObject<dxForm | null>;
};
const getMovieById = (id: number | undefined): MovieResource | null => id
? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null
: null;
const MovieInfoContainer: React.FC<MovieInfoContainerProps> = ({ formInstanceRef }) => {
const [movie, setMovie] = useState<MovieResource | null>(null);
useEffect(() => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const currentMovie = getMovieById(formData.movieId);
setMovie(currentMovie);
const handleFieldDataChanged = (e: FormTypes.FieldDataChangedEvent) => {
if (e.dataField === 'movieId') {
const updatedMovie = getMovieById(e.value);
setMovie(updatedMovie);
}
};
form.on('fieldDataChanged', handleFieldDataChanged);
return () => {
form.off('fieldDataChanged', handleFieldDataChanged);
};
}, [formInstanceRef]);
return (
<div className="movie-info-container">
{movie ? (
<div className="movie-info">
<div className="movie-preview-image">
<img src={movie.image} alt={movie.text} />
</div>
<div className="movie-details">
<div className="title">{movie.text} ({movie.year})</div>
<div>Director: {movie.director}</div>
<div>Duration: {movie.duration} minutes</div>
</div>
</div>
) : (
<div className="movie-info">
<div className="movie-preview-image" />
<div className="movie-details">
<div className="title">Select a movie</div>
</div>
</div>
)}
</div>
);
};
export default MovieInfoContainer;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { SchedulerTypes } from 'devextreme-react/scheduler';
export type Appointment = SchedulerTypes.Appointment & { theatreId: number; movieId: number; price: number; };
export 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: '#9FD89F',
}, {
id: 2,
text: 'Royal Wedding',
director: 'Stanley Donen',
year: 1951,
image: '../../../../images/movies/RoyalWedding.jpg',
duration: 93,
color: '#F1BBBC',
}, {
id: 3,
text: 'A Star Is Born',
director: 'William A. Wellman',
year: 1937,
image: '../../../../images/movies/AStartIsBorn.jpg',
duration: 111,
color: '#F9E2AE',
}, {
id: 4,
text: 'The Screaming Skull',
director: 'Alex Nicol',
year: 1958,
image: '../../../../images/movies/ScreamingSkull.jpg',
duration: 68,
color: '#EDBBE7',
}, {
id: 5,
text: "It's a Wonderful Life",
director: 'Frank Capra',
year: 1946,
image: '../../../../images/movies/ItsAWonderfulLife.jpg',
duration: 130,
color: '#B4D6FA',
}, {
id: 6,
text: 'City Lights',
director: 'Charlie Chaplin',
year: 1931,
image: '../../../../images/movies/CityLights.jpg',
duration: 87,
color: '#C6B1DE',
}];
export const theatreData: 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('2025-04-26T16:10:00.000Z'),
endDate: new Date('2025-04-26T18:01:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-26T18:30:00.000Z'),
endDate: new Date('2025-04-26T20:02:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-04-26T20:30:00.000Z'),
endDate: new Date('2025-04-26T22:21:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-26T23:00:00.000Z'),
endDate: new Date('2025-04-27T00:08:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T00:30:00.000Z'),
endDate: new Date('2025-04-27T02:03:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-04-27T02:30:00.000Z'),
endDate: new Date('2025-04-27T04:02:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T04:20:00.000Z'),
endDate: new Date('2025-04-27T05:53:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-27T16:10:00.000Z'),
endDate: new Date('2025-04-27T18:20:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-27T19:00:00.000Z'),
endDate: new Date('2025-04-27T20:33:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2025-04-27T21:00:00.000Z'),
endDate: new Date('2025-04-27T22:51:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-27T23:20:00.000Z'),
endDate: new Date('2025-04-28T00:28:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-04-28T01:00:00.000Z'),
endDate: new Date('2025-04-28T02:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 15,
startDate: new Date('2025-04-28T03:00:00.000Z'),
endDate: new Date('2025-04-28T04:33:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-28T04:50:00.000Z'),
endDate: new Date('2025-04-28T05:58:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-28T16:00:00.000Z'),
endDate: new Date('2025-04-28T17:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-28T18:00:00.000Z'),
endDate: new Date('2025-04-28T19:33:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-04-28T20:20:00.000Z'),
endDate: new Date('2025-04-28T22:11:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-04-28T22:45:00.000Z'),
endDate: new Date('2025-04-29T00:55:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-04-29T01:20:00.000Z'),
endDate: new Date('2025-04-29T02:28:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 20,
startDate: new Date('2025-04-29T03:00:00.000Z'),
endDate: new Date('2025-04-29T05:10:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-29T16:00:00.000Z'),
endDate: new Date('2025-04-29T17:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-29T18:00:00.000Z'),
endDate: new Date('2025-04-29T19:33:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-04-29T20:20:00.000Z'),
endDate: new Date('2025-04-29T22:11:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T22:45:00.000Z'),
endDate: new Date('2025-04-30T00:55:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-30T01:20:00.000Z'),
endDate: new Date('2025-04-30T02:28:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-04-30T03:00:00.000Z'),
endDate: new Date('2025-04-30T05:10:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-30T16:30:00.000Z'),
endDate: new Date('2025-04-30T18:03:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-30T18:30:00.000Z'),
endDate: new Date('2025-04-30T20:02:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2025-04-30T20:30:00.000Z'),
endDate: new Date('2025-04-30T22:21:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-30T23:00:00.000Z'),
endDate: new Date('2025-05-01T01:10:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-05-01T01:30:00.000Z'),
endDate: new Date('2025-05-01T02:38:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-05-01T03:20:00.000Z'),
endDate: new Date('2025-05-01T05:11:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-01T16:30:00.000Z'),
endDate: new Date('2025-05-01T18:03:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-05-01T18:30:00.000Z'),
endDate: new Date('2025-05-01T20:02:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-01T20:30:00.000Z'),
endDate: new Date('2025-05-01T22:21:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-01T23:00:00.000Z'),
endDate: new Date('2025-05-02T01:10:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-05-02T01:30:00.000Z'),
endDate: new Date('2025-05-02T02:38:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T03:20:00.000Z'),
endDate: new Date('2025-05-02T05:11:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-02T16:30:00.000Z'),
endDate: new Date('2025-05-02T18:03:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-02T18:30:00.000Z'),
endDate: new Date('2025-05-02T20:02:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T20:30:00.000Z'),
endDate: new Date('2025-05-02T22:21:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-02T23:00:00.000Z'),
endDate: new Date('2025-05-03T01:10:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-05-03T01:30:00.000Z'),
endDate: new Date('2025-05-03T02:38:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-05-03T03:20:00.000Z'),
endDate: new Date('2025-05-03T05:11:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-03T16:30:00.000Z'),
endDate: new Date('2025-05-03T18:03:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-03T18:30:00.000Z'),
endDate: new Date('2025-05-03T19:57:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-03T20:20:00.000Z'),
endDate: new Date('2025-05-03T22:11:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-03T23:00:00.000Z'),
endDate: new Date('2025-05-04T00:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-05-04T01:00:00.000Z'),
endDate: new Date('2025-05-04T02:33:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 20,
startDate: new Date('2025-05-04T03:00:00.000Z'),
endDate: new Date('2025-05-04T04:27:00.000Z'),
}, {
theatreId: 0,
movieId: 4,
price: 15,
startDate: new Date('2025-05-04T04:50:00.000Z'),
endDate: new Date('2025-05-04T05:58:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-04T16:30:00.000Z'),
endDate: new Date('2025-05-04T18:02:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-04T18:30:00.000Z'),
endDate: new Date('2025-05-04T20:03:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T20:30:00.000Z'),
endDate: new Date('2025-05-04T22:21:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T22:30:00.000Z'),
endDate: new Date('2025-05-05T00:21:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-05T00:30:00.000Z'),
endDate: new Date('2025-05-05T01:57:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-05T03:00:00.000Z'),
endDate: new Date('2025-05-05T05:10:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-05T16:00:00.000Z'),
endDate: new Date('2025-05-05T17:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-05T18:00:00.000Z'),
endDate: new Date('2025-05-05T19:33:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T20:00:00.000Z'),
endDate: new Date('2025-05-05T21:51:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T22:30:00.000Z'),
endDate: new Date('2025-05-06T00:21:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-06T00:30:00.000Z'),
endDate: new Date('2025-05-06T01:57:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-06T03:00:00.000Z'),
endDate: new Date('2025-05-06T05:10:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-06T16:00:00.000Z'),
endDate: new Date('2025-05-06T17:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-06T18:00:00.000Z'),
endDate: new Date('2025-05-06T19:33:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T20:00:00.000Z'),
endDate: new Date('2025-05-06T21:51:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T22:30:00.000Z'),
endDate: new Date('2025-05-07T00:21:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-07T00:30:00.000Z'),
endDate: new Date('2025-05-07T01:57:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-07T03:00:00.000Z'),
endDate: new Date('2025-05-07T05:10:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-07T16:00:00.000Z'),
endDate: new Date('2025-05-07T17:33:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-07T18:00:00.000Z'),
endDate: new Date('2025-05-07T19:32:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-07T20:00:00.000Z'),
endDate: new Date('2025-05-07T21:51:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-07T22:30:00.000Z'),
endDate: new Date('2025-05-08T00:40:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-08T01:00:00.000Z'),
endDate: new Date('2025-05-08T02:27:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-08T03:00:00.000Z'),
endDate: new Date('2025-05-08T04:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-08T16:00:00.000Z'),
endDate: new Date('2025-05-08T17:33:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-08T18:00:00.000Z'),
endDate: new Date('2025-05-08T19:32:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-08T20:00:00.000Z'),
endDate: new Date('2025-05-08T21:51:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-08T22:30:00.000Z'),
endDate: new Date('2025-05-09T00:40:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-09T01:00:00.000Z'),
endDate: new Date('2025-05-09T02:27:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-09T03:00:00.000Z'),
endDate: new Date('2025-05-09T04:32:00.000Z'),
}, {
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-09T16:00:00.000Z'),
endDate: new Date('2025-05-09T17:33:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-09T18:00:00.000Z'),
endDate: new Date('2025-05-09T19:32:00.000Z'),
}, {
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-09T20:00:00.000Z'),
endDate: new Date('2025-05-09T21:51:00.000Z'),
}, {
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-09T22:30:00.000Z'),
endDate: new Date('2025-05-10T00:40:00.000Z'),
}, {
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-10T01:00:00.000Z'),
endDate: new Date('2025-05-10T02:27:00.000Z'),
}, {
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-10T03:00:00.000Z'),
endDate: new Date('2025-05-10T04:32:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-04-26T16:10:00.000Z'),
endDate: new Date('2025-04-26T18:01:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-26T19:00:00.000Z'),
endDate: new Date('2025-04-26T20:32:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2025-04-26T21:00:00.000Z'),
endDate: new Date('2025-04-26T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-26T23:10:00.000Z'),
endDate: new Date('2025-04-27T00:18:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T00:30:00.000Z'),
endDate: new Date('2025-04-27T02:03:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-04-27T02:30:00.000Z'),
endDate: new Date('2025-04-27T04:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T04:20:00.000Z'),
endDate: new Date('2025-04-27T05:53:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-27T16:30:00.000Z'),
endDate: new Date('2025-04-27T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-27T18:30:00.000Z'),
endDate: new Date('2025-04-27T20:03:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-27T20:30:00.000Z'),
endDate: new Date('2025-04-27T22:40:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-27T23:00:00.000Z'),
endDate: new Date('2025-04-28T00:08:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-04-28T00:30:00.000Z'),
endDate: new Date('2025-04-28T02:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-04-28T02:40:00.000Z'),
endDate: new Date('2025-04-28T04:13:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-28T04:40:00.000Z'),
endDate: new Date('2025-04-28T05:48:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-28T16:30:00.000Z'),
endDate: new Date('2025-04-28T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-28T18:30:00.000Z'),
endDate: new Date('2025-04-28T20:03:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-28T20:30:00.000Z'),
endDate: new Date('2025-04-28T22:41:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-28T23:00:00.000Z'),
endDate: new Date('2025-04-29T01:10:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-04-29T01:30:00.000Z'),
endDate: new Date('2025-04-29T02:38:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-04-29T03:20:00.000Z'),
endDate: new Date('2025-04-29T05:30:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-29T16:30:00.000Z'),
endDate: new Date('2025-04-29T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-29T18:30:00.000Z'),
endDate: new Date('2025-04-29T20:03:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T20:30:00.000Z'),
endDate: new Date('2025-04-29T22:41:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T23:00:00.000Z'),
endDate: new Date('2025-04-30T01:10:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-30T01:30:00.000Z'),
endDate: new Date('2025-04-30T02:38:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-30T03:20:00.000Z'),
endDate: new Date('2025-04-30T05:30:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-30T16:10:00.000Z'),
endDate: new Date('2025-04-30T17:43:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-30T18:00:00.000Z'),
endDate: new Date('2025-04-30T19:32:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 5,
startDate: new Date('2025-04-30T20:10:00.000Z'),
endDate: new Date('2025-04-30T22:01:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-30T22:40:00.000Z'),
endDate: new Date('2025-05-01T00:50:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-05-01T01:20:00.000Z'),
endDate: new Date('2025-05-01T02:28:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2025-05-01T03:20:00.000Z'),
endDate: new Date('2025-05-01T05:11:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-01T17:00:00.000Z'),
endDate: new Date('2025-05-01T18:33:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-05-01T19:00:00.000Z'),
endDate: new Date('2025-05-01T20:32:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-01T21:00:00.000Z'),
endDate: new Date('2025-05-01T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-01T23:30:00.000Z'),
endDate: new Date('2025-05-02T01:40:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-05-02T02:00:00.000Z'),
endDate: new Date('2025-05-02T03:08:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-05-02T03:30:00.000Z'),
endDate: new Date('2025-05-02T05:50:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-02T17:00:00.000Z'),
endDate: new Date('2025-05-02T18:33:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-02T19:00:00.000Z'),
endDate: new Date('2025-05-02T20:32:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T21:00:00.000Z'),
endDate: new Date('2025-05-02T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-02T23:30:00.000Z'),
endDate: new Date('2025-05-03T01:40:00.000Z'),
}, {
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-05-03T02:00:00.000Z'),
endDate: new Date('2025-05-03T03:08:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-03T03:30:00.000Z'),
endDate: new Date('2025-05-03T05:50:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-03T17:00:00.000Z'),
endDate: new Date('2025-05-03T18:33:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-03T19:00:00.000Z'),
endDate: new Date('2025-05-03T20:27:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-03T21:00:00.000Z'),
endDate: new Date('2025-05-03T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-05-03T23:30:00.000Z'),
endDate: new Date('2025-05-04T01:02:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-04T01:30:00.000Z'),
endDate: new Date('2025-05-04T03:40:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 20,
startDate: new Date('2025-05-04T04:00:00.000Z'),
endDate: new Date('2025-05-04T05:27:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-04T16:30:00.000Z'),
endDate: new Date('2025-05-04T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2025-05-04T19:00:00.000Z'),
endDate: new Date('2025-05-04T20:27:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T21:00:00.000Z'),
endDate: new Date('2025-05-04T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T23:30:00.000Z'),
endDate: new Date('2025-05-05T01:21:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-05T01:30:00.000Z'),
endDate: new Date('2025-05-05T02:57:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-05T03:30:00.000Z'),
endDate: new Date('2025-05-05T05:03:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-05T16:30:00.000Z'),
endDate: new Date('2025-05-05T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2025-05-05T19:00:00.000Z'),
endDate: new Date('2025-05-05T20:27:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T21:00:00.000Z'),
endDate: new Date('2025-05-05T22:51:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-05-05T23:30:00.000Z'),
endDate: new Date('2025-05-06T01:03:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-06T01:30:00.000Z'),
endDate: new Date('2025-05-06T02:57:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-06T03:30:00.000Z'),
endDate: new Date('2025-05-06T05:03:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-06T16:30:00.000Z'),
endDate: new Date('2025-05-06T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-06T18:30:00.000Z'),
endDate: new Date('2025-05-06T20:03:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2025-05-06T21:00:00.000Z'),
endDate: new Date('2025-05-06T22:27:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T23:00:00.000Z'),
endDate: new Date('2025-05-07T00:51:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-07T01:10:00.000Z'),
endDate: new Date('2025-05-07T02:37:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-05-07T03:30:00.000Z'),
endDate: new Date('2025-05-07T05:40:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-07T16:30:00.000Z'),
endDate: new Date('2025-05-07T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-07T18:30:00.000Z'),
endDate: new Date('2025-05-07T20:02:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2025-05-07T21:00:00.000Z'),
endDate: new Date('2025-05-07T22:27:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-07T23:00:00.000Z'),
endDate: new Date('2025-05-08T00:51:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-08T01:10:00.000Z'),
endDate: new Date('2025-05-08T02:37:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-08T03:20:00.000Z'),
endDate: new Date('2025-05-08T05:30:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-08T16:30:00.000Z'),
endDate: new Date('2025-05-08T18:02:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-08T18:30:00.000Z'),
endDate: new Date('2025-05-08T20:02:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-08T20:30:00.000Z'),
endDate: new Date('2025-05-08T22:21:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-08T23:00:00.000Z'),
endDate: new Date('2025-05-09T01:10:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-09T01:30:00.000Z'),
endDate: new Date('2025-05-09T02:57:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-09T03:30:00.000Z'),
endDate: new Date('2025-05-09T05:03:00.000Z'),
}, {
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-09T16:30:00.000Z'),
endDate: new Date('2025-05-09T18:03:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-09T18:30:00.000Z'),
endDate: new Date('2025-05-09T20:02:00.000Z'),
}, {
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-09T20:30:00.000Z'),
endDate: new Date('2025-05-09T22:21:00.000Z'),
}, {
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-09T23:00:00.000Z'),
endDate: new Date('2025-05-10T01:10:00.000Z'),
}, {
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-10T01:30:00.000Z'),
endDate: new Date('2025-05-10T02:57:00.000Z'),
}, {
theatreId: 1,
movieId: 1,
price: 15,
startDate: new Date('2025-05-10T03:30:00.000Z'),
endDate: new Date('2025-05-10T05:02:00.000Z'),
},
];
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,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://cdn.jsdelivr.net/npm/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.7/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.24/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.64/dist/dx-gantt.js',
'inferno': 'npm:inferno@8.2.3/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@8.2.3/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'@preact/signals-core': 'npm:@preact/signals-core@1.8.0/dist/signals-core.min.js',
'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-react/common': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/common/core/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
window.process = {
env: {
NODE_ENV: 'production',
},
};
System.config(window.config);
// eslint-disable-next-line
const useTgzInCSB = ['openai'];
import React, { useMemo } from 'react';
import { query as Query } from 'devextreme-react/common/data';
import { formatDate } from 'devextreme-react/common/core/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, price, displayStartDate, displayEndDate,
} = targetedAppointmentData;
const movieData = useMemo(() => getMovieById(movieId), [movieId]);
return (
<div className="movie-preview">
<div className="movie-preview-image">
<img
src={movieData.image}
alt={movieData.text}
/>
</div>
<div className="movie-details">
<div className="title">{movieData.text}</div>
<div>
Ticket Price: <b>${price}</b>
</div>
<div>
{formatDate(displayStartDate, 'shortTime')}
{' - '}
{formatDate(displayEndDate, 'shortTime')}
</div>
</div>
</div>
);
};
export default Appointment;
import React, { useMemo } from 'react';
import { query as Query } from 'devextreme-react/common/data';
import { moviesData } from './data.js';
const getMovieById = (id) => Query(moviesData).filter(['id', id]).toArray()[0];
const AppointmentTooltip = ({ data }) => {
const { movieId } = data.appointmentData;
const movieData = useMemo(() => getMovieById(movieId), [movieId]);
return (
<div className="movie-info">
<div className="movie-preview-image">
<img
src={movieData.image}
alt={movieData.text}
/>
</div>
<div className="movie-details">
<div className="title">
{movieData.text} ({movieData.year})
</div>
<div>Director: {movieData.director}</div>
<div>Duration: {movieData.duration} minutes</div>
</div>
</div>
);
};
export default AppointmentTooltip;
import React, { useState, useEffect } from 'react';
import { query } from 'devextreme-react/common/data';
import { moviesData } from './data.js';
const getMovieById = (id) =>
id ? query(moviesData).filter(['id', '=', id]).toArray()[0] ?? null : null;
const MovieInfoContainer = ({ formInstanceRef }) => {
const [movie, setMovie] = useState(null);
useEffect(() => {
const form = formInstanceRef.current;
const formData = form.option('formData');
const currentMovie = getMovieById(formData.movieId);
setMovie(currentMovie);
const handleFieldDataChanged = (e) => {
if (e.dataField === 'movieId') {
const updatedMovie = getMovieById(e.value);
setMovie(updatedMovie);
}
};
form.on('fieldDataChanged', handleFieldDataChanged);
return () => {
form.off('fieldDataChanged', handleFieldDataChanged);
};
}, [formInstanceRef]);
return (
<div className="movie-info-container">
{movie ? (
<div className="movie-info">
<div className="movie-preview-image">
<img
src={movie.image}
alt={movie.text}
/>
</div>
<div className="movie-details">
<div className="title">
{movie.text} ({movie.year})
</div>
<div>Director: {movie.director}</div>
<div>Duration: {movie.duration} minutes</div>
</div>
</div>
) : (
<div className="movie-info">
<div className="movie-preview-image" />
<div className="movie-details">
<div className="title">Select a movie</div>
</div>
</div>
)}
</div>
);
};
export default MovieInfoContainer;
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: '#9FD89F',
},
{
id: 2,
text: 'Royal Wedding',
director: 'Stanley Donen',
year: 1951,
image: '../../../../images/movies/RoyalWedding.jpg',
duration: 93,
color: '#F1BBBC',
},
{
id: 3,
text: 'A Star Is Born',
director: 'William A. Wellman',
year: 1937,
image: '../../../../images/movies/AStartIsBorn.jpg',
duration: 111,
color: '#F9E2AE',
},
{
id: 4,
text: 'The Screaming Skull',
director: 'Alex Nicol',
year: 1958,
image: '../../../../images/movies/ScreamingSkull.jpg',
duration: 68,
color: '#EDBBE7',
},
{
id: 5,
text: "It's a Wonderful Life",
director: 'Frank Capra',
year: 1946,
image: '../../../../images/movies/ItsAWonderfulLife.jpg',
duration: 130,
color: '#B4D6FA',
},
{
id: 6,
text: 'City Lights',
director: 'Charlie Chaplin',
year: 1931,
image: '../../../../images/movies/CityLights.jpg',
duration: 87,
color: '#C6B1DE',
},
];
export const theatreData = [
{
text: 'Cinema Hall 1',
id: 0,
},
{
text: 'Cinema Hall 2',
id: 1,
},
];
export const data = [
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-04-26T16:10:00.000Z'),
endDate: new Date('2025-04-26T18:01:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-26T18:30:00.000Z'),
endDate: new Date('2025-04-26T20:02:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-04-26T20:30:00.000Z'),
endDate: new Date('2025-04-26T22:21:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-26T23:00:00.000Z'),
endDate: new Date('2025-04-27T00:08:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T00:30:00.000Z'),
endDate: new Date('2025-04-27T02:03:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-04-27T02:30:00.000Z'),
endDate: new Date('2025-04-27T04:02:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T04:20:00.000Z'),
endDate: new Date('2025-04-27T05:53:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-27T16:10:00.000Z'),
endDate: new Date('2025-04-27T18:20:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-27T19:00:00.000Z'),
endDate: new Date('2025-04-27T20:33:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2025-04-27T21:00:00.000Z'),
endDate: new Date('2025-04-27T22:51:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-27T23:20:00.000Z'),
endDate: new Date('2025-04-28T00:28:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-04-28T01:00:00.000Z'),
endDate: new Date('2025-04-28T02:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 15,
startDate: new Date('2025-04-28T03:00:00.000Z'),
endDate: new Date('2025-04-28T04:33:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-28T04:50:00.000Z'),
endDate: new Date('2025-04-28T05:58:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-28T16:00:00.000Z'),
endDate: new Date('2025-04-28T17:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-28T18:00:00.000Z'),
endDate: new Date('2025-04-28T19:33:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-04-28T20:20:00.000Z'),
endDate: new Date('2025-04-28T22:11:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-04-28T22:45:00.000Z'),
endDate: new Date('2025-04-29T00:55:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-04-29T01:20:00.000Z'),
endDate: new Date('2025-04-29T02:28:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 20,
startDate: new Date('2025-04-29T03:00:00.000Z'),
endDate: new Date('2025-04-29T05:10:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-29T16:00:00.000Z'),
endDate: new Date('2025-04-29T17:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-29T18:00:00.000Z'),
endDate: new Date('2025-04-29T19:33:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-04-29T20:20:00.000Z'),
endDate: new Date('2025-04-29T22:11:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T22:45:00.000Z'),
endDate: new Date('2025-04-30T00:55:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-04-30T01:20:00.000Z'),
endDate: new Date('2025-04-30T02:28:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-04-30T03:00:00.000Z'),
endDate: new Date('2025-04-30T05:10:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-04-30T16:30:00.000Z'),
endDate: new Date('2025-04-30T18:03:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-04-30T18:30:00.000Z'),
endDate: new Date('2025-04-30T20:02:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 5,
startDate: new Date('2025-04-30T20:30:00.000Z'),
endDate: new Date('2025-04-30T22:21:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-04-30T23:00:00.000Z'),
endDate: new Date('2025-05-01T01:10:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 5,
startDate: new Date('2025-05-01T01:30:00.000Z'),
endDate: new Date('2025-05-01T02:38:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-05-01T03:20:00.000Z'),
endDate: new Date('2025-05-01T05:11:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-01T16:30:00.000Z'),
endDate: new Date('2025-05-01T18:03:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 10,
startDate: new Date('2025-05-01T18:30:00.000Z'),
endDate: new Date('2025-05-01T20:02:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-01T20:30:00.000Z'),
endDate: new Date('2025-05-01T22:21:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-01T23:00:00.000Z'),
endDate: new Date('2025-05-02T01:10:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-05-02T01:30:00.000Z'),
endDate: new Date('2025-05-02T02:38:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T03:20:00.000Z'),
endDate: new Date('2025-05-02T05:11:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-02T16:30:00.000Z'),
endDate: new Date('2025-05-02T18:03:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-02T18:30:00.000Z'),
endDate: new Date('2025-05-02T20:02:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T20:30:00.000Z'),
endDate: new Date('2025-05-02T22:21:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-02T23:00:00.000Z'),
endDate: new Date('2025-05-03T01:10:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 10,
startDate: new Date('2025-05-03T01:30:00.000Z'),
endDate: new Date('2025-05-03T02:38:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 15,
startDate: new Date('2025-05-03T03:20:00.000Z'),
endDate: new Date('2025-05-03T05:11:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-03T16:30:00.000Z'),
endDate: new Date('2025-05-03T18:03:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-03T18:30:00.000Z'),
endDate: new Date('2025-05-03T19:57:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-03T20:20:00.000Z'),
endDate: new Date('2025-05-03T22:11:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-03T23:00:00.000Z'),
endDate: new Date('2025-05-04T00:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 10,
startDate: new Date('2025-05-04T01:00:00.000Z'),
endDate: new Date('2025-05-04T02:33:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 20,
startDate: new Date('2025-05-04T03:00:00.000Z'),
endDate: new Date('2025-05-04T04:27:00.000Z'),
},
{
theatreId: 0,
movieId: 4,
price: 15,
startDate: new Date('2025-05-04T04:50:00.000Z'),
endDate: new Date('2025-05-04T05:58:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-04T16:30:00.000Z'),
endDate: new Date('2025-05-04T18:02:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-04T18:30:00.000Z'),
endDate: new Date('2025-05-04T20:03:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T20:30:00.000Z'),
endDate: new Date('2025-05-04T22:21:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T22:30:00.000Z'),
endDate: new Date('2025-05-05T00:21:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-05T00:30:00.000Z'),
endDate: new Date('2025-05-05T01:57:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-05T03:00:00.000Z'),
endDate: new Date('2025-05-05T05:10:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-05T16:00:00.000Z'),
endDate: new Date('2025-05-05T17:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-05T18:00:00.000Z'),
endDate: new Date('2025-05-05T19:33:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T20:00:00.000Z'),
endDate: new Date('2025-05-05T21:51:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T22:30:00.000Z'),
endDate: new Date('2025-05-06T00:21:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-06T00:30:00.000Z'),
endDate: new Date('2025-05-06T01:57:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-06T03:00:00.000Z'),
endDate: new Date('2025-05-06T05:10:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-06T16:00:00.000Z'),
endDate: new Date('2025-05-06T17:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-06T18:00:00.000Z'),
endDate: new Date('2025-05-06T19:33:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T20:00:00.000Z'),
endDate: new Date('2025-05-06T21:51:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T22:30:00.000Z'),
endDate: new Date('2025-05-07T00:21:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-07T00:30:00.000Z'),
endDate: new Date('2025-05-07T01:57:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 15,
startDate: new Date('2025-05-07T03:00:00.000Z'),
endDate: new Date('2025-05-07T05:10:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-07T16:00:00.000Z'),
endDate: new Date('2025-05-07T17:33:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-07T18:00:00.000Z'),
endDate: new Date('2025-05-07T19:32:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-07T20:00:00.000Z'),
endDate: new Date('2025-05-07T21:51:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-07T22:30:00.000Z'),
endDate: new Date('2025-05-08T00:40:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-08T01:00:00.000Z'),
endDate: new Date('2025-05-08T02:27:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-08T03:00:00.000Z'),
endDate: new Date('2025-05-08T04:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-08T16:00:00.000Z'),
endDate: new Date('2025-05-08T17:33:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-08T18:00:00.000Z'),
endDate: new Date('2025-05-08T19:32:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-08T20:00:00.000Z'),
endDate: new Date('2025-05-08T21:51:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-08T22:30:00.000Z'),
endDate: new Date('2025-05-09T00:40:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-09T01:00:00.000Z'),
endDate: new Date('2025-05-09T02:27:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-09T03:00:00.000Z'),
endDate: new Date('2025-05-09T04:32:00.000Z'),
},
{
theatreId: 0,
movieId: 2,
price: 5,
startDate: new Date('2025-05-09T16:00:00.000Z'),
endDate: new Date('2025-05-09T17:33:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 5,
startDate: new Date('2025-05-09T18:00:00.000Z'),
endDate: new Date('2025-05-09T19:32:00.000Z'),
},
{
theatreId: 0,
movieId: 3,
price: 10,
startDate: new Date('2025-05-09T20:00:00.000Z'),
endDate: new Date('2025-05-09T21:51:00.000Z'),
},
{
theatreId: 0,
movieId: 5,
price: 10,
startDate: new Date('2025-05-09T22:30:00.000Z'),
endDate: new Date('2025-05-10T00:40:00.000Z'),
},
{
theatreId: 0,
movieId: 6,
price: 15,
startDate: new Date('2025-05-10T01:00:00.000Z'),
endDate: new Date('2025-05-10T02:27:00.000Z'),
},
{
theatreId: 0,
movieId: 1,
price: 15,
startDate: new Date('2025-05-10T03:00:00.000Z'),
endDate: new Date('2025-05-10T04:32:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-04-26T16:10:00.000Z'),
endDate: new Date('2025-04-26T18:01:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-26T19:00:00.000Z'),
endDate: new Date('2025-04-26T20:32:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2025-04-26T21:00:00.000Z'),
endDate: new Date('2025-04-26T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-26T23:10:00.000Z'),
endDate: new Date('2025-04-27T00:18:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T00:30:00.000Z'),
endDate: new Date('2025-04-27T02:03:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-04-27T02:30:00.000Z'),
endDate: new Date('2025-04-27T04:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-04-27T04:20:00.000Z'),
endDate: new Date('2025-04-27T05:53:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-27T16:30:00.000Z'),
endDate: new Date('2025-04-27T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-27T18:30:00.000Z'),
endDate: new Date('2025-04-27T20:03:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-27T20:30:00.000Z'),
endDate: new Date('2025-04-27T22:40:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-27T23:00:00.000Z'),
endDate: new Date('2025-04-28T00:08:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-04-28T00:30:00.000Z'),
endDate: new Date('2025-04-28T02:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-04-28T02:40:00.000Z'),
endDate: new Date('2025-04-28T04:13:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-28T04:40:00.000Z'),
endDate: new Date('2025-04-28T05:48:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-28T16:30:00.000Z'),
endDate: new Date('2025-04-28T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-28T18:30:00.000Z'),
endDate: new Date('2025-04-28T20:03:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-28T20:30:00.000Z'),
endDate: new Date('2025-04-28T22:41:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-28T23:00:00.000Z'),
endDate: new Date('2025-04-29T01:10:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-04-29T01:30:00.000Z'),
endDate: new Date('2025-04-29T02:38:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-04-29T03:20:00.000Z'),
endDate: new Date('2025-04-29T05:30:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-29T16:30:00.000Z'),
endDate: new Date('2025-04-29T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-29T18:30:00.000Z'),
endDate: new Date('2025-04-29T20:03:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T20:30:00.000Z'),
endDate: new Date('2025-04-29T22:41:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-29T23:00:00.000Z'),
endDate: new Date('2025-04-30T01:10:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-04-30T01:30:00.000Z'),
endDate: new Date('2025-04-30T02:38:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-04-30T03:20:00.000Z'),
endDate: new Date('2025-04-30T05:30:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-04-30T16:10:00.000Z'),
endDate: new Date('2025-04-30T17:43:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-04-30T18:00:00.000Z'),
endDate: new Date('2025-04-30T19:32:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 5,
startDate: new Date('2025-04-30T20:10:00.000Z'),
endDate: new Date('2025-04-30T22:01:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-04-30T22:40:00.000Z'),
endDate: new Date('2025-05-01T00:50:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 5,
startDate: new Date('2025-05-01T01:20:00.000Z'),
endDate: new Date('2025-05-01T02:28:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 15,
startDate: new Date('2025-05-01T03:20:00.000Z'),
endDate: new Date('2025-05-01T05:11:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-01T17:00:00.000Z'),
endDate: new Date('2025-05-01T18:33:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-05-01T19:00:00.000Z'),
endDate: new Date('2025-05-01T20:32:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-01T21:00:00.000Z'),
endDate: new Date('2025-05-01T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-01T23:30:00.000Z'),
endDate: new Date('2025-05-02T01:40:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-05-02T02:00:00.000Z'),
endDate: new Date('2025-05-02T03:08:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-05-02T03:30:00.000Z'),
endDate: new Date('2025-05-02T05:50:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-02T17:00:00.000Z'),
endDate: new Date('2025-05-02T18:33:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-02T19:00:00.000Z'),
endDate: new Date('2025-05-02T20:32:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-02T21:00:00.000Z'),
endDate: new Date('2025-05-02T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-02T23:30:00.000Z'),
endDate: new Date('2025-05-03T01:40:00.000Z'),
},
{
theatreId: 1,
movieId: 4,
price: 10,
startDate: new Date('2025-05-03T02:00:00.000Z'),
endDate: new Date('2025-05-03T03:08:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-03T03:30:00.000Z'),
endDate: new Date('2025-05-03T05:50:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-03T17:00:00.000Z'),
endDate: new Date('2025-05-03T18:33:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-03T19:00:00.000Z'),
endDate: new Date('2025-05-03T20:27:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-03T21:00:00.000Z'),
endDate: new Date('2025-05-03T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 10,
startDate: new Date('2025-05-03T23:30:00.000Z'),
endDate: new Date('2025-05-04T01:02:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-04T01:30:00.000Z'),
endDate: new Date('2025-05-04T03:40:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 20,
startDate: new Date('2025-05-04T04:00:00.000Z'),
endDate: new Date('2025-05-04T05:27:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-04T16:30:00.000Z'),
endDate: new Date('2025-05-04T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2025-05-04T19:00:00.000Z'),
endDate: new Date('2025-05-04T20:27:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T21:00:00.000Z'),
endDate: new Date('2025-05-04T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-04T23:30:00.000Z'),
endDate: new Date('2025-05-05T01:21:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-05T01:30:00.000Z'),
endDate: new Date('2025-05-05T02:57:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-05T03:30:00.000Z'),
endDate: new Date('2025-05-05T05:03:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-05T16:30:00.000Z'),
endDate: new Date('2025-05-05T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 5,
startDate: new Date('2025-05-05T19:00:00.000Z'),
endDate: new Date('2025-05-05T20:27:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-05T21:00:00.000Z'),
endDate: new Date('2025-05-05T22:51:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 10,
startDate: new Date('2025-05-05T23:30:00.000Z'),
endDate: new Date('2025-05-06T01:03:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-06T01:30:00.000Z'),
endDate: new Date('2025-05-06T02:57:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-06T03:30:00.000Z'),
endDate: new Date('2025-05-06T05:03:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-06T16:30:00.000Z'),
endDate: new Date('2025-05-06T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-06T18:30:00.000Z'),
endDate: new Date('2025-05-06T20:03:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2025-05-06T21:00:00.000Z'),
endDate: new Date('2025-05-06T22:27:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-06T23:00:00.000Z'),
endDate: new Date('2025-05-07T00:51:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-07T01:10:00.000Z'),
endDate: new Date('2025-05-07T02:37:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 20,
startDate: new Date('2025-05-07T03:30:00.000Z'),
endDate: new Date('2025-05-07T05:40:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-07T16:30:00.000Z'),
endDate: new Date('2025-05-07T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-07T18:30:00.000Z'),
endDate: new Date('2025-05-07T20:02:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 10,
startDate: new Date('2025-05-07T21:00:00.000Z'),
endDate: new Date('2025-05-07T22:27:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-07T23:00:00.000Z'),
endDate: new Date('2025-05-08T00:51:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-08T01:10:00.000Z'),
endDate: new Date('2025-05-08T02:37:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 15,
startDate: new Date('2025-05-08T03:20:00.000Z'),
endDate: new Date('2025-05-08T05:30:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-08T16:30:00.000Z'),
endDate: new Date('2025-05-08T18:02:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-08T18:30:00.000Z'),
endDate: new Date('2025-05-08T20:02:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-08T20:30:00.000Z'),
endDate: new Date('2025-05-08T22:21:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-08T23:00:00.000Z'),
endDate: new Date('2025-05-09T01:10:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-09T01:30:00.000Z'),
endDate: new Date('2025-05-09T02:57:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 15,
startDate: new Date('2025-05-09T03:30:00.000Z'),
endDate: new Date('2025-05-09T05:03:00.000Z'),
},
{
theatreId: 1,
movieId: 2,
price: 5,
startDate: new Date('2025-05-09T16:30:00.000Z'),
endDate: new Date('2025-05-09T18:03:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 5,
startDate: new Date('2025-05-09T18:30:00.000Z'),
endDate: new Date('2025-05-09T20:02:00.000Z'),
},
{
theatreId: 1,
movieId: 3,
price: 10,
startDate: new Date('2025-05-09T20:30:00.000Z'),
endDate: new Date('2025-05-09T22:21:00.000Z'),
},
{
theatreId: 1,
movieId: 5,
price: 10,
startDate: new Date('2025-05-09T23:00:00.000Z'),
endDate: new Date('2025-05-10T01:10:00.000Z'),
},
{
theatreId: 1,
movieId: 6,
price: 15,
startDate: new Date('2025-05-10T01:30:00.000Z'),
endDate: new Date('2025-05-10T02:57:00.000Z'),
},
{
theatreId: 1,
movieId: 1,
price: 15,
startDate: new Date('2025-05-10T03:30:00.000Z'),
endDate: new Date('2025-05-10T05:02:00.000Z'),
},
];
<!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/25.2.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.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-scheduler-work-space-week .dx-scheduler-date-table {
width: 3500px;
}
.dx-scheduler-timeline-day .dx-scheduler-date-table {
width: 3500px;
}
.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
padding: 12px;
}
.movie-preview-image {
max-height: 80px;
max-width: 80px;
min-height: 60px;
min-width: 60px;
border-radius: 2px;
overflow: hidden;
}
.movie-preview-image img {
width: 100%;
position: relative;
top: -25%;
pointer-events: none;
}
.movie-preview {
display: flex;
gap: 8px;
max-height: 100%;
white-space: normal;
}
.movie-preview>.movie-details {
font-size: 12px;
color: #242424;
}
.movie-preview>.movie-details>.title {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.movie-info-container {
border-radius: 8px;
padding-bottom: 8px;
}
.movie-info {
display: flex;
gap: 12px;
}
.dx-theme-material .movie-info {
gap: 16px;
}
.movie-info .movie-preview-image {
border: 1px solid var(--dx-color-border);
}
.movie-info .movie-details {
text-align: left;
}
.movie-info .movie-details>.title {
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
}
.dx-scheduler-form-end-date-group.dx-field-item {
padding-bottom: 12px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
.dx-scheduler-appointment::before {
opacity: 0.26 !important;
}
You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):
-
Appointment rectangle: appointmentRender/appointmentComponent / views[].appointmentRender/views[].appointmentComponent
-
Tooltip: appointmentTooltipRender/appointmentTooltipComponent / views[].appointmentTooltipRender/views[].appointmentTooltipComponent.
Image Source: Wikimedia Commons