@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, 5, 25))
.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.getEditor("Director")
.option("value", movie.Director);
form.getEditor("EndDate")
.option("value", 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 = args.value;
form.getEditor("EndDate")
.option("value", 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-05-24T16:10:00.000Z",
EndDate = "2021-05-24T18:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-24T18:30:00.000Z",
EndDate = "2021-05-24T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-24T20:30:00.000Z",
EndDate = "2021-05-24T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-24T23:00:00.000Z",
EndDate = "2021-05-25T00:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-05-25T00:30:00.000Z",
EndDate = "2021-05-25T02:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-25T02:30:00.000Z",
EndDate = "2021-05-25T04:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-05-25T04:20:00.000Z",
EndDate = "2021-05-25T05:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-25T16:10:00.000Z",
EndDate = "2021-05-25T18:20:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-25T19:00:00.000Z",
EndDate = "2021-05-25T20:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2021-05-25T21:00:00.000Z",
EndDate = "2021-05-25T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T23:20:00.000Z",
EndDate = "2021-05-26T00:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-26T01:00:00.000Z",
EndDate = "2021-05-26T02:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 15,
StartDate = "2021-05-26T03:00:00.000Z",
EndDate = "2021-05-26T04:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-26T04:50:00.000Z",
EndDate = "2021-05-26T05:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-26T16:00:00.000Z",
EndDate = "2021-05-26T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-26T18:00:00.000Z",
EndDate = "2021-05-26T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-26T20:20:00.000Z",
EndDate = "2021-05-26T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-26T22:45:00.000Z",
EndDate = "2021-05-27T00:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-27T01:20:00.000Z",
EndDate = "2021-05-27T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 20,
StartDate = "2021-05-27T03:00:00.000Z",
EndDate = "2021-05-27T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-27T16:00:00.000Z",
EndDate = "2021-05-27T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-27T18:00:00.000Z",
EndDate = "2021-05-27T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-27T20:20:00.000Z",
EndDate = "2021-05-27T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T22:45:00.000Z",
EndDate = "2021-05-28T00:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-28T01:20:00.000Z",
EndDate = "2021-05-28T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-28T03:00:00.000Z",
EndDate = "2021-05-28T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-28T16:30:00.000Z",
EndDate = "2021-05-28T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-28T18:30:00.000Z",
EndDate = "2021-05-28T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2021-05-28T20:30:00.000Z",
EndDate = "2021-05-28T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-28T23:00:00.000Z",
EndDate = "2021-05-29T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-29T01:30:00.000Z",
EndDate = "2021-05-29T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-29T03:20:00.000Z",
EndDate = "2021-05-29T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-29T16:30:00.000Z",
EndDate = "2021-05-29T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-29T18:30:00.000Z",
EndDate = "2021-05-29T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-29T20:30:00.000Z",
EndDate = "2021-05-29T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-29T23:00:00.000Z",
EndDate = "2021-05-30T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-30T01:30:00.000Z",
EndDate = "2021-05-30T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-30T03:20:00.000Z",
EndDate = "2021-05-30T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-30T16:30:00.000Z",
EndDate = "2021-05-30T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-30T18:30:00.000Z",
EndDate = "2021-05-30T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-30T20:30:00.000Z",
EndDate = "2021-05-30T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-30T23:00:00.000Z",
EndDate = "2021-05-31T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-31T01:30:00.000Z",
EndDate = "2021-05-31T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-31T03:20:00.000Z",
EndDate = "2021-05-31T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-31T16:30:00.000Z",
EndDate = "2021-05-31T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-05-31T18:30:00.000Z",
EndDate = "2021-05-31T19:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-31T20:20:00.000Z",
EndDate = "2021-05-31T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-31T23:00:00.000Z",
EndDate = "2021-06-01T00:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-06-01T01:00:00.000Z",
EndDate = "2021-06-01T02:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 20,
StartDate = "2021-06-01T03:00:00.000Z",
EndDate = "2021-06-01T04:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 15,
StartDate = "2021-06-01T04:50:00.000Z",
EndDate = "2021-06-01T05:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-02T02:00:00.000Z",
EndDate = "2021-06-01T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-01T18:30:00.000Z",
EndDate = "2021-06-01T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T20:30:00.000Z",
EndDate = "2021-06-01T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T22:30:00.000Z",
EndDate = "2021-06-02T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-02T00:30:00.000Z",
EndDate = "2021-06-02T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-02T03:00:00.000Z",
EndDate = "2021-06-02T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-03T02:00:00.000Z",
EndDate = "2021-06-02T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-03T04:00:00.000Z",
EndDate = "2021-06-03T05:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T20:00:00.000Z",
EndDate = "2021-06-02T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T22:30:00.000Z",
EndDate = "2021-06-03T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-03T00:30:00.000Z",
EndDate = "2021-06-03T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-03T03:00:00.000Z",
EndDate = "2021-06-03T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-03T16:00:00.000Z",
EndDate = "2021-06-03T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-03T18:00:00.000Z",
EndDate = "2021-06-03T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T20:00:00.000Z",
EndDate = "2021-06-03T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T22:30:00.000Z",
EndDate = "2021-06-04T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-04T00:30:00.000Z",
EndDate = "2021-06-04T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-04T03:00:00.000Z",
EndDate = "2021-06-04T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-04T16:00:00.000Z",
EndDate = "2021-06-04T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-04T18:00:00.000Z",
EndDate = "2021-06-04T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-04T20:00:00.000Z",
EndDate = "2021-06-04T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-04T22:30:00.000Z",
EndDate = "2021-06-05T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-05T01:00:00.000Z",
EndDate = "2021-06-05T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-05T03:00:00.000Z",
EndDate = "2021-06-05T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-05T16:00:00.000Z",
EndDate = "2021-06-05T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-05T18:00:00.000Z",
EndDate = "2021-06-05T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-05T20:00:00.000Z",
EndDate = "2021-06-05T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-05T22:30:00.000Z",
EndDate = "2021-06-06T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-06T01:00:00.000Z",
EndDate = "2021-06-06T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-06T03:00:00.000Z",
EndDate = "2021-06-06T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-06T16:00:00.000Z",
EndDate = "2021-06-06T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-06T18:00:00.000Z",
EndDate = "2021-06-06T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-06T20:00:00.000Z",
EndDate = "2021-06-06T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-06T22:30:00.000Z",
EndDate = "2021-06-07T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-07T01:00:00.000Z",
EndDate = "2021-06-07T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-07T03:00:00.000Z",
EndDate = "2021-06-07T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-25T02:30:00.000Z",
EndDate = "2021-05-24T18:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-24T19:00:00.000Z",
EndDate = "2021-05-24T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2021-05-24T21:00:00.000Z",
EndDate = "2021-05-24T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-24T23:10:00.000Z",
EndDate = "2021-05-25T00:18:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-05-25T00:30:00.000Z",
EndDate = "2021-05-25T02:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-24T16:30:00.000Z",
EndDate = "2021-05-25T04:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-05-25T04:20:00.000Z",
EndDate = "2021-05-25T05:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-25T16:30:00.000Z",
EndDate = "2021-05-25T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-25T18:30:00.000Z",
EndDate = "2021-05-25T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-25T20:30:00.000Z",
EndDate = "2021-05-25T22:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T23:00:00.000Z",
EndDate = "2021-05-26T00:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-26T00:30:00.000Z",
EndDate = "2021-05-26T02:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-05-26T02:40:00.000Z",
EndDate = "2021-05-26T04:13:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-26T04:40:00.000Z",
EndDate = "2021-05-26T05:48:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-26T16:30:00.000Z",
EndDate = "2021-05-26T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-26T18:30:00.000Z",
EndDate = "2021-05-26T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-26T20:30:00.000Z",
EndDate = "2021-05-26T22:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-26T23:00:00.000Z",
EndDate = "2021-05-27T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-27T01:30:00.000Z",
EndDate = "2021-05-27T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-05-27T03:20:00.000Z",
EndDate = "2021-05-27T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-27T16:30:00.000Z",
EndDate = "2021-05-27T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-27T18:30:00.000Z",
EndDate = "2021-05-27T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T20:30:00.000Z",
EndDate = "2021-05-27T22:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T23:00:00.000Z",
EndDate = "2021-05-28T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-28T01:30:00.000Z",
EndDate = "2021-05-28T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-28T03:20:00.000Z",
EndDate = "2021-05-28T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-28T16:10:00.000Z",
EndDate = "2021-05-28T17:43:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-28T18:00:00.000Z",
EndDate = "2021-05-28T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 5,
StartDate = "2021-05-28T20:10:00.000Z",
EndDate = "2021-05-28T22:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-28T22:40:00.000Z",
EndDate = "2021-05-29T00:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-29T01:20:00.000Z",
EndDate = "2021-05-29T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2021-05-29T03:20:00.000Z",
EndDate = "2021-05-29T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-29T17:00:00.000Z",
EndDate = "2021-05-29T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-29T19:00:00.000Z",
EndDate = "2021-05-29T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-29T21:00:00.000Z",
EndDate = "2021-05-29T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-29T23:30:00.000Z",
EndDate = "2021-05-30T01:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-30T02:00:00.000Z",
EndDate = "2021-05-30T03:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-05-30T03:30:00.000Z",
EndDate = "2021-05-30T05:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-30T17:00:00.000Z",
EndDate = "2021-05-30T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-30T19:00:00.000Z",
EndDate = "2021-05-30T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-30T21:00:00.000Z",
EndDate = "2021-05-30T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-30T23:30:00.000Z",
EndDate = "2021-05-31T01:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-31T02:00:00.000Z",
EndDate = "2021-05-31T03:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-31T03:30:00.000Z",
EndDate = "2021-05-31T05:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-31T17:00:00.000Z",
EndDate = "2021-05-31T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-05-31T19:00:00.000Z",
EndDate = "2021-05-31T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-31T21:00:00.000Z",
EndDate = "2021-05-31T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-31T23:30:00.000Z",
EndDate = "2021-06-01T01:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-06-01T01:30:00.000Z",
EndDate = "2021-06-01T03:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 20,
StartDate = "2021-06-01T04:00:00.000Z",
EndDate = "2021-06-01T05:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-01T16:30:00.000Z",
EndDate = "2021-06-01T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2021-06-01T19:00:00.000Z",
EndDate = "2021-06-01T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T21:00:00.000Z",
EndDate = "2021-06-01T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T23:30:00.000Z",
EndDate = "2021-06-02T01:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-01T16:00:00.000Z",
EndDate = "2021-06-02T03:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-06-02T04:00:00.000Z",
EndDate = "2021-06-02T05:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-02T17:00:00.000Z",
EndDate = "2021-06-02T18:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2021-06-02T19:00:00.000Z",
EndDate = "2021-06-02T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T21:00:00.000Z",
EndDate = "2021-06-02T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-06-02T23:30:00.000Z",
EndDate = "2021-06-03T01:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-02T16:00:00.000Z",
EndDate = "2021-06-03T03:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-06-02T18:00:00.000Z",
EndDate = "2021-06-02T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-03T16:30:00.000Z",
EndDate = "2021-06-03T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-03T18:30:00.000Z",
EndDate = "2021-06-03T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2021-06-03T21:00:00.000Z",
EndDate = "2021-06-03T22:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T23:00:00.000Z",
EndDate = "2021-06-04T00:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-04T01:10:00.000Z",
EndDate = "2021-06-04T02:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-06-04T03:30:00.000Z",
EndDate = "2021-06-04T05:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-04T16:30:00.000Z",
EndDate = "2021-06-04T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-04T18:30:00.000Z",
EndDate = "2021-06-04T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2021-06-04T21:00:00.000Z",
EndDate = "2021-06-04T22:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-04T23:00:00.000Z",
EndDate = "2021-06-05T00:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-05T01:10:00.000Z",
EndDate = "2021-06-05T02:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-06-05T03:20:00.000Z",
EndDate = "2021-06-05T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-05T16:30:00.000Z",
EndDate = "2021-06-05T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-05T18:30:00.000Z",
EndDate = "2021-06-05T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-05T20:30:00.000Z",
EndDate = "2021-06-05T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-05T23:00:00.000Z",
EndDate = "2021-06-06T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-06T01:30:00.000Z",
EndDate = "2021-06-06T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-06-06T03:30:00.000Z",
EndDate = "2021-06-06T05:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-06T16:30:00.000Z",
EndDate = "2021-06-06T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-06T18:30:00.000Z",
EndDate = "2021-06-06T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-06T20:30:00.000Z",
EndDate = "2021-06-06T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-06T23:00:00.000Z",
EndDate = "2021-06-07T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-07T01:30:00.000Z",
EndDate = "2021-06-07T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 15,
StartDate = "2021-06-07T03:30:00.000Z",
EndDate = "2021-06-07T05: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;
}