Your search did not match any results.

Custom Templates

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

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

www.wikipedia.org
Backend API
@model DevExtreme.MVC.Demos.ViewModels.SchedulerViewModel <div class="long-title"><h3>DXCinema Show Times</h3></div> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.CinemaData) .TimeZone("America/Los_Angeles") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(new[] { SchedulerViewType.Day, SchedulerViewType.Week, SchedulerViewType.TimelineDay }) .CurrentView(SchedulerViewType.Day) .CurrentDate(new DateTime(2021, 4, 27)) .FirstDayOfWeek(FirstDayOfWeek.Sunday) .StartDayHour(9) .EndDayHour(23) .ShowAllDayPanel(false) .Height(600) .Groups(new[] { "TheatreId" }) .CrossScrollingEnabled(true) .CellDuration(20) .Editing(e => e.AllowAdding(false)) .Resources(res => { res.Add() .FieldExpr("MovieId") .AllowMultiple(false) .UseColorAsDefault(true) .DataSource(Model.Movies) .ColorExpr("Color") .ValueExpr("ID"); res.Add() .FieldExpr("TheatreId") .Label("Text") .DataSource(Model.Theatres) .DisplayExpr("Text") .ValueExpr("ID"); }) .AppointmentTooltipTemplate(@<text> @(Html.Partial("_AppointmentTooltipTemplate")) </text>) .AppointmentTemplate(@<text> <% var movie = getMovieById(targetedAppointmentData.MovieId); %> <div class="showtime-preview"> <div><%- movie.Text %></div> <div> Ticket Price: <strong>$<%- targetedAppointmentData.Price %></strong> </div> <div> <%- formatTime(new Date(targetedAppointmentData.displayStartDate)) %> - <%- formatTime(new Date(targetedAppointmentData.displayEndDate)) %> </div> </div> </text>) .OnAppointmentFormOpening("appointmentForm_created") ) <script> var formatTime = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "numeric" }).format; var moviesData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Movies)); function getSchedulerInstance() { return $("#scheduler").dxScheduler("instance"); } function getMovieById(id) { return DevExpress.data.query(moviesData) .filter("ID", id) .toArray()[0]; } function appointmentForm_created(data) { var form = data.form, movie = getMovieById(data.appointmentData.MovieId) || {}, startDate = data.appointmentData.StartDate; form.option("items", [{ label: { text: "Movie" }, editorType: "dxSelectBox", dataField: "MovieId", editorOptions: { dataSource: moviesData, displayExpr: "Text", valueExpr: "ID", onValueChanged: function(args) { movie = getMovieById(args.value); form.updateData("director", movie.Director); form.updateData("endDate", new Date(startDate.getTime() + 60 * 1000 * movie.Duration)); } }, }, { label: { text: "Director" }, name: "Director", editorType: "dxTextBox", editorOptions: { value: movie.Director, readOnly: true } }, { dataField: "StartDate", editorType: "dxDateBox", editorOptions: { width: "100%", type: "datetime", onValueChanged: function(args) { startDate = new Date(args.value); form.updateData("endDate", new Date(startDate.getTime() + 60 * 1000 * movie.Duration)); } } }, { name: "EndDate", dataField: "EndDate", editorType: "dxDateBox", editorOptions: { width: "100%", type: "datetime", readOnly: true } }, { dataField: "Price", editorType: "dxRadioGroup", editorOptions: { dataSource: [5, 10, 15, 20], itemTemplate: function(itemData) { return "$" + itemData; } } }]); } </script>
<% var movie = getMovieById(appointmentData.MovieId), data = arguments[0]; %> <div class="movie-tooltip"> <img src="<%- movie.Image %>" alt="" /> <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>
using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult CustomTemplates() { return View(new SchedulerViewModel { CinemaData = SampleData.CinemaData, Movies = SampleData.Movies, Theatres = SampleData.Theatres }); } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<CinemaAppointment> CinemaData = new[] { new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-04-26T16:10:00.000Z", EndDate = "2021-04-26T18:01:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-04-26T18:30:00.000Z", EndDate = "2021-04-26T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 15, StartDate = "2021-04-26T20:30:00.000Z", EndDate = "2021-04-26T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 5, StartDate = "2021-04-26T23:00:00.000Z", EndDate = "2021-04-27T00:08:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 10, StartDate = "2021-04-27T00:30:00.000Z", EndDate = "2021-04-27T02:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 10, StartDate = "2021-04-27T02:30:00.000Z", EndDate = "2021-04-27T04:02:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 10, StartDate = "2021-04-27T04:20:00.000Z", EndDate = "2021-04-27T05:53:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-04-27T16:10:00.000Z", EndDate = "2021-04-27T18:20:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-04-27T19:00:00.000Z", EndDate = "2021-04-27T20:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 5, StartDate = "2021-04-27T21:00:00.000Z", EndDate = "2021-04-27T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 5, StartDate = "2021-04-27T23:20:00.000Z", EndDate = "2021-04-28T00:28:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 10, StartDate = "2021-04-28T01:00:00.000Z", EndDate = "2021-04-28T02:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 15, StartDate = "2021-04-28T03:00:00.000Z", EndDate = "2021-04-28T04:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 5, StartDate = "2021-04-28T04:50:00.000Z", EndDate = "2021-04-28T05:58:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-04-28T16:00:00.000Z", EndDate = "2021-04-28T17:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-04-28T18:00:00.000Z", EndDate = "2021-04-28T19:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-04-28T20:20:00.000Z", EndDate = "2021-04-28T22:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-04-28T22:45:00.000Z", EndDate = "2021-04-29T00:55:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 10, StartDate = "2021-04-29T01:20:00.000Z", EndDate = "2021-04-29T02:28:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 20, StartDate = "2021-04-29T03:00:00.000Z", EndDate = "2021-04-29T05:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-04-29T16:00:00.000Z", EndDate = "2021-04-29T17:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-04-29T18:00:00.000Z", EndDate = "2021-04-29T19:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-04-29T20:20:00.000Z", EndDate = "2021-04-29T22:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-04-29T22:45:00.000Z", EndDate = "2021-04-30T00:55:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 5, StartDate = "2021-04-30T01:20:00.000Z", EndDate = "2021-04-30T02:28:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-04-30T03:00:00.000Z", EndDate = "2021-04-30T05:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-04-30T16:30:00.000Z", EndDate = "2021-04-30T18:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-04-30T18:30:00.000Z", EndDate = "2021-04-30T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 5, StartDate = "2021-04-30T20:30:00.000Z", EndDate = "2021-04-30T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-04-30T23:00:00.000Z", EndDate = "2021-05-01T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 5, StartDate = "2021-05-01T01:30:00.000Z", EndDate = "2021-05-01T02:38:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 15, StartDate = "2021-05-01T03:20:00.000Z", EndDate = "2021-05-01T05:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-01T16:30:00.000Z", EndDate = "2021-05-01T18:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 10, StartDate = "2021-05-01T18:30:00.000Z", EndDate = "2021-05-01T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-01T20:30:00.000Z", EndDate = "2021-05-01T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-05-01T23:00:00.000Z", EndDate = "2021-05-02T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 10, StartDate = "2021-05-02T01:30:00.000Z", EndDate = "2021-05-02T02:38:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-02T03:20:00.000Z", EndDate = "2021-05-02T05:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-02T16:30:00.000Z", EndDate = "2021-05-02T18:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-02T18:30:00.000Z", EndDate = "2021-05-02T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-02T20:30:00.000Z", EndDate = "2021-05-02T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-05-02T23:00:00.000Z", EndDate = "2021-05-03T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 10, StartDate = "2021-05-03T01:30:00.000Z", EndDate = "2021-05-03T02:38:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 15, StartDate = "2021-05-03T03:20:00.000Z", EndDate = "2021-05-03T05:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-03T16:30:00.000Z", EndDate = "2021-05-03T18:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-03T18:30:00.000Z", EndDate = "2021-05-03T19:57:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-03T20:20:00.000Z", EndDate = "2021-05-03T22:11:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-03T23:00:00.000Z", EndDate = "2021-05-04T00:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 10, StartDate = "2021-05-04T01:00:00.000Z", EndDate = "2021-05-04T02:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 20, StartDate = "2021-05-04T03:00:00.000Z", EndDate = "2021-05-04T04:27:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 4, Price = 15, StartDate = "2021-05-04T04:50:00.000Z", EndDate = "2021-05-04T05:58:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-05T02:00:00.000Z", EndDate = "2021-05-04T17:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-04T18:30:00.000Z", EndDate = "2021-05-04T20:03:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-04T20:30:00.000Z", EndDate = "2021-05-04T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-04T22:30:00.000Z", EndDate = "2021-05-05T00:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-05T00:30:00.000Z", EndDate = "2021-05-05T01:57:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-05-05T03:00:00.000Z", EndDate = "2021-05-05T05:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-06T02:00:00.000Z", EndDate = "2021-05-05T17:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-06T04:00:00.000Z", EndDate = "2021-05-06T05:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-05T20:00:00.000Z", EndDate = "2021-05-05T21:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-05T22:30:00.000Z", EndDate = "2021-05-06T00:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-06T00:30:00.000Z", EndDate = "2021-05-06T01:57:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-05-06T03:00:00.000Z", EndDate = "2021-05-06T05:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-06T16:00:00.000Z", EndDate = "2021-05-06T17:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-06T18:00:00.000Z", EndDate = "2021-05-06T19:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-06T20:00:00.000Z", EndDate = "2021-05-06T21:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-06T22:30:00.000Z", EndDate = "2021-05-07T00:21:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-07T00:30:00.000Z", EndDate = "2021-05-07T01:57:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 15, StartDate = "2021-05-07T03:00:00.000Z", EndDate = "2021-05-07T05:10:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-07T16:00:00.000Z", EndDate = "2021-05-07T17:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-07T18:00:00.000Z", EndDate = "2021-05-07T19:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-07T20:00:00.000Z", EndDate = "2021-05-07T21:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-05-07T22:30:00.000Z", EndDate = "2021-05-08T00:40:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-08T01:00:00.000Z", EndDate = "2021-05-08T02:27:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 15, StartDate = "2021-05-08T03:00:00.000Z", EndDate = "2021-05-08T04:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-08T16:00:00.000Z", EndDate = "2021-05-08T17:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-08T18:00:00.000Z", EndDate = "2021-05-08T19:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-08T20:00:00.000Z", EndDate = "2021-05-08T21:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-05-08T22:30:00.000Z", EndDate = "2021-05-09T00:40:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-09T01:00:00.000Z", EndDate = "2021-05-09T02:27:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 15, StartDate = "2021-05-09T03:00:00.000Z", EndDate = "2021-05-09T04:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 2, Price = 5, StartDate = "2021-05-09T16:00:00.000Z", EndDate = "2021-05-09T17:33:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 5, StartDate = "2021-05-09T18:00:00.000Z", EndDate = "2021-05-09T19:32:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 3, Price = 10, StartDate = "2021-05-09T20:00:00.000Z", EndDate = "2021-05-09T21:51:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 5, Price = 10, StartDate = "2021-05-09T22:30:00.000Z", EndDate = "2021-05-10T00:40:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 6, Price = 15, StartDate = "2021-05-10T01:00:00.000Z", EndDate = "2021-05-10T02:27:00.000Z" }, new CinemaAppointment { TheatreId = 0, MovieId = 1, Price = 15, StartDate = "2021-05-10T03:00:00.000Z", EndDate = "2021-05-10T04:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-04-27T02:30:00.000Z", EndDate = "2021-04-26T18:21:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-04-26T19:00:00.000Z", EndDate = "2021-04-26T20:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 15, StartDate = "2021-04-26T21:00:00.000Z", EndDate = "2021-04-26T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 5, StartDate = "2021-04-26T23:10:00.000Z", EndDate = "2021-04-27T00:18:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 10, StartDate = "2021-04-27T00:30:00.000Z", EndDate = "2021-04-27T02:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 10, StartDate = "2021-04-26T16:30:00.000Z", EndDate = "2021-04-27T04:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 10, StartDate = "2021-04-27T04:20:00.000Z", EndDate = "2021-04-27T05:53:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-04-27T16:30:00.000Z", EndDate = "2021-04-27T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-04-27T18:30:00.000Z", EndDate = "2021-04-27T20:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-04-27T20:30:00.000Z", EndDate = "2021-04-27T22:40:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 5, StartDate = "2021-04-27T23:00:00.000Z", EndDate = "2021-04-28T00:08:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 10, StartDate = "2021-04-28T00:30:00.000Z", EndDate = "2021-04-28T02:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 15, StartDate = "2021-04-28T02:40:00.000Z", EndDate = "2021-04-28T04:13:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 5, StartDate = "2021-04-28T04:40:00.000Z", EndDate = "2021-04-28T05:48:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-04-28T16:30:00.000Z", EndDate = "2021-04-28T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-04-28T18:30:00.000Z", EndDate = "2021-04-28T20:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-04-28T20:30:00.000Z", EndDate = "2021-04-28T22:41:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-04-28T23:00:00.000Z", EndDate = "2021-04-29T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 10, StartDate = "2021-04-29T01:30:00.000Z", EndDate = "2021-04-29T02:38:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 20, StartDate = "2021-04-29T03:20:00.000Z", EndDate = "2021-04-29T05:30:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-04-29T16:30:00.000Z", EndDate = "2021-04-29T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-04-29T18:30:00.000Z", EndDate = "2021-04-29T20:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-04-29T20:30:00.000Z", EndDate = "2021-04-29T22:41:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-04-29T23:00:00.000Z", EndDate = "2021-04-30T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 5, StartDate = "2021-04-30T01:30:00.000Z", EndDate = "2021-04-30T02:38:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-04-30T03:20:00.000Z", EndDate = "2021-04-30T05:30:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-04-30T16:10:00.000Z", EndDate = "2021-04-30T17:43:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-04-30T18:00:00.000Z", EndDate = "2021-04-30T19:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 5, StartDate = "2021-04-30T20:10:00.000Z", EndDate = "2021-04-30T22:01:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-04-30T22:40:00.000Z", EndDate = "2021-05-01T00:50:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 5, StartDate = "2021-05-01T01:20:00.000Z", EndDate = "2021-05-01T02:28:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 15, StartDate = "2021-05-01T03:20:00.000Z", EndDate = "2021-05-01T05:11:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-01T17:00:00.000Z", EndDate = "2021-05-01T18:33:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 10, StartDate = "2021-05-01T19:00:00.000Z", EndDate = "2021-05-01T20:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-01T21:00:00.000Z", EndDate = "2021-05-01T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-05-01T23:30:00.000Z", EndDate = "2021-05-02T01:40:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 10, StartDate = "2021-05-02T02:00:00.000Z", EndDate = "2021-05-02T03:08:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 20, StartDate = "2021-05-02T03:30:00.000Z", EndDate = "2021-05-02T05:50:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-02T17:00:00.000Z", EndDate = "2021-05-02T18:33:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-02T19:00:00.000Z", EndDate = "2021-05-02T20:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-02T21:00:00.000Z", EndDate = "2021-05-02T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-05-02T23:30:00.000Z", EndDate = "2021-05-03T01:40:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 4, Price = 10, StartDate = "2021-05-03T02:00:00.000Z", EndDate = "2021-05-03T03:08:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-05-03T03:30:00.000Z", EndDate = "2021-05-03T05:50:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-03T17:00:00.000Z", EndDate = "2021-05-03T18:33:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-03T19:00:00.000Z", EndDate = "2021-05-03T20:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-03T21:00:00.000Z", EndDate = "2021-05-03T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 10, StartDate = "2021-05-03T23:30:00.000Z", EndDate = "2021-05-04T01:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-05-04T01:30:00.000Z", EndDate = "2021-05-04T03:40:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 20, StartDate = "2021-05-04T04:00:00.000Z", EndDate = "2021-05-04T05:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-04T16:30:00.000Z", EndDate = "2021-05-04T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 5, StartDate = "2021-05-04T19:00:00.000Z", EndDate = "2021-05-04T20:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-04T21:00:00.000Z", EndDate = "2021-05-04T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-04T23:30:00.000Z", EndDate = "2021-05-05T01:21:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-04T16:00:00.000Z", EndDate = "2021-05-05T03:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 15, StartDate = "2021-05-05T04:00:00.000Z", EndDate = "2021-05-05T05:33:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-05T17:00:00.000Z", EndDate = "2021-05-05T18:32:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 5, StartDate = "2021-05-05T19:00:00.000Z", EndDate = "2021-05-05T20:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-05T21:00:00.000Z", EndDate = "2021-05-05T22:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 10, StartDate = "2021-05-05T23:30:00.000Z", EndDate = "2021-05-06T01:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-05T16:00:00.000Z", EndDate = "2021-05-06T03:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 15, StartDate = "2021-05-05T18:00:00.000Z", EndDate = "2021-05-05T19:33:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-06T16:30:00.000Z", EndDate = "2021-05-06T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-06T18:30:00.000Z", EndDate = "2021-05-06T20:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 10, StartDate = "2021-05-06T21:00:00.000Z", EndDate = "2021-05-06T22:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-06T23:00:00.000Z", EndDate = "2021-05-07T00:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-07T01:10:00.000Z", EndDate = "2021-05-07T02:37:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 20, StartDate = "2021-05-07T03:30:00.000Z", EndDate = "2021-05-07T05:40:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-07T16:30:00.000Z", EndDate = "2021-05-07T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-07T18:30:00.000Z", EndDate = "2021-05-07T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 10, StartDate = "2021-05-07T21:00:00.000Z", EndDate = "2021-05-07T22:27:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-05-07T23:00:00.000Z", EndDate = "2021-05-08T00:51:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-08T01:10:00.000Z", EndDate = "2021-05-08T02:37:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 15, StartDate = "2021-05-08T03:20:00.000Z", EndDate = "2021-05-08T05:30:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-08T16:30:00.000Z", EndDate = "2021-05-08T18:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-08T18:30:00.000Z", EndDate = "2021-05-08T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-08T20:30:00.000Z", EndDate = "2021-05-08T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-05-08T23:00:00.000Z", EndDate = "2021-05-09T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-09T01:30:00.000Z", EndDate = "2021-05-09T02:57:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 15, StartDate = "2021-05-09T03:30:00.000Z", EndDate = "2021-05-09T05:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 2, Price = 5, StartDate = "2021-05-09T16:30:00.000Z", EndDate = "2021-05-09T18:03:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 5, StartDate = "2021-05-09T18:30:00.000Z", EndDate = "2021-05-09T20:02:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 3, Price = 10, StartDate = "2021-05-09T20:30:00.000Z", EndDate = "2021-05-09T22:21:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 5, Price = 10, StartDate = "2021-05-09T23:00:00.000Z", EndDate = "2021-05-10T01:10:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 6, Price = 15, StartDate = "2021-05-10T01:30:00.000Z", EndDate = "2021-05-10T02:57:00.000Z" }, new CinemaAppointment { TheatreId = 1, MovieId = 1, Price = 15, StartDate = "2021-05-10T03:30:00.000Z", EndDate = "2021-05-10T05:02:00.000Z" } }; } }
using System; namespace DevExtreme.MVC.Demos.Models { public class CinemaAppointment : Appointment { public int TheatreId { get; set; } public int MovieId { get; set; } public int Price { get; set; } } }
namespace DevExtreme.MVC.Demos.Models { public class Movie { public int ID { get; set; } public string Text { get; set; } public string Director { get; set; } public int Year { get; set; } public string Image { get; set; } public int Duration { get; set; } public string Color { get; set; } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Movie> Movies = new[] { new Movie { ID = 1, Text = "His Girl Friday", Director = "Howard Hawks", Year = 1940, Image = "../../Content/Images/movies/HisGirlFriday.jpg", Duration = 92, Color = "#cb6bb2" }, new Movie { ID = 2, Text = "Royal Wedding", Director = "Stanley Donen", Year = 1951, Image = "../../Content/Images/movies/RoyalWedding.jpg", Duration = 93, Color = "#56ca85" }, new Movie { ID = 3, Text = "A Star Is Born", Director = "William A. Wellman", Year = 1937, Image = "../../Content/Images/movies/AStartIsBorn.jpg", Duration = 111, Color = "#1e90ff" }, new Movie { ID = 4, Text = "The Screaming Skull", Director = "Alex Nicol", Year = 1958, Image = "../../Content/Images/movies/ScreamingSkull.jpg", Duration = 68, Color = "#ff9747" }, new Movie { ID = 5, Text = "It's a Wonderful Life", Director = "Frank Capra", Year = 1946, Image = "../../Content/Images/movies/ItsAWonderfulLife.jpg", Duration = 130, Color = "#f05797" }, new Movie { ID = 6, Text = "City Lights", Director = "Charlie Chaplin", Year = 1931, Image = "../../Content/Images/movies/CityLights.jpg", Duration = 87, Color = "#2a9010" } }; } }
using DevExtreme.MVC.Demos.Models; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.ViewModels { public class SchedulerViewModel { public IEnumerable<CinemaAppointment> CinemaData { get; set; } public IEnumerable<Movie> Movies { get; set; } public IEnumerable<Theatre> Theatres { get; set; } } }
namespace DevExtreme.MVC.Demos.Models { public class Theatre { public int ID { get; set; } public string Text { get; set; } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Theatre> Theatres = new[] { new Theatre { ID = 0, Text = "Cinema Hall 1" }, new Theatre { ID = 1, Text = "Cinema Hall 2" } }; } }
.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { padding: 14px; } .showtime-preview > div:first-child { font-size: 12px; white-space: normal; } .showtime-preview > div:not(:first-child) { font-size: 11px; white-space: normal; } .movie-tooltip .movie-info { display: inline-block; margin-left: 10px; vertical-align: top; text-align: left; } .movie-tooltip img { height: 80px; margin-bottom: 10px; } .movie-tooltip .movie-title { font-size: 1.5em; line-height: 40px; } .long-title h3 { font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-weight: 200; font-size: 28px; text-align: center; margin-bottom: 20px; }