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(appointmentData.MovieId); %> <div class="showtime-preview"> <div><%- movie.Text %></div> <div> Ticket Price: <strong>$<%- appointmentData.Price %></strong> </div> <div> <%- formatTime(new Date(appointmentData.StartDate)) %> - <%- formatTime(new Date(appointmentData.EndDate)) %> </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; }