www.wikipedia.org
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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;
}