Your search did not match any results.
Scheduler

Custom Templates

Documentation
This demo illustrates the rich collection of the appearance customization options available as a part of the Scheduler widget. The appearance of appointments and appointment tooltips are defined using custom templates. Options for the appointment details form are set within the appointmentFormCreated event handler. Options for the Scheduler are also modified: the timelineDay view is added to the View Selector and the All-day panel is hidden.
www.wikipedia.org
@model DevExtreme.NETCore.Demos.ViewModels.SchedulerViewModel <div class="long-title"><h3>DXCinema Show Times</h3></div> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model.CinemaData) .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(new SchedulerViewType[] { SchedulerViewType.Week, SchedulerViewType.Day, SchedulerViewType.TimelineDay }) .CurrentView(SchedulerViewType.Day) .CurrentDate(new DateTime(2015, 5, 25)) .FirstDayOfWeek(FirstDayOfWeek.Sunday) .StartDayHour(9) .EndDayHour(23) .ShowAllDayPanel(false) .Width("100%") .Height(600) .Groups(new string[] { "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(MovieId); %> <div class="showtime-preview"> <div><%= movie.Text %></div> <div> Ticket Price: <strong>$<%= Price %></strong> </div> <div> <%= Globalize.formatDate(StartDate, { time: "short" }) %> - <%= Globalize.formatDate(EndDate, { time: "short" }) %> </div> </div> </text>) .OnAppointmentFormCreated("appointmentForm_created") ) <script> 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, endDate = data.appointmentData.EndDate, price = data.appointmentData.Price; form.option("items", [{ label: { text: "Movie" }, editorType: "dxSelectBox", dataField: "MovieId", editorOptions: { dataSource: moviesData, displayExpr: "Text", valueExpr: "ID", value: movie.ID, onValueChanged: function(args) { var movieInfo = getMovieById(args.value); form.getEditor("Director") .option("value", movieInfo.Director); form.getEditor("EndDate") .option("value", new Date(startDate.getTime() + 60 * 1000 * movieInfo.Duration)); } }, }, { label: { text: "Director" }, name: "Director", editorType: "dxTextBox", editorOptions: { value: movie.Director, readOnly: true } }, { dataField: "StartDate", editorType: "dxDateBox", editorOptions: { value: startDate, type: "datetime", onValueChanged: function(args) { startDate = args.value; form.getEditor("EndDate") .option("value", new Date(startDate.getTime() + 60 * 1000 * movie.Duration)); } } }, { name: "EndDate", dataField: "EndDate", editorType: "dxDateBox", editorOptions: { value: endDate, type: "datetime", readOnly: true } }, { dataField: "Price", editorType: "dxRadioGroup", editorOptions: { dataSource: [5, 10, 15, 20], itemTemplate: function(itemData) { return "$" + itemData; }, value: price } } ]); } </script>
<% var movie = getMovieById(MovieId); var 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> <br /> @(Html.DevExtreme().Button() .Text("Edit details") .OnClick(@<text> function() { getSchedulerInstance().showAppointmentPopup(data, false); } </text>) ) </div>
using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<CinemaDataItem> CinemaData { get { return new List<CinemaDataItem> { new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 24, 9, 10, 0), EndDate = new DateTime(2015, 5, 24, 11, 1 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 24, 11, 30, 0), EndDate = new DateTime(2015, 5, 24, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 15, StartDate = new DateTime(2015, 5, 24, 13, 30, 0), EndDate = new DateTime(2015, 5, 24, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 24, 16, 0, 0), EndDate = new DateTime(2015, 5, 24, 17, 8 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 5, 24, 17, 30, 0), EndDate = new DateTime(2015, 5, 24, 19, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 24, 19, 30, 0), EndDate = new DateTime(2015, 5, 24, 21, 2 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 5, 24, 21, 20, 0), EndDate = new DateTime(2015, 5, 24, 22, 53 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 25, 9, 10, 0), EndDate = new DateTime(2015, 5, 25, 11, 20 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 25, 12, 0, 0), EndDate = new DateTime(2015, 5, 25, 13, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 5, StartDate = new DateTime(2015, 5, 25, 14, 0, 0), EndDate = new DateTime(2015, 5, 25, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 25, 16, 20, 0), EndDate = new DateTime(2015, 5, 25, 17, 28 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 25, 18, 0, 0), EndDate = new DateTime(2015, 5, 25, 19, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 15, StartDate = new DateTime(2015, 5, 25, 20, 0, 0), EndDate = new DateTime(2015, 5, 25, 21, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 25, 21, 50, 0), EndDate = new DateTime(2015, 5, 25, 22, 58 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 26, 9, 0, 0), EndDate = new DateTime(2015, 5, 26, 10, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 26, 11, 0, 0), EndDate = new DateTime(2015, 5, 26, 12, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 26, 13, 20, 0), EndDate = new DateTime(2015, 5, 26, 15, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 26, 15, 45, 0), EndDate = new DateTime(2015, 5, 26, 17, 55 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 26, 18, 20, 0), EndDate = new DateTime(2015, 5, 26, 19, 28 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 20, StartDate = new DateTime(2015, 5, 26, 20, 0, 0), EndDate = new DateTime(2015, 5, 26, 22, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 27, 9, 0, 0), EndDate = new DateTime(2015, 5, 27, 10, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 27, 11, 0, 0), EndDate = new DateTime(2015, 5, 27, 12, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 27, 13, 20, 0), EndDate = new DateTime(2015, 5, 27, 15, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 27, 15, 45, 0), EndDate = new DateTime(2015, 5, 27, 17, 55 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 27, 18, 20, 0), EndDate = new DateTime(2015, 5, 27, 19, 28 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 27, 20, 0, 0), EndDate = new DateTime(2015, 5, 27, 22, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 28, 9, 30, 0), EndDate = new DateTime(2015, 5, 28, 11, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 28, 11, 30, 0), EndDate = new DateTime(2015, 5, 28, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 5, StartDate = new DateTime(2015, 5, 28, 13, 30, 0), EndDate = new DateTime(2015, 5, 28, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 28, 16, 0, 0), EndDate = new DateTime(2015, 5, 28, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 28, 18, 30, 0), EndDate = new DateTime(2015, 5, 28, 19, 38 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 15, StartDate = new DateTime(2015, 5, 28, 20, 20, 0), EndDate = new DateTime(2015, 5, 28, 22, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 29, 9, 30, 0), EndDate = new DateTime(2015, 5, 29, 11, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 29, 11, 30, 0), EndDate = new DateTime(2015, 5, 29, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 29, 13, 30, 0), EndDate = new DateTime(2015, 5, 29, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 29, 16, 0, 0), EndDate = new DateTime(2015, 5, 29, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 29, 18, 30, 0), EndDate = new DateTime(2015, 5, 29, 19, 38 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 29, 20, 20, 0), EndDate = new DateTime(2015, 5, 29, 22, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 30, 9, 30, 0), EndDate = new DateTime(2015, 5, 30, 11, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 30, 11, 30, 0), EndDate = new DateTime(2015, 5, 30, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 30, 13, 30, 0), EndDate = new DateTime(2015, 5, 30, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 30, 16, 0, 0), EndDate = new DateTime(2015, 5, 30, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 30, 18, 30, 0), EndDate = new DateTime(2015, 5, 30, 19, 38 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 15, StartDate = new DateTime(2015, 5, 30, 20, 20, 0), EndDate = new DateTime(2015, 5, 30, 22, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 31, 9, 30, 0), EndDate = new DateTime(2015, 5, 31, 11, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 5, 31, 11, 30, 0), EndDate = new DateTime(2015, 5, 31, 12, 57 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 31, 13, 20, 0), EndDate = new DateTime(2015, 5, 31, 15, 11 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 31, 16, 0, 0), EndDate = new DateTime(2015, 5, 31, 17, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 5, 31, 18, 0, 0), EndDate = new DateTime(2015, 5, 31, 19, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 20, StartDate = new DateTime(2015, 5, 31, 20, 0, 0), EndDate = new DateTime(2015, 5, 31, 21, 27 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 4, Price = 15, StartDate = new DateTime(2015, 5, 31, 21, 50, 0), EndDate = new DateTime(2015, 5, 31, 22, 58 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 1, 9, 0, 0), EndDate = new DateTime(2015, 6, 1, 10, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 1, 11, 30, 0), EndDate = new DateTime(2015, 6, 1, 13, 3 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 1, 13, 30, 0), EndDate = new DateTime(2015, 6, 1, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 1, 15, 30, 0), EndDate = new DateTime(2015, 6, 1, 17, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 1, 17, 30, 0), EndDate = new DateTime(2015, 6, 1, 18, 57 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 6, 1, 20, 0, 0), EndDate = new DateTime(2015, 6, 1, 22, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 2, 9, 0, 0), EndDate = new DateTime(2015, 6, 2, 10, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 2, 11, 0, 0), EndDate = new DateTime(2015, 6, 2, 12, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 2, 13, 0, 0), EndDate = new DateTime(2015, 6, 2, 14, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 2, 15, 30, 0), EndDate = new DateTime(2015, 6, 2, 17, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 2, 17, 30, 0), EndDate = new DateTime(2015, 6, 2, 18, 57 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 6, 2, 20, 0, 0), EndDate = new DateTime(2015, 6, 2, 22, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 3, 9, 0, 0), EndDate = new DateTime(2015, 6, 3, 10, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 3, 11, 0, 0), EndDate = new DateTime(2015, 6, 3, 12, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 3, 13, 0, 0), EndDate = new DateTime(2015, 6, 3, 14, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 3, 15, 30, 0), EndDate = new DateTime(2015, 6, 3, 17, 21 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 3, 17, 30, 0), EndDate = new DateTime(2015, 6, 3, 18, 57 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 6, 3, 20, 0, 0), EndDate = new DateTime(2015, 6, 3, 22, 10 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 4, 9, 0, 0), EndDate = new DateTime(2015, 6, 4, 10, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 4, 11, 0, 0), EndDate = new DateTime(2015, 6, 4, 12, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 4, 13, 0, 0), EndDate = new DateTime(2015, 6, 4, 14, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 4, 15, 30, 0), EndDate = new DateTime(2015, 6, 4, 17, 40 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 4, 18, 0, 0), EndDate = new DateTime(2015, 6, 4, 19, 27 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 15, StartDate = new DateTime(2015, 6, 4, 20, 0, 0), EndDate = new DateTime(2015, 6, 4, 21, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 5, 9, 0, 0), EndDate = new DateTime(2015, 6, 5, 10, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 5, 11, 0, 0), EndDate = new DateTime(2015, 6, 5, 12, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 5, 13, 0, 0), EndDate = new DateTime(2015, 6, 5, 14, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 5, 15, 30, 0), EndDate = new DateTime(2015, 6, 5, 17, 40 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 5, 18, 0, 0), EndDate = new DateTime(2015, 6, 5, 19, 27 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 15, StartDate = new DateTime(2015, 6, 5, 20, 0, 0), EndDate = new DateTime(2015, 6, 5, 21, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 6, 9, 0, 0), EndDate = new DateTime(2015, 6, 6, 10, 33 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 6, 11, 0, 0), EndDate = new DateTime(2015, 6, 6, 12, 32 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 6, 13, 0, 0), EndDate = new DateTime(2015, 6, 6, 14, 51 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 6, 15, 30, 0), EndDate = new DateTime(2015, 6, 6, 17, 40 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 6, 18, 0, 0), EndDate = new DateTime(2015, 6, 6, 19, 27 ,0) }, new CinemaDataItem { TheatreId = 1, MovieId = 1, Price = 15, StartDate = new DateTime(2015, 6, 6, 20, 0, 0), EndDate = new DateTime(2015, 6, 6, 21, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 24, 9, 30, 0), EndDate = new DateTime(2015, 5, 24, 11, 21 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 24, 12, 0, 0), EndDate = new DateTime(2015, 5, 24, 13, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 15, StartDate = new DateTime(2015, 5, 24, 14, 0, 0), EndDate = new DateTime(2015, 5, 24, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 24, 16, 10, 0), EndDate = new DateTime(2015, 5, 24, 17, 18 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 5, 24, 17, 30, 0), EndDate = new DateTime(2015, 5, 24, 19, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 24, 19, 30, 0), EndDate = new DateTime(2015, 5, 24, 21, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 5, 24, 21, 20, 0), EndDate = new DateTime(2015, 5, 24, 22, 53 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 25, 9, 30, 0), EndDate = new DateTime(2015, 5, 25, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 25, 11, 30, 0), EndDate = new DateTime(2015, 5, 25, 13, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 25, 13, 30, 0), EndDate = new DateTime(2015, 5, 25, 15, 40 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 25, 16, 0, 0), EndDate = new DateTime(2015, 5, 25, 17, 8 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 25, 17, 30, 0), EndDate = new DateTime(2015, 5, 25, 19, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 15, StartDate = new DateTime(2015, 5, 25, 19, 40, 0), EndDate = new DateTime(2015, 5, 25, 21, 13 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 25, 21, 40, 0), EndDate = new DateTime(2015, 5, 25, 22, 48 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 26, 9, 30, 0), EndDate = new DateTime(2015, 5, 26, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 26, 11, 30, 0), EndDate = new DateTime(2015, 5, 26, 13, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 26, 13, 30, 0), EndDate = new DateTime(2015, 5, 26, 15, 41 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 26, 16, 0, 0), EndDate = new DateTime(2015, 5, 26, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 26, 18, 30, 0), EndDate = new DateTime(2015, 5, 26, 19, 38 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 20, StartDate = new DateTime(2015, 5, 26, 20, 20, 0), EndDate = new DateTime(2015, 5, 26, 22, 30 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 27, 9, 30, 0), EndDate = new DateTime(2015, 5, 27, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 27, 11, 30, 0), EndDate = new DateTime(2015, 5, 27, 13, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 27, 13, 30, 0), EndDate = new DateTime(2015, 5, 27, 15, 41 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 27, 16, 0, 0), EndDate = new DateTime(2015, 5, 27, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 27, 18, 30, 0), EndDate = new DateTime(2015, 5, 27, 19, 38 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 27, 20, 20, 0), EndDate = new DateTime(2015, 5, 27, 22, 30 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 28, 9, 10, 0), EndDate = new DateTime(2015, 5, 28, 10, 43 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 28, 11, 0, 0), EndDate = new DateTime(2015, 5, 28, 12, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 5, StartDate = new DateTime(2015, 5, 28, 13, 10, 0), EndDate = new DateTime(2015, 5, 28, 15, 1 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 28, 15, 40, 0), EndDate = new DateTime(2015, 5, 28, 17, 50 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 5, StartDate = new DateTime(2015, 5, 28, 18, 20, 0), EndDate = new DateTime(2015, 5, 28, 19, 28 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 15, StartDate = new DateTime(2015, 5, 28, 20, 20, 0), EndDate = new DateTime(2015, 5, 28, 22, 11 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 29, 10, 0, 0), EndDate = new DateTime(2015, 5, 29, 11, 33 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 29, 12, 0, 0), EndDate = new DateTime(2015, 5, 29, 13, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 29, 14, 0, 0), EndDate = new DateTime(2015, 5, 29, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 5, 29, 16, 30, 0), EndDate = new DateTime(2015, 5, 29, 18, 40 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 29, 19, 0, 0), EndDate = new DateTime(2015, 5, 29, 20, 8 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 20, StartDate = new DateTime(2015, 5, 29, 20, 30, 0), EndDate = new DateTime(2015, 5, 29, 22, 50 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 30, 10, 0, 0), EndDate = new DateTime(2015, 5, 30, 11, 33 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 5, 30, 12, 0, 0), EndDate = new DateTime(2015, 5, 30, 13, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 30, 14, 0, 0), EndDate = new DateTime(2015, 5, 30, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 30, 16, 30, 0), EndDate = new DateTime(2015, 5, 30, 18, 40 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 4, Price = 10, StartDate = new DateTime(2015, 5, 30, 19, 0, 0), EndDate = new DateTime(2015, 5, 30, 20, 8 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 30, 20, 30, 0), EndDate = new DateTime(2015, 5, 30, 22, 50 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 5, 31, 10, 0, 0), EndDate = new DateTime(2015, 5, 31, 11, 33 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 5, 31, 12, 0, 0), EndDate = new DateTime(2015, 5, 31, 13, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 5, 31, 14, 0, 0), EndDate = new DateTime(2015, 5, 31, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 10, StartDate = new DateTime(2015, 5, 31, 16, 30, 0), EndDate = new DateTime(2015, 5, 31, 18, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 5, 31, 18, 30, 0), EndDate = new DateTime(2015, 5, 31, 20, 40 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 20, StartDate = new DateTime(2015, 5, 31, 21, 0, 0), EndDate = new DateTime(2015, 5, 31, 22, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 1, 9, 30, 0), EndDate = new DateTime(2015, 6, 1, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 5, StartDate = new DateTime(2015, 6, 1, 12, 0, 0), EndDate = new DateTime(2015, 6, 1, 13, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 1, 14, 0, 0), EndDate = new DateTime(2015, 6, 1, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 1, 16, 30, 0), EndDate = new DateTime(2015, 6, 1, 18, 21 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 1, 19, 0, 0), EndDate = new DateTime(2015, 6, 1, 20, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 15, StartDate = new DateTime(2015, 6, 1, 21, 0, 0), EndDate = new DateTime(2015, 6, 1, 22, 33 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 2, 10, 0, 0), EndDate = new DateTime(2015, 6, 2, 11, 32 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 5, StartDate = new DateTime(2015, 6, 2, 12, 0, 0), EndDate = new DateTime(2015, 6, 2, 13, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 2, 14, 0, 0), EndDate = new DateTime(2015, 6, 2, 15, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 10, StartDate = new DateTime(2015, 6, 2, 16, 30, 0), EndDate = new DateTime(2015, 6, 2, 18, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 2, 19, 0, 0), EndDate = new DateTime(2015, 6, 2, 20, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 15, StartDate = new DateTime(2015, 6, 2, 21, 0, 0), EndDate = new DateTime(2015, 6, 2, 22, 33 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 3, 9, 30, 0), EndDate = new DateTime(2015, 6, 3, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 3, 11, 30, 0), EndDate = new DateTime(2015, 6, 3, 13, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 10, StartDate = new DateTime(2015, 6, 3, 14, 0, 0), EndDate = new DateTime(2015, 6, 3, 15, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 3, 16, 0, 0), EndDate = new DateTime(2015, 6, 3, 17, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 3, 18, 10, 0), EndDate = new DateTime(2015, 6, 3, 19, 37 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 20, StartDate = new DateTime(2015, 6, 3, 20, 30, 0), EndDate = new DateTime(2015, 6, 3, 22, 40 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 4, 9, 30, 0), EndDate = new DateTime(2015, 6, 4, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 4, 11, 30, 0), EndDate = new DateTime(2015, 6, 4, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 10, StartDate = new DateTime(2015, 6, 4, 14, 0, 0), EndDate = new DateTime(2015, 6, 4, 15, 27 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 4, 16, 0, 0), EndDate = new DateTime(2015, 6, 4, 17, 51 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 4, 18, 10, 0), EndDate = new DateTime(2015, 6, 4, 19, 37 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 15, StartDate = new DateTime(2015, 6, 4, 20, 20, 0), EndDate = new DateTime(2015, 6, 4, 22, 30 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 5, 9, 30, 0), EndDate = new DateTime(2015, 6, 5, 11, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 5, 11, 30, 0), EndDate = new DateTime(2015, 6, 5, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 5, 13, 30, 0), EndDate = new DateTime(2015, 6, 5, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 5, 16, 0, 0), EndDate = new DateTime(2015, 6, 5, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 5, 18, 30, 0), EndDate = new DateTime(2015, 6, 5, 19, 57 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 15, StartDate = new DateTime(2015, 6, 5, 20, 30, 0), EndDate = new DateTime(2015, 6, 5, 22, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 2, Price = 5, StartDate = new DateTime(2015, 6, 6, 9, 30, 0), EndDate = new DateTime(2015, 6, 6, 11, 3 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 5, StartDate = new DateTime(2015, 6, 6, 11, 30, 0), EndDate = new DateTime(2015, 6, 6, 13, 2 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 3, Price = 10, StartDate = new DateTime(2015, 6, 6, 13, 30, 0), EndDate = new DateTime(2015, 6, 6, 15, 21 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 5, Price = 10, StartDate = new DateTime(2015, 6, 6, 16, 0, 0), EndDate = new DateTime(2015, 6, 6, 18, 10 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 6, Price = 15, StartDate = new DateTime(2015, 6, 6, 18, 30, 0), EndDate = new DateTime(2015, 6, 6, 19, 57 ,0) }, new CinemaDataItem { TheatreId = 2, MovieId = 1, Price = 15, StartDate = new DateTime(2015, 6, 6, 20, 30, 0), EndDate = new DateTime(2015, 6, 6, 22, 2 ,0) } }; } } } }
using System; namespace DevExtreme.NETCore.Demos.Models { public class CinemaDataItem { public int TheatreId { get; set; } public int MovieId { get; set; } public int Price { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } } }
namespace DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Movie> Movies { get { return new List<Movie> { new Movie { ID = 1, Text = "His Girl Friday", Director = "Howard Hawks", Year = 1940, Image = "../../images/movies/HisGirlFriday.jpg", Duration = 92, Color = "#cb6bb2" }, new Movie { ID = 2, Text = "Royal Wedding", Director = "Stanley Donen", Year = 1951, Image = "../../images/movies/RoyalWedding.jpg", Duration = 93, Color = "#56ca85" }, new Movie { ID = 3, Text = "A Star Is Born", Director = "William A. Wellman", Year = 1937, Image = "../../images/movies/AStartIsBorn.jpg", Duration = 111, Color = "#1e90ff" }, new Movie { ID = 4, Text = "The Screaming Skull", Director = "Alex Nicol", Year = 1958, Image = "../../images/movies/ScreamingSkull.jpg", Duration = 68, Color = "#ff9747" }, new Movie { ID = 5, Text = "It's a Wonderful Life", Director = "Frank Capra", Year = 1946, Image = "../../images/movies/ItsAWonderfulLife.jpg", Duration = 130, Color = "#f05797" }, new Movie { ID = 6, Text = "City Lights", Director = "Charlie Chaplin", Year = 1931, Image = "../../images/movies/CityLights.jpg", Duration = 87, Color = "#2a9010" } }; } } } }
using DevExtreme.NETCore.Demos.Models; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.ViewModels { public class SchedulerViewModel { public List<CinemaDataItem> CinemaData { get; set; } public List<Movie> Movies { get; set; } public List<Theatre> Theatres { get; set; } } }
namespace DevExtreme.NETCore.Demos.Models { public class Theatre { public int ID { get; set; } public string Text { get; set; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Theatre> Theatres { get { return new List<Theatre> { new Theatre { ID = 1, Text = "Cinema Hall 1" }, new Theatre { ID = 2, Text = "Cinema Hall 2" } }; } } } }
.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 { width: 270px; } .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; }