JavaScript/jQuery Scheduler - Custom Templates

The JavaScript Scheduler contains the following properties used to specify custom templates globally and for individual views.

Appointment rectangle: appointmentTemplate / views[].appointmentTemplate
Tooltip: appointmentTooltipTemplate / views[].appointmentTooltipTemplate.

To customize the appointment details form, implement the onAppointmentFormOpening handler. In this demo, this handler adds custom fields to the appointment details form.

www.wikipedia.org

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: ['day', 'week', 'timelineDay'], currentView: 'day', currentDate: new Date(2021, 3, 27), 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(model) { return getTooltipTemplate(getMovieById(model.targetedAppointmentData.movieId)); }, appointmentTemplate(model) { const movieInfo = getMovieById(model.targetedAppointmentData.movieId) || {}; return $(`${"<div class='showtime-preview'>" + '<div>'}${movieInfo.text}</div>` + `<div>Ticket Price: <strong>$${model.targetedAppointmentData.price}</strong>` + '</div>' + `<div>${DevExpress.localization.formatDate(model.targetedAppointmentData.displayStartDate, 'shortTime') } - ${DevExpress.localization.formatDate(model.targetedAppointmentData.displayEndDate, 'shortTime') }</div>` + '</div>'); }, onAppointmentFormOpening(data) { const { form } = data; let movieInfo = getMovieById(data.appointmentData.movieId) || {}; let { startDate } = data.appointmentData; form.option('items', [{ label: { text: 'Movie', }, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: moviesData, displayExpr: 'text', valueExpr: 'id', onValueChanged(args) { movieInfo = getMovieById(args.value); form.updateData('director', movieInfo.director); form.updateData('endDate', 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(args) { startDate = args.value; form.updateData('endDate', 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(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" lang="en"> <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=5.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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <script src="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; }