Angular Scheduler - Templates

The following DevExtreme Scheduler properties can be used to specify custom templates (both globally and for individual views):

Appointment rectangle: appointmentTemplate / views[].appointmentTemplate
Tooltip: appointmentTooltipTemplate / views[].appointmentTooltipTemplate.

To customize our built-in Appointment Detail form, use the onAppointmentFormOpening handler. In this demo, this handler adds custom fields to the Appointment Detail form.

Image Source: Wikimedia Commons

www.wikipedia.org

Backend API

<div class="long-title"> <h3>DXCinema Show Times</h3> </div> <dx-scheduler timeZone="America/Los_Angeles" id="scheduler" [dataSource]="data" [views]="['day', 'week', 'timelineDay']" currentView="day" [firstDayOfWeek]="0" [startDayHour]="9" [endDayHour]="23" [showAllDayPanel]="false" [groups]="['theatreId']" [currentDate]="currentDate" [crossScrollingEnabled]="true" [cellDuration]="20" [height]="600" appointmentTemplate="appointment-template" appointmentTooltipTemplate="tooltip-template" (onAppointmentFormOpening)="onAppointmentFormOpening($event)" > <dxo-editing [allowAdding]="false"></dxo-editing> <dxi-resource fieldExpr="movieId" [useColorAsDefault]="true" [dataSource]="moviesData" > </dxi-resource> <dxi-resource fieldExpr="theatreId" [dataSource]="theatreData"> </dxi-resource> <div *dxTemplate="let model of 'appointment-template'"> <div class="showtime-preview"> <div>{{ (getMovieById | apply : model.appointmentData.movieId : this).text }}</div> <div >Ticket Price: <strong>{{ "$" + model.targetedAppointmentData.price }}</strong> </div> <div class="dropdown-appointment-dates"> {{ (model.targetedAppointmentData.displayStartDate | date : "shortTime") + " - " + (model.targetedAppointmentData.displayEndDate | date : "shortTime") }} </div> </div> </div> <div *dxTemplate="let model of 'tooltip-template'"> <ng-container *ngIf="getMovieById | apply : model.appointmentData.movieId as movie" > <div class="movie-tooltip"> <img [src]="movie.image" /> <div class="movie-info"> <div class="movie-title"> {{ movie.text + " (" + movie.year + ")" }} </div> <div> {{ "Director: " + movie.director }} </div> <div> {{ "Duration: " + movie.duration + " minutes" }} </div> </div> </div> </ng-container> </div> </dx-scheduler>

import { NgModule, Component, ViewChild, enableProdMode, Pipe, PipeTransform, } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxTemplateModule } from 'devextreme-angular'; import { query as Query } from 'devextreme-angular/common/data'; import { DxSchedulerModule, DxSchedulerComponent, DxSchedulerTypes } from 'devextreme-angular/ui/scheduler'; import { Service, MovieData, TheatreData, Data, } from './app.service'; @Pipe({ name: 'apply' }) export class ApplyPipe<TArgs, TReturn> implements PipeTransform { transform(func: ((...args: TArgs[]) => TReturn), ...args: TArgs[]): TReturn { return func(...args); } } if (!/localhost/.test(document.location.host)) { enableProdMode(); } let modulePrefix = ''; // @ts-ignore if (window && window.config?.packageConfigPaths) { modulePrefix = '/app'; } @Component({ selector: 'demo-app', templateUrl: `app/app.component.html`, styleUrls: [`app/app.component.css`], providers: [Service], }) export class AppComponent { @ViewChild(DxSchedulerComponent, { static: false }) scheduler: DxSchedulerComponent; data: Data[]; currentDate: Date = new Date(2025, 3, 27); moviesData: MovieData[]; theatreData: TheatreData[]; constructor(service: Service) { this.data = service.getData(); this.moviesData = service.getMoviesData(); this.theatreData = service.getTheatreData(); } onAppointmentFormOpening = (data: DxSchedulerTypes.AppointmentFormOpeningEvent) => { const that = this; const form = data.form; let movieInfo = that.getMovieById(data.appointmentData.movieId) || {}; let startDate = data.appointmentData.startDate; form.option('items', [{ label: { text: 'Movie', }, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: that.moviesData, displayExpr: 'text', valueExpr: 'id', onValueChanged({ value }) { movieInfo = that.getMovieById(value); form.updateData('director', movieInfo.director); 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({ value }) { form.updateData('endDate', new Date((value 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: string) { return `$${itemData}`; }, }, }]); }; getMovieById = (id: string) => Query(this.moviesData).filter(['id', '=', id]).toArray()[0]; } @NgModule({ imports: [ BrowserModule, DxSchedulerModule, DxTemplateModule, ], declarations: [AppComponent, ApplyPipe], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

::ng-deep .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { padding: 14px; } ::ng-deep .showtime-preview > div:first-child { font-size: 12px; white-space: normal; } ::ng-deep .showtime-preview > div:not(:first-child) { font-size: 11px; white-space: normal; } ::ng-deep .movie-tooltip .movie-info { display: inline-block; margin-left: 10px; vertical-align: top; text-align: left; } ::ng-deep .movie-tooltip img { height: 80px; margin-bottom: 10px; } ::ng-deep .movie-tooltip .movie-title { font-size: 1.5em; line-height: 40px; } ::ng-deep .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; }

import { Injectable } from '@angular/core'; export class MovieData { id: number; text: string; director: string; year: number; image: string; duration: number; color: string; } export class TheatreData { text: string; id: number; } export class Data { theatreId: number; movieId: number; price: number; startDate: Date; endDate: Date; } const moviesData: MovieData[] = [{ 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', }]; const theatreData: TheatreData[] = [{ text: 'Cinema Hall 1', id: 0, }, { text: 'Cinema Hall 2', id: 1, }, ]; const data: 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'), }, ]; @Injectable() export class Service { getTheatreData() { return theatreData; } getMoviesData() { return moviesData; } getData() { return data; } }

// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ const componentNames = [ 'accordion', 'action-sheet', 'autocomplete', 'bar-gauge', 'box', 'bullet', 'button-group', 'button', 'calendar', 'card-view', 'chart', 'chat', 'check-box', 'circular-gauge', 'color-box', 'context-menu', 'data-grid', 'date-box', 'date-range-box', 'defer-rendering', 'diagram', 'draggable', 'drawer', 'drop-down-box', 'drop-down-button', 'file-manager', 'file-uploader', 'filter-builder', 'form', 'funnel', 'gallery', 'gantt', 'html-editor', 'linear-gauge', 'list', 'load-indicator', 'load-panel', 'lookup', 'map', 'menu', 'multi-view', 'nested', 'number-box', 'pagination', 'pie-chart', 'pivot-grid-field-chooser', 'pivot-grid', 'polar-chart', 'popover', 'popup', 'progress-bar', 'radio-group', 'range-selector', 'range-slider', 'recurrence-editor', 'resizable', 'responsive-box', 'sankey', 'scheduler', 'scroll-view', 'select-box', 'slider', 'sortable', 'sparkline', 'speed-dial-action', 'splitter', 'stepper', 'switch', 'tab-panel', 'tabs', 'tag-box', 'text-area', 'text-box', 'tile-view', 'toast', 'toolbar', 'tooltip', 'tree-list', 'tree-map', 'tree-view', 'validation-group', 'validation-summary', 'validator', 'vector-map', ]; window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, '@angular/platform-browser-dynamic': { 'esModule': true, }, '@angular/platform-browser': { 'esModule': true, }, '@angular/core': { 'esModule': true, }, '@angular/common': { 'esModule': true, }, '@angular/common/http': { 'esModule': true, }, '@angular/animations': { 'esModule': true, }, '@angular/forms': { 'esModule': true, }, 'openai': { 'esModule': true, }, }, paths: { 'npm:': 'https://cdn.jsdelivr.net/npm/', 'bundles:': '../../../../bundles/', 'externals:': '../../../../bundles/externals/', }, 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', /* @angular */ '@angular/compiler': 'bundles:@angular/compiler.umd.js', '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js', '@angular/core': 'bundles:@angular/core.umd.js', '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js', '@angular/common': 'bundles:@angular/common.umd.js', '@angular/common/http': 'bundles:@angular/common-http.umd.js', '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js', '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js', '@angular/forms': 'bundles:@angular/forms.umd.js', /* devextreme */ 'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.6/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.24', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.64', /* devextreme-angular umd maps */ 'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js', 'devextreme-angular/common/ai-integration': 'bundles:devextreme-angular/devextreme-angular-common-ai-integration.umd.js', 'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js', 'devextreme-angular/common/charts': 'bundles:devextreme-angular/devextreme-angular-common-charts.umd.js', 'devextreme-angular/common/core/animation': 'bundles:devextreme-angular/devextreme-angular-common-core-animation.umd.js', 'devextreme-angular/common/core/environment': 'bundles:devextreme-angular/devextreme-angular-common-core-environment.umd.js', 'devextreme-angular/common/core/events': 'bundles:devextreme-angular/devextreme-angular-common-core-events.umd.js', 'devextreme-angular/common/core/localization': 'bundles:devextreme-angular/devextreme-angular-common-core-localization.umd.js', 'devextreme-angular/common/core': 'bundles:devextreme-angular/devextreme-angular-common-core.umd.js', 'devextreme-angular/common/data/custom-store': 'bundles:devextreme-angular/devextreme-angular-common-data-custom-store.umd.js', 'devextreme-angular/common/data': 'bundles:devextreme-angular/devextreme-angular-common-data.umd.js', 'devextreme-angular/common/export/excel': 'bundles:devextreme-angular/devextreme-angular-common-export-excel.umd.js', 'devextreme-angular/common/export/pdf': 'bundles:devextreme-angular/devextreme-angular-common-export-pdf.umd.js', 'devextreme-angular/common/export': 'bundles:devextreme-angular/devextreme-angular-common-export.umd.js', 'devextreme-angular/common/grids': 'bundles:devextreme-angular/devextreme-angular-common-grids.umd.js', 'devextreme-angular/common': 'bundles:devextreme-angular/devextreme-angular-common.umd.js', 'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js', 'devextreme-angular/core/tokens': 'bundles:devextreme-angular/devextreme-angular-core-tokens.umd.js', ...componentNames.reduce((acc, name) => { acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`; acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`; return acc; }, {}), 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.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', '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', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/common/core/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devexpress-diagram@2.2.24/package.json', 'npm:devexpress-gantt@4.1.64/package.json', ], }; System.config(window.config); // System.import('@angular/compiler').catch(console.error.bind(console)); // eslint-disable-next-line const useTgzInCSB = ['openai']; let packagesInfo = { "@angular/core": { "version": "17.3.12" }, "core-js": { "version": "2.6.12" }, "typescript": { "version": "5.4.5" }, "zone.js": { "version": "0.14.10" } };

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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.1.7/css/dx.light.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/zone.js@0.14.10/bundles/zone.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>