Backend API
@model DevExtreme.NETCore.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(2025, 4, 27))
.FirstDayOfWeek(FirstDayOfWeek.Sunday)
.StartDayHour(9)
.EndDayHour(23)
.ShowAllDayPanel(false)
.Height(600)
.Groups(new[] { "TheatreId" })
.CrossScrollingEnabled(true)
.CellDuration(20)
.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");
})
.AppointmentTemplate(@<text>
<%
var movie = getMovieById(targetedAppointmentData.MovieId) || {};
%>
<div class="movie-preview">
<div class="movie-preview-image">
<img src="<%- movie.Image %>" alt="" />
</div>
<div class="movie-details">
<div class="title"><%- movie.Text %></div>
<div>Ticket Price: <b>$<%- targetedAppointmentData.Price %></b></div>
<div>
<%- DevExpress.localization.formatDate(targetedAppointmentData.displayStartDate, 'shortTime') %> -
<%- DevExpress.localization.formatDate(targetedAppointmentData.displayEndDate, 'shortTime') %>
</div>
</div>
</div>
</text>)
.AppointmentTooltipTemplate(@<text>
<%
var movie = getMovieById(appointmentData.MovieId);
%>
<div class="movie-info">
<div class="movie-preview-image">
<img src="<%- movie.Image %>" alt="" />
</div>
<div class="movie-details">
<div class="title"><%- movie.Text %> (<%- movie.Year %>)</div>
<div>Director: <%- movie.Director %></div>
<div>Duration: <%- movie.Duration %> minutes</div>
</div>
</div>
</text>)
.Editing(e => e
.AllowAdding(false)
.Form(form => form
.OnInitialized("onFormInitialized")
.Items(items =>
{
items.AddSimple()
.Template(new JS("movieInfoTemplateFunc"));
items.AddGroup()
.ColCount(2)
.ColCountByScreen(o => o.Xs(2))
.Items(groupItems =>
{
groupItems.AddSimple()
.DataField("MovieId")
.Label(l => l.Text("Movie"))
.ColSpan(1)
.Editor(e => e.SelectBox()
.DataSource(Model.Movies)
.DisplayExpr("Text")
.ValueExpr("ID")
.Option("stylingMode", new JS("getEditorStylingMode()"))
.OnValueChanged("onMovieChanged")
.OnContentReady("function(e) { e.component.option('stylingMode', getEditorStylingMode()); }")
);
groupItems.AddSimple()
.DataField("Price")
.Label(l => l.Text("Price"))
.ColSpan(1)
.Editor(e => e.SelectBox()
.DataSource(new[] { 5, 10, 15, 20 })
.DisplayExpr(new JS("function(value) { return '$' + value; }"))
.Option("stylingMode", new JS("getEditorStylingMode()"))
.OnContentReady("function(e) { e.component.option('stylingMode', getEditorStylingMode()); }")
);
});
items.AddGroup()
.Name("startDateGroup");
items.AddGroup()
.Name("endDateGroup")
.Option("disabled", true);
})
)
.Popup(popup => popup
.MaxWidth(440)
.OnOptionChanged("onPopupOptionChanged")
)
)
)
<script>
const moviesData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.Movies));
let form;
let $movieInfoContainer;
function getMovieById(id) {
return DevExpress.data.query(moviesData)
.filter("ID", id)
.toArray()[0];
}
function updateEndDate(form, movie) {
const formData = form.option('formData');
const startDate = formData.StartDate;
const newEndDate = new Date(new Date(startDate).getTime() + 60 * 1000 * movie.Duration);
form.updateData('EndDate', newEndDate);
}
function movieInfoTemplate(movie) {
const $container = $('<div>').addClass('movie-info');
const $imageDiv = $('<div>').addClass('movie-preview-image');
const $img = $('<img>').attr('src', movie.Image);
$imageDiv.append($img);
const $detailsDiv = $('<div>').addClass('movie-details');
const $titleDiv = $('<div>').addClass('title').text(movie.Text + ' (' + movie.Year + ')');
const $directorDiv = $('<div>').text('Director: ' + movie.Director);
const $durationDiv = $('<div>').text('Duration: ' + movie.Duration + ' minutes');
$detailsDiv.append($titleDiv).append($directorDiv).append($durationDiv);
$container.append($imageDiv).append($detailsDiv);
return $container;
}
function updateMovieInfoContainer(movie) {
const $movieInfo = movieInfoTemplate(movie);
$movieInfoContainer.empty().append($movieInfo);
}
function movieInfoTemplateFunc() {
$movieInfoContainer = $('<div class="movie-info-container">');
updateMovieInfoContainer({});
return $movieInfoContainer;
}
function onFormInitialized(e) {
form = e.component;
form.on('fieldDataChanged', function(e) {
if (e.dataField === 'StartDate') {
const movie = getMovieById(form.option('formData').MovieId);
updateEndDate(form, movie);
}
});
}
function onMovieChanged(e) {
const movie = getMovieById(e.value);
updateMovieInfoContainer(movie);
updateEndDate(form, movie);
}
function onPopupOptionChanged(e) {
if (e.fullName === 'toolbarItems' && e.value) {
e.value.forEach(function(item, index) {
if (item.shortcut === 'done' || item.shortcut === 'cancel') {
e.component.option('toolbarItems[' + index + '].toolbar', 'bottom');
}
});
}
}
function getEditorStylingMode() {
return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined';
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
namespace DevExtreme.NETCore.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Templates() {
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 = "2025-04-26T16:10:00.000Z",
EndDate = "2025-04-26T18:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-04-26T18:30:00.000Z",
EndDate = "2025-04-26T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2025-04-26T20:30:00.000Z",
EndDate = "2025-04-26T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2025-04-26T23:00:00.000Z",
EndDate = "2025-04-27T00:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2025-04-27T00:30:00.000Z",
EndDate = "2025-04-27T02:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2025-04-27T02:30:00.000Z",
EndDate = "2025-04-27T04:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2025-04-27T04:20:00.000Z",
EndDate = "2025-04-27T05:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-04-27T16:10:00.000Z",
EndDate = "2025-04-27T18:20:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-04-27T19:00:00.000Z",
EndDate = "2025-04-27T20:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2025-04-27T21:00:00.000Z",
EndDate = "2025-04-27T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2025-04-27T23:20:00.000Z",
EndDate = "2025-04-28T00:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2025-04-28T01:00:00.000Z",
EndDate = "2025-04-28T02:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 15,
StartDate = "2025-04-28T03:00:00.000Z",
EndDate = "2025-04-28T04:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2025-04-28T04:50:00.000Z",
EndDate = "2025-04-28T05:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-04-28T16:00:00.000Z",
EndDate = "2025-04-28T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-04-28T18:00:00.000Z",
EndDate = "2025-04-28T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-04-28T20:20:00.000Z",
EndDate = "2025-04-28T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-04-28T22:45:00.000Z",
EndDate = "2025-04-29T00:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2025-04-29T01:20:00.000Z",
EndDate = "2025-04-29T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 20,
StartDate = "2025-04-29T03:00:00.000Z",
EndDate = "2025-04-29T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-04-29T16:00:00.000Z",
EndDate = "2025-04-29T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-04-29T18:00:00.000Z",
EndDate = "2025-04-29T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-04-29T20:20:00.000Z",
EndDate = "2025-04-29T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-04-29T22:45:00.000Z",
EndDate = "2025-04-30T00:55:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2025-04-30T01:20:00.000Z",
EndDate = "2025-04-30T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-04-30T03:00:00.000Z",
EndDate = "2025-04-30T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-04-30T16:30:00.000Z",
EndDate = "2025-04-30T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-04-30T18:30:00.000Z",
EndDate = "2025-04-30T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 5,
StartDate = "2025-04-30T20:30:00.000Z",
EndDate = "2025-04-30T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-04-30T23:00:00.000Z",
EndDate = "2025-05-01T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 5,
StartDate = "2025-05-01T01:30:00.000Z",
EndDate = "2025-05-01T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2025-05-01T03:20:00.000Z",
EndDate = "2025-05-01T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-01T16:30:00.000Z",
EndDate = "2025-05-01T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 10,
StartDate = "2025-05-01T18:30:00.000Z",
EndDate = "2025-05-01T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-01T20:30:00.000Z",
EndDate = "2025-05-01T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-05-01T23:00:00.000Z",
EndDate = "2025-05-02T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2025-05-02T01:30:00.000Z",
EndDate = "2025-05-02T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-02T03:20:00.000Z",
EndDate = "2025-05-02T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-02T16:30:00.000Z",
EndDate = "2025-05-02T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-02T18:30:00.000Z",
EndDate = "2025-05-02T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-02T20:30:00.000Z",
EndDate = "2025-05-02T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-05-02T23:00:00.000Z",
EndDate = "2025-05-03T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 10,
StartDate = "2025-05-03T01:30:00.000Z",
EndDate = "2025-05-03T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 15,
StartDate = "2025-05-03T03:20:00.000Z",
EndDate = "2025-05-03T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-03T16:30:00.000Z",
EndDate = "2025-05-03T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-03T18:30:00.000Z",
EndDate = "2025-05-03T19:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-03T20:20:00.000Z",
EndDate = "2025-05-03T22:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-03T23:00:00.000Z",
EndDate = "2025-05-04T00:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 10,
StartDate = "2025-05-04T01:00:00.000Z",
EndDate = "2025-05-04T02:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 20,
StartDate = "2025-05-04T03:00:00.000Z",
EndDate = "2025-05-04T04:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 4,
Price = 15,
StartDate = "2025-05-04T04:50:00.000Z",
EndDate = "2025-05-04T05:58:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-04T16:30:00.000Z",
EndDate = "2025-05-04T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-04T18:30:00.000Z",
EndDate = "2025-05-04T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-04T20:30:00.000Z",
EndDate = "2025-05-04T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-04T22:30:00.000Z",
EndDate = "2025-05-05T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-05T00:30:00.000Z",
EndDate = "2025-05-05T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-05-05T03:00:00.000Z",
EndDate = "2025-05-05T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-05T16:00:00.000Z",
EndDate = "2025-05-05T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-05T18:00:00.000Z",
EndDate = "2025-05-05T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-05T20:00:00.000Z",
EndDate = "2025-05-05T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-05T22:30:00.000Z",
EndDate = "2025-05-06T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-06T00:30:00.000Z",
EndDate = "2025-05-06T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-05-06T03:00:00.000Z",
EndDate = "2025-05-06T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-06T16:00:00.000Z",
EndDate = "2025-05-06T17:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-06T18:00:00.000Z",
EndDate = "2025-05-06T19:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-06T20:00:00.000Z",
EndDate = "2025-05-06T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-06T22:30:00.000Z",
EndDate = "2025-05-07T00:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-07T00:30:00.000Z",
EndDate = "2025-05-07T01:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 15,
StartDate = "2025-05-07T03:00:00.000Z",
EndDate = "2025-05-07T05:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-07T16:00:00.000Z",
EndDate = "2025-05-07T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-07T18:00:00.000Z",
EndDate = "2025-05-07T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-07T20:00:00.000Z",
EndDate = "2025-05-07T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-05-07T22:30:00.000Z",
EndDate = "2025-05-08T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-08T01:00:00.000Z",
EndDate = "2025-05-08T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2025-05-08T03:00:00.000Z",
EndDate = "2025-05-08T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-08T16:00:00.000Z",
EndDate = "2025-05-08T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-08T18:00:00.000Z",
EndDate = "2025-05-08T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-08T20:00:00.000Z",
EndDate = "2025-05-08T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-05-08T22:30:00.000Z",
EndDate = "2025-05-09T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-09T01:00:00.000Z",
EndDate = "2025-05-09T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2025-05-09T03:00:00.000Z",
EndDate = "2025-05-09T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 2,
Price = 5,
StartDate = "2025-05-09T16:00:00.000Z",
EndDate = "2025-05-09T17:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 5,
StartDate = "2025-05-09T18:00:00.000Z",
EndDate = "2025-05-09T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 3,
Price = 10,
StartDate = "2025-05-09T20:00:00.000Z",
EndDate = "2025-05-09T21:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 5,
Price = 10,
StartDate = "2025-05-09T22:30:00.000Z",
EndDate = "2025-05-10T00:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 6,
Price = 15,
StartDate = "2025-05-10T01:00:00.000Z",
EndDate = "2025-05-10T02:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 0,
MovieId = 1,
Price = 15,
StartDate = "2025-05-10T03:00:00.000Z",
EndDate = "2025-05-10T04:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-04-26T16:10:00.000Z",
EndDate = "2025-04-26T18:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-04-26T19:00:00.000Z",
EndDate = "2025-04-26T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2025-04-26T21:00:00.000Z",
EndDate = "2025-04-26T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2025-04-26T23:10:00.000Z",
EndDate = "2025-04-27T00:18:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2025-04-27T00:30:00.000Z",
EndDate = "2025-04-27T02:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2025-04-27T02:30:00.000Z",
EndDate = "2025-04-27T04:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2025-04-27T04:20:00.000Z",
EndDate = "2025-04-27T05:53:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-04-27T16:30:00.000Z",
EndDate = "2025-04-27T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-04-27T18:30:00.000Z",
EndDate = "2025-04-27T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-04-27T20:30:00.000Z",
EndDate = "2025-04-27T22:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2025-04-27T23:00:00.000Z",
EndDate = "2025-04-28T00:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2025-04-28T00:30:00.000Z",
EndDate = "2025-04-28T02:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2025-04-28T02:40:00.000Z",
EndDate = "2025-04-28T04:13:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2025-04-28T04:40:00.000Z",
EndDate = "2025-04-28T05:48:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-04-28T16:30:00.000Z",
EndDate = "2025-04-28T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-04-28T18:30:00.000Z",
EndDate = "2025-04-28T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-04-28T20:30:00.000Z",
EndDate = "2025-04-28T22:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-04-28T23:00:00.000Z",
EndDate = "2025-04-29T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2025-04-29T01:30:00.000Z",
EndDate = "2025-04-29T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2025-04-29T03:20:00.000Z",
EndDate = "2025-04-29T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-04-29T16:30:00.000Z",
EndDate = "2025-04-29T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-04-29T18:30:00.000Z",
EndDate = "2025-04-29T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-04-29T20:30:00.000Z",
EndDate = "2025-04-29T22:41:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-04-29T23:00:00.000Z",
EndDate = "2025-04-30T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2025-04-30T01:30:00.000Z",
EndDate = "2025-04-30T02:38:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-04-30T03:20:00.000Z",
EndDate = "2025-04-30T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-04-30T16:10:00.000Z",
EndDate = "2025-04-30T17:43:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-04-30T18:00:00.000Z",
EndDate = "2025-04-30T19:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 5,
StartDate = "2025-04-30T20:10:00.000Z",
EndDate = "2025-04-30T22:01:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-04-30T22:40:00.000Z",
EndDate = "2025-05-01T00:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 5,
StartDate = "2025-05-01T01:20:00.000Z",
EndDate = "2025-05-01T02:28:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 15,
StartDate = "2025-05-01T03:20:00.000Z",
EndDate = "2025-05-01T05:11:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-01T17:00:00.000Z",
EndDate = "2025-05-01T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2025-05-01T19:00:00.000Z",
EndDate = "2025-05-01T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-01T21:00:00.000Z",
EndDate = "2025-05-01T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-05-01T23:30:00.000Z",
EndDate = "2025-05-02T01:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2025-05-02T02:00:00.000Z",
EndDate = "2025-05-02T03:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2025-05-02T03:30:00.000Z",
EndDate = "2025-05-02T05:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-02T17:00:00.000Z",
EndDate = "2025-05-02T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-02T19:00:00.000Z",
EndDate = "2025-05-02T20:32:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-02T21:00:00.000Z",
EndDate = "2025-05-02T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-05-02T23:30:00.000Z",
EndDate = "2025-05-03T01:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 4,
Price = 10,
StartDate = "2025-05-03T02:00:00.000Z",
EndDate = "2025-05-03T03:08:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-05-03T03:30:00.000Z",
EndDate = "2025-05-03T05:50:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-03T17:00:00.000Z",
EndDate = "2025-05-03T18:33:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-03T19:00:00.000Z",
EndDate = "2025-05-03T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-03T21:00:00.000Z",
EndDate = "2025-05-03T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 10,
StartDate = "2025-05-03T23:30:00.000Z",
EndDate = "2025-05-04T01:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-05-04T01:30:00.000Z",
EndDate = "2025-05-04T03:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 20,
StartDate = "2025-05-04T04:00:00.000Z",
EndDate = "2025-05-04T05:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-04T16:30:00.000Z",
EndDate = "2025-05-04T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2025-05-04T19:00:00.000Z",
EndDate = "2025-05-04T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-04T21:00:00.000Z",
EndDate = "2025-05-04T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-04T23:30:00.000Z",
EndDate = "2025-05-05T01:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-05T01:30:00.000Z",
EndDate = "2025-05-05T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2025-05-05T03:30:00.000Z",
EndDate = "2025-05-05T05:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-05T16:30:00.000Z",
EndDate = "2025-05-05T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 5,
StartDate = "2025-05-05T19:00:00.000Z",
EndDate = "2025-05-05T20:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-05T21:00:00.000Z",
EndDate = "2025-05-05T22:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 10,
StartDate = "2025-05-05T23:30:00.000Z",
EndDate = "2025-05-06T01:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-06T01:30:00.000Z",
EndDate = "2025-05-06T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2025-05-06T03:30:00.000Z",
EndDate = "2025-05-06T05:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-06T16:30:00.000Z",
EndDate = "2025-05-06T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-06T18:30:00.000Z",
EndDate = "2025-05-06T20:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2025-05-06T21:00:00.000Z",
EndDate = "2025-05-06T22:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-06T23:00:00.000Z",
EndDate = "2025-05-07T00:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-07T01:10:00.000Z",
EndDate = "2025-05-07T02:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 20,
StartDate = "2025-05-07T03:30:00.000Z",
EndDate = "2025-05-07T05:40:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-07T16:30:00.000Z",
EndDate = "2025-05-07T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-07T18:30:00.000Z",
EndDate = "2025-05-07T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 10,
StartDate = "2025-05-07T21:00:00.000Z",
EndDate = "2025-05-07T22:27:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-05-07T23:00:00.000Z",
EndDate = "2025-05-08T00:51:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-08T01:10:00.000Z",
EndDate = "2025-05-08T02:37:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 15,
StartDate = "2025-05-08T03:20:00.000Z",
EndDate = "2025-05-08T05:30:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-08T16:30:00.000Z",
EndDate = "2025-05-08T18:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-08T18:30:00.000Z",
EndDate = "2025-05-08T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-08T20:30:00.000Z",
EndDate = "2025-05-08T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-05-08T23:00:00.000Z",
EndDate = "2025-05-09T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-09T01:30:00.000Z",
EndDate = "2025-05-09T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 15,
StartDate = "2025-05-09T03:30:00.000Z",
EndDate = "2025-05-09T05:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 2,
Price = 5,
StartDate = "2025-05-09T16:30:00.000Z",
EndDate = "2025-05-09T18:03:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 5,
StartDate = "2025-05-09T18:30:00.000Z",
EndDate = "2025-05-09T20:02:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 3,
Price = 10,
StartDate = "2025-05-09T20:30:00.000Z",
EndDate = "2025-05-09T22:21:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 5,
Price = 10,
StartDate = "2025-05-09T23:00:00.000Z",
EndDate = "2025-05-10T01:10:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 6,
Price = 15,
StartDate = "2025-05-10T01:30:00.000Z",
EndDate = "2025-05-10T02:57:00.000Z"
},
new CinemaAppointment {
TheatreId = 1,
MovieId = 1,
Price = 15,
StartDate = "2025-05-10T03:30:00.000Z",
EndDate = "2025-05-10T05: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 = "#9FD89F"
},
new Movie {
ID = 2,
Text = "Royal Wedding",
Director = "Stanley Donen",
Year = 1951,
Image = "../../images/movies/RoyalWedding.jpg",
Duration = 93,
Color = "#F1BBBC"
},
new Movie {
ID = 3,
Text = "A Star Is Born",
Director = "William A. Wellman",
Year = 1937,
Image = "../../images/movies/AStartIsBorn.jpg",
Duration = 111,
Color = "#F9E2AE"
},
new Movie {
ID = 4,
Text = "The Screaming Skull",
Director = "Alex Nicol",
Year = 1958,
Image = "../../images/movies/ScreamingSkull.jpg",
Duration = 68,
Color = "#EDBBE7"
},
new Movie {
ID = 5,
Text = "It's a Wonderful Life",
Director = "Frank Capra",
Year = 1946,
Image = "../../images/movies/ItsAWonderfulLife.jpg",
Duration = 130,
Color = "#B4D6FA"
},
new Movie {
ID = 6,
Text = "City Lights",
Director = "Charlie Chaplin",
Year = 1931,
Image = "../../images/movies/CityLights.jpg",
Duration = 87,
Color = "#C6B1DE"
}
};
}
}
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-scheduler-work-space-week .dx-scheduler-date-table {
width: 3500px;
}
.dx-scheduler-timeline-day .dx-scheduler-date-table {
width: 3500px;
}
.dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
padding: 12px;
}
.movie-preview-image {
max-height: 80px;
max-width: 80px;
min-height: 60px;
min-width: 60px;
border-radius: 2px;
overflow: hidden;
}
.movie-preview-image img {
width: 100%;
position: relative;
top: -25%;
pointer-events: none;
}
.movie-preview {
display: flex;
gap: 8px;
max-height: 100%;
white-space: normal;
}
.movie-preview>.movie-details {
font-size: 12px;
color: #242424;
}
.movie-preview>.movie-details>.title {
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.movie-info-container {
border-radius: 8px;
padding-bottom: 8px;
}
.movie-info {
display: flex;
gap: 12px;
}
.dx-theme-material .movie-info {
gap: 16px;
}
.movie-info .movie-preview-image {
border: 1px solid var(--dx-color-border);
}
.movie-info .movie-details {
text-align: left;
}
.movie-info .movie-details>.title {
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
}
.dx-scheduler-form-end-date-group.dx-field-item {
padding-bottom: 12px;
}
.long-title h3 {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}
.dx-scheduler-appointment::before {
opacity: 0.26 !important;
}
You can customize the following DevExtreme Scheduler elements using custom templates (globally and for individual views):
-
Appointment rectangle: appointmentTemplate / views[].appointmentTemplate
-
Tooltip: appointmentTooltipTemplate / views[].appointmentTooltipTemplate.
Image Source: Wikimedia Commons