JavaScript/jQuery Scheduler - Edit Form and Templates

You can double-click a DevExtreme JavaScript Scheduler appointment or an empty cell to activate our built in edit form. Our JavaScript Scheduler allows you to customize the form as needs dictate (rearrange items, create custom fields, and specify popup settings).

The form includes two groups: mainGroup (general information) and recurrenceGroup (recurrence settings). JavaScript Scheduler displays mainGroup first and switches to recurrenceGroup when users change the "Repeat" drop-down. Configure editing.form to customize form layout and editing.popup to customize the dialog window. This demo configures these objects to add custom fields (movieId and price) to the edit form.

For additional information, refer to the following help topic: Appointment Edit Form.

www.wikipedia.org

Backend API

$(() => { let form; let $movieInfoContainer; $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: ['day', 'week', 'timelineDay'], currentView: 'day', currentDate: new Date(2025, 3, 27), firstDayOfWeek: 0, startDayHour: 9, endDayHour: 23, showAllDayPanel: false, height: 600, groups: ['theatreId'], crossScrollingEnabled: true, cellDuration: 20, resources: [{ fieldExpr: 'movieId', dataSource: moviesData, useColorAsDefault: true, }, { fieldExpr: 'theatreId', dataSource: theatreData, }], appointmentTemplate, appointmentTooltipTemplate: (model) => { const movie = getMovieById(model.targetedAppointmentData.movieId); return movieInfoTemplate(movie); }, editing: { allowAdding: false, form: { onInitialized: (e) => { form = e.component; form.on('fieldDataChanged', (e) => { if (e.dataField === 'startDate') { const movie = getMovieById(form.option('formData').movieId); updateEndDate(form, movie); } }); }, items: [ { template: () => { $movieInfoContainer = $('<div class="movie-info-container">'); updateMovieInfoContainer({}); return $movieInfoContainer; }, }, { itemType: 'group', colCount: 2, colCountByScreen: { xs: 2 }, items: [ { label: { text: 'Movie' }, colSpan: 1, editorType: 'dxSelectBox', dataField: 'movieId', editorOptions: { items: moviesData, displayExpr: 'text', valueExpr: 'id', stylingMode: getEditorStylingMode(), onValueChanged(e) { const movie = getMovieById(e.value); form.updateData('director', movie.director); updateMovieInfoContainer(movie); updateEndDate(form, movie); }, onContentReady: (e) => { e.component.option('stylingMode', getEditorStylingMode()); }, }, }, { label: { text: 'Price' }, colSpan: 1, editorType: 'dxSelectBox', dataField: 'price', editorOptions: { items: [5, 10, 15, 20], displayExpr: (value) => `$${value}`, stylingMode: getEditorStylingMode(), onContentReady: (e) => { e.component.option('stylingMode', getEditorStylingMode()); }, }, }, ], }, 'startDateGroup', { name: 'endDateGroup', disabled: true, }, ], }, popup: { maxWidth: 440, onOptionChanged: (e) => { if (e.fullName === 'toolbarItems' && e.value) { e.value.forEach((item, index) => { if (item.shortcut === 'done' || item.shortcut === 'cancel') { e.component.option(`toolbarItems[${index}].toolbar`, 'bottom'); } }); } }, }, }, }).dxScheduler('instance'); function getMovieById(id) { return DevExpress.data.query(moviesData) .filter('id', id) .toArray()[0]; } function updateEndDate(form, movie) { const { startDate } = form.option('formData'); const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration); form.updateData('endDate', newEndDate); } function appointmentTemplate(model) { const { movieId, displayStartDate, displayEndDate, price } = model.targetedAppointmentData; const movie = getMovieById(movieId) || {}; return $(` <div class='movie-preview'> <div class='movie-preview-image'> <img src='${movie.image}' alt='${movie.text} poster' /> </div> <div class='movie-details'> <div class='title'>${movie.text}</div> <div>Ticket Price: <b>$${price}</b></div> <div> ${DevExpress.localization.formatDate(displayStartDate, 'shortTime')} - ${DevExpress.localization.formatDate(displayEndDate, 'shortTime')} </div> </div> </div> `); } function movieInfoTemplate(movie) { return $(` <div class='movie-info'> <div class='movie-preview-image'> <img src='${movie.image}' alt='${movie.text} poster' /> </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> `); } function updateMovieInfoContainer(movie) { const $movieInfo = movieInfoTemplate(movie); $movieInfoContainer.empty().append($movieInfo); } function getEditorStylingMode() { return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined'; } });

<!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://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/event.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/supplemental.js"></script> <script src="https://cdn.jsdelivr.net/npm/cldrjs@0.5.5/dist/cldr/unresolved.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.5/css/dx.light.css" /> <script src="js/dx.all.js?v=25.2.5"></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-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 JavaScript Scheduler elements using custom templates (globally and for individual views):

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

Image Source: Wikimedia Commons