Custom Templates

$(function(){ $("#scheduler").dxScheduler({ dataSource: data, views: ["day", "week", "timelineDay"], currentView: "day", currentDate: new Date(2015, 4, 25), firstDayOfWeek: 0, startDayHour: 9, endDayHour: 23, showAllDayPanel: false, height: 600, groups: ["theatreId"], crossScrollingEnabled: true, cellDuration: 20, editing: { allowAdding: false }, resources: [{ fieldExpr: "movieId", dataSource: moviesData, useColorAsDefault: true }, { fieldExpr: "theatreId", dataSource: theatreData }], appointmentTooltipTemplate: function(model) { return getTooltipTemplate(getMovieById(model.appointmentData.movieId)); }, appointmentTemplate: function(model) { var movieInfo = getMovieById(model.appointmentData.movieId) || {}; return $("<div class='showtime-preview'>" + "<div>" + movieInfo.text + "</div>" + "<div>Ticket Price: <strong>$" + model.appointmentData.price + "</strong>" + "</div>" + "<div>" + Globalize.formatDate(model.appointmentData.startDate, { time: "short" }) + " - " + Globalize.formatDate(model.appointmentData.endDate, { time: "short" }) + "</div>" + "</div>"); }, onAppointmentFormOpening: function(data) { var form = data.form, movieInfo = getMovieById(data.appointmentData.movieId) || {}, startDate = data.appointmentData.startDate; form.option("items", [{ label: { text: "Movie" }, editorType: "dxSelectBox", dataField: "movieId", editorOptions: { items: moviesData, displayExpr: "text", valueExpr: "id", onValueChanged: function(args) { movieInfo = getMovieById(args.value); form.getEditor("director") .option("value", movieInfo.director); form.getEditor("endDate") .option("value", new Date (startDate.getTime() + 60 * 1000 * movieInfo.duration)); } }, }, { label: { text: "Director" }, name: "director", editorType: "dxTextBox", editorOptions: { value: movieInfo.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 * movieInfo.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; } } } ]); } }).dxScheduler("instance"); function getMovieById(id) { return DevExpress.data.query(moviesData) .filter("id", id) .toArray()[0]; } function getTooltipTemplate(movieData) { return $("<div class='movie-tooltip'>" + "<img src='" + movieData.image + "' />" + "<div class='movie-info'>" + "<div class='movie-title'>" + movieData.text + " (" + movieData.year + ")" + "</div>" + "<div>" + "Director: " + movieData.director + "</div>" + "<div>" + "Duration: " + movieData.duration + " minutes" + "</div>" + "</div>" + "</div>"); } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.1.8/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="long-title"><h3>DXCinema Show Times</h3></div> <div id="scheduler"></div> </div> </body> </html>

.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; }

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC