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 appointmentFormOpening 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
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@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.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>
@(await Html.PartialAsync("_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 = new Date(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.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 readonly IEnumerable<CinemaAppointment> CinemaData = new[] {
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-24T06:10:00.000Z",
EndDate = "2021-05-24T08:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-24T08:30:00.000Z",
EndDate = "2021-05-24T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-24T10:30:00.000Z",
EndDate = "2021-05-24T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-24T13:00:00.000Z",
EndDate = "2021-05-24T14:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-05-24T14:30:00.000Z",
EndDate = "2021-05-24T16:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-24T16:30:00.000Z",
EndDate = "2021-05-24T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-05-24T18:20:00.000Z",
EndDate = "2021-05-24T19:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-25T06:10:00.000Z",
EndDate = "2021-05-25T08:20:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-25T09:00:00.000Z",
EndDate = "2021-05-25T10:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2021-05-25T11:00:00.000Z",
EndDate = "2021-05-25T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T13:20:00.000Z",
EndDate = "2021-05-25T14:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-25T15:00:00.000Z",
EndDate = "2021-05-25T16:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 15,
StartDate = "2021-05-25T17:00:00.000Z",
EndDate = "2021-05-25T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T18:50:00.000Z",
EndDate = "2021-05-25T19:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-26T06:00:00.000Z",
EndDate = "2021-05-26T07:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-26T08:00:00.000Z",
EndDate = "2021-05-26T09:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-26T10:20:00.000Z",
EndDate = "2021-05-26T12:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-26T12:45:00.000Z",
EndDate = "2021-05-26T14:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-26T15:20:00.000Z",
EndDate = "2021-05-26T16:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 20,
StartDate = "2021-05-26T17:00:00.000Z",
EndDate = "2021-05-26T19:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-27T06:00:00.000Z",
EndDate = "2021-05-27T07:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-27T08:00:00.000Z",
EndDate = "2021-05-27T09:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-27T10:20:00.000Z",
EndDate = "2021-05-27T12:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T12:45:00.000Z",
EndDate = "2021-05-27T14:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-27T15:20:00.000Z",
EndDate = "2021-05-27T16:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-27T17:00:00.000Z",
EndDate = "2021-05-27T19:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-28T06:30:00.000Z",
EndDate = "2021-05-28T08:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-28T08:30:00.000Z",
EndDate = "2021-05-28T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2021-05-28T10:30:00.000Z",
EndDate = "2021-05-28T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-28T13:00:00.000Z",
EndDate = "2021-05-28T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2021-05-28T15:30:00.000Z",
EndDate = "2021-05-28T16:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-28T17:20:00.000Z",
EndDate = "2021-05-28T19:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-29T06:30:00.000Z",
EndDate = "2021-05-29T08:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2021-05-29T08:30:00.000Z",
EndDate = "2021-05-29T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-29T10:30:00.000Z",
EndDate = "2021-05-29T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-05-29T13:00:00.000Z",
EndDate = "2021-05-29T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-29T15:30:00.000Z",
EndDate = "2021-05-29T16:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-29T17:20:00.000Z",
EndDate = "2021-05-29T19:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-30T06:30:00.000Z",
EndDate = "2021-05-30T08:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-30T08:30:00.000Z",
EndDate = "2021-05-30T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-30T10:30:00.000Z",
EndDate = "2021-05-30T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-05-30T13:00:00.000Z",
EndDate = "2021-05-30T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2021-05-30T15:30:00.000Z",
EndDate = "2021-05-30T16:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2021-05-30T17:20:00.000Z",
EndDate = "2021-05-30T19:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-05-31T06:30:00.000Z",
EndDate = "2021-05-31T08:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-05-31T08:30:00.000Z",
EndDate = "2021-05-31T09:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-05-31T10:20:00.000Z",
EndDate = "2021-05-31T12:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-05-31T13:00:00.000Z",
EndDate = "2021-05-31T14:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2021-05-31T15:00:00.000Z",
EndDate = "2021-05-31T16:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 20,
StartDate = "2021-05-31T17:00:00.000Z",
EndDate = "2021-05-31T18:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 15,
StartDate = "2021-05-31T18:50:00.000Z",
EndDate = "2021-05-31T19:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-01T06:00:00.000Z",
EndDate = "2021-06-01T07:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-01T08:30:00.000Z",
EndDate = "2021-06-01T10:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T10:30:00.000Z",
EndDate = "2021-06-01T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T12:30:00.000Z",
EndDate = "2021-06-01T14:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-01T14:30:00.000Z",
EndDate = "2021-06-01T15:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-01T17:00:00.000Z",
EndDate = "2021-06-01T19:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-02T06:00:00.000Z",
EndDate = "2021-06-02T07:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-02T08:00:00.000Z",
EndDate = "2021-06-02T09:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T10:00:00.000Z",
EndDate = "2021-06-02T11:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T12:30:00.000Z",
EndDate = "2021-06-02T14:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-02T14:30:00.000Z",
EndDate = "2021-06-02T15:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-02T17:00:00.000Z",
EndDate = "2021-06-02T19:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-03T06:00:00.000Z",
EndDate = "2021-06-03T07:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-03T08:00:00.000Z",
EndDate = "2021-06-03T09:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T10:00:00.000Z",
EndDate = "2021-06-03T11:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T12:30:00.000Z",
EndDate = "2021-06-03T14:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-03T14:30:00.000Z",
EndDate = "2021-06-03T15:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2021-06-03T17:00:00.000Z",
EndDate = "2021-06-03T19:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-04T06:00:00.000Z",
EndDate = "2021-06-04T07:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-04T08:00:00.000Z",
EndDate = "2021-06-04T09:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-04T10:00:00.000Z",
EndDate = "2021-06-04T11:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-04T12:30:00.000Z",
EndDate = "2021-06-04T14:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-04T15:00:00.000Z",
EndDate = "2021-06-04T16:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-04T17:00:00.000Z",
EndDate = "2021-06-04T18:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-05T06:00:00.000Z",
EndDate = "2021-06-05T07:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-05T08:00:00.000Z",
EndDate = "2021-06-05T09:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-05T10:00:00.000Z",
EndDate = "2021-06-05T11:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-05T12:30:00.000Z",
EndDate = "2021-06-05T14:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-05T15:00:00.000Z",
EndDate = "2021-06-05T16:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-05T17:00:00.000Z",
EndDate = "2021-06-05T18:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2021-06-06T06:00:00.000Z",
EndDate = "2021-06-06T07:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2021-06-06T08:00:00.000Z",
EndDate = "2021-06-06T09:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2021-06-06T10:00:00.000Z",
EndDate = "2021-06-06T11:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2021-06-06T12:30:00.000Z",
EndDate = "2021-06-06T14:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2021-06-06T15:00:00.000Z",
EndDate = "2021-06-06T16:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2021-06-06T17:00:00.000Z",
EndDate = "2021-06-06T18:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-24T06:30:00.000Z",
EndDate = "2021-05-24T08:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-24T09:00:00.000Z",
EndDate = "2021-05-24T10:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2021-05-24T11:00:00.000Z",
EndDate = "2021-05-24T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-24T13:10:00.000Z",
EndDate = "2021-05-24T14:18:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-05-24T14:30:00.000Z",
EndDate = "2021-05-24T16:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-24T16:30:00.000Z",
EndDate = "2021-05-24T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-05-24T18:20:00.000Z",
EndDate = "2021-05-24T19:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-25T06:30:00.000Z",
EndDate = "2021-05-25T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-25T08:30:00.000Z",
EndDate = "2021-05-25T10:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-25T10:30:00.000Z",
EndDate = "2021-05-25T12:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T13:00:00.000Z",
EndDate = "2021-05-25T14:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-25T14:30:00.000Z",
EndDate = "2021-05-25T16:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-05-25T16:40:00.000Z",
EndDate = "2021-05-25T18:13:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-25T18:40:00.000Z",
EndDate = "2021-05-25T19:48:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-26T06:30:00.000Z",
EndDate = "2021-05-26T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-26T08:30:00.000Z",
EndDate = "2021-05-26T10:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-26T10:30:00.000Z",
EndDate = "2021-05-26T12:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-26T13:00:00.000Z",
EndDate = "2021-05-26T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-26T15:30:00.000Z",
EndDate = "2021-05-26T16:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-05-26T17:20:00.000Z",
EndDate = "2021-05-26T19:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-27T06:30:00.000Z",
EndDate = "2021-05-27T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-27T08:30:00.000Z",
EndDate = "2021-05-27T10:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T10:30:00.000Z",
EndDate = "2021-05-27T12:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-27T13:00:00.000Z",
EndDate = "2021-05-27T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-27T15:30:00.000Z",
EndDate = "2021-05-27T16:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-27T17:20:00.000Z",
EndDate = "2021-05-27T19:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-28T06:10:00.000Z",
EndDate = "2021-05-28T07:43:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-28T08:00:00.000Z",
EndDate = "2021-05-28T09:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 5,
StartDate = "2021-05-28T10:10:00.000Z",
EndDate = "2021-05-28T12:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-28T12:40:00.000Z",
EndDate = "2021-05-28T14:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2021-05-28T15:20:00.000Z",
EndDate = "2021-05-28T16:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2021-05-28T17:20:00.000Z",
EndDate = "2021-05-28T19:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-29T07:00:00.000Z",
EndDate = "2021-05-29T08:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-29T09:00:00.000Z",
EndDate = "2021-05-29T10:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-29T11:00:00.000Z",
EndDate = "2021-05-29T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-05-29T13:30:00.000Z",
EndDate = "2021-05-29T15:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-29T16:00:00.000Z",
EndDate = "2021-05-29T17:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-05-29T17:30:00.000Z",
EndDate = "2021-05-29T19:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-30T07:00:00.000Z",
EndDate = "2021-05-30T08:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-05-30T09:00:00.000Z",
EndDate = "2021-05-30T10:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-30T11:00:00.000Z",
EndDate = "2021-05-30T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-30T13:30:00.000Z",
EndDate = "2021-05-30T15:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2021-05-30T16:00:00.000Z",
EndDate = "2021-05-30T17:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-30T17:30:00.000Z",
EndDate = "2021-05-30T19:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-05-31T07:00:00.000Z",
EndDate = "2021-05-31T08:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-05-31T09:00:00.000Z",
EndDate = "2021-05-31T10:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-05-31T11:00:00.000Z",
EndDate = "2021-05-31T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2021-05-31T13:30:00.000Z",
EndDate = "2021-05-31T15:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-05-31T15:30:00.000Z",
EndDate = "2021-05-31T17:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 20,
StartDate = "2021-05-31T18:00:00.000Z",
EndDate = "2021-05-31T19:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-01T06:30:00.000Z",
EndDate = "2021-06-01T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2021-06-01T09:00:00.000Z",
EndDate = "2021-06-01T10:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T11:00:00.000Z",
EndDate = "2021-06-01T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-01T13:30:00.000Z",
EndDate = "2021-06-01T15:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-01T16:00:00.000Z",
EndDate = "2021-06-01T17:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-06-01T18:00:00.000Z",
EndDate = "2021-06-01T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-02T07:00:00.000Z",
EndDate = "2021-06-02T08:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2021-06-02T09:00:00.000Z",
EndDate = "2021-06-02T10:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-02T11:00:00.000Z",
EndDate = "2021-06-02T12:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2021-06-02T13:30:00.000Z",
EndDate = "2021-06-02T15:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-02T16:00:00.000Z",
EndDate = "2021-06-02T17: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-03T06:30:00.000Z",
EndDate = "2021-06-03T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-03T08:30:00.000Z",
EndDate = "2021-06-03T10:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2021-06-03T11:00:00.000Z",
EndDate = "2021-06-03T12:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-03T13:00:00.000Z",
EndDate = "2021-06-03T14:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-03T15:10:00.000Z",
EndDate = "2021-06-03T16:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2021-06-03T17:30:00.000Z",
EndDate = "2021-06-03T19:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-04T06:30:00.000Z",
EndDate = "2021-06-04T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-04T08:30:00.000Z",
EndDate = "2021-06-04T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2021-06-04T11:00:00.000Z",
EndDate = "2021-06-04T12:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-04T13:00:00.000Z",
EndDate = "2021-06-04T14:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-04T15:10:00.000Z",
EndDate = "2021-06-04T16:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2021-06-04T17:20:00.000Z",
EndDate = "2021-06-04T19:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-05T06:30:00.000Z",
EndDate = "2021-06-05T08:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-05T08:30:00.000Z",
EndDate = "2021-06-05T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-05T10:30:00.000Z",
EndDate = "2021-06-05T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-05T13:00:00.000Z",
EndDate = "2021-06-05T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-05T15:30:00.000Z",
EndDate = "2021-06-05T16:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2021-06-05T17:30:00.000Z",
EndDate = "2021-06-05T19:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2021-06-06T06:30:00.000Z",
EndDate = "2021-06-06T08:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2021-06-06T08:30:00.000Z",
EndDate = "2021-06-06T10:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2021-06-06T10:30:00.000Z",
EndDate = "2021-06-06T12:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2021-06-06T13:00:00.000Z",
EndDate = "2021-06-06T15:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2021-06-06T15:30:00.000Z",
EndDate = "2021-06-06T16:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 15,
StartDate = "2021-06-06T17:30:00.000Z",
EndDate = "2021-06-06T19:02:00.000Z"
}
};
}
}
using System;
namespace DevExtreme.NETCore.Demos.Models {
public class CinemaAppointment : Appointment {
public int TheatreId { get; set; }
public int MovieId { get; set; }
public int Price { 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 readonly IEnumerable<Movie> Movies = new[] {
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 IEnumerable<CinemaAppointment> CinemaData { get; set; }
public IEnumerable<Movie> Movies { get; set; }
public IEnumerable<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 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;
}