JavaScript/jQuery Scheduler - Create from Selection

This demo creates a new appointment from a multi-cell selection. Click and drag across two or more time cells to select a range. Our JavaScript Scheduler opens the appointment popup pre-populated with the corresponding start date, end date, and resource group.

Also available for:

ASP.NET Core ASP.NET MVC 5

Backend API

$(() => { $('#scheduler').dxScheduler({ timeZone: 'America/Los_Angeles', dataSource: data, views: [{ type: 'workWeek', groupOrientation: 'horizontal', cellDuration: 30, }], currentView: 'workWeek', currentDate: new Date(2021, 3, 21), startDayHour: 9, endDayHour: 16, groups: ['priorityId'], resources: [{ fieldExpr: 'priorityId', allowMultiple: false, dataSource: priorityData, label: 'Priority', }], showCurrentTimeIndicator: false, allDayPanelMode: 'allDay', onSelectionEnd(e) { const cells = e.selectedCellData; if (cells.length <= 1) { return; } const startDate = cells[0].startDateUTC || cells[0].startDate; const endDate = cells[cells.length - 1].endDateUTC || cells[cells.length - 1].endDate; e.component.showAppointmentPopup({ startDate, endDate, allDay: cells[0].allDay, ...cells[0].groups, }, true); }, }); });

<!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> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.3/css/dx.light.css" /> <script src="js/dx.all.js?v=26.1.3"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="scheduler"></div> </div> </body> </html>

const data = [ { text: 'Website Re-Design Plan', priorityId: 2, startDate: new Date('2021-04-19T16:30:00.000Z'), endDate: new Date('2021-04-19T18:30:00.000Z'), }, { text: 'Book Flights to San Fran for Sales Trip', priorityId: 1, startDate: new Date('2021-04-22T17:00:00.000Z'), endDate: new Date('2021-04-22T19:00:00.000Z'), }, { text: 'Install New Router in Dev Room', priorityId: 1, startDate: new Date('2021-04-19T20:00:00.000Z'), endDate: new Date('2021-04-19T22:30:00.000Z'), }, { text: 'Approve Personal Computer Upgrade Plan', priorityId: 2, startDate: new Date('2021-04-20T17:00:00.000Z'), endDate: new Date('2021-04-20T18:00:00.000Z'), }, { text: 'Final Budget Review', priorityId: 2, startDate: new Date('2021-04-20T19:00:00.000Z'), endDate: new Date('2021-04-20T20:35:00.000Z'), }, { text: 'New Brochures', priorityId: 2, startDate: new Date('2021-04-19T20:00:00.000Z'), endDate: new Date('2021-04-19T22:15:00.000Z'), }, { text: 'Install New Database', priorityId: 1, startDate: new Date('2021-04-20T16:00:00.000Z'), endDate: new Date('2021-04-20T19:15:00.000Z'), }, { text: 'Approve New Online Marketing Strategy', priorityId: 2, startDate: new Date('2021-04-21T19:00:00.000Z'), endDate: new Date('2021-04-21T21:00:00.000Z'), }, { text: 'Upgrade Personal Computers', priorityId: 1, startDate: new Date('2021-04-19T16:00:00.000Z'), endDate: new Date('2021-04-19T18:30:00.000Z'), }, { text: 'Prepare 2021 Marketing Plan', priorityId: 2, startDate: new Date('2021-04-22T18:00:00.000Z'), endDate: new Date('2021-04-22T20:30:00.000Z'), }, { text: 'Brochure Design Review', priorityId: 1, startDate: new Date('2021-04-21T18:00:00.000Z'), endDate: new Date('2021-04-21T20:30:00.000Z'), }, { text: 'Create Icons for Website', priorityId: 2, startDate: new Date('2021-04-23T17:00:00.000Z'), endDate: new Date('2021-04-23T18:30:00.000Z'), }, { text: 'Upgrade Server Hardware', priorityId: 1, startDate: new Date('2021-04-23T16:00:00.000Z'), endDate: new Date('2021-04-23T22:00:00.000Z'), }, { text: 'Submit New Website Design', priorityId: 2, startDate: new Date('2021-04-23T23:30:00.000Z'), endDate: new Date('2021-04-24T01:00:00.000Z'), }, { text: 'Launch New Website', priorityId: 2, startDate: new Date('2021-04-23T19:20:00.000Z'), endDate: new Date('2021-04-23T21:00:00.000Z'), }, { text: 'Google AdWords Strategy', priorityId: 1, startDate: new Date('2021-04-26T16:00:00.000Z'), endDate: new Date('2021-04-26T19:00:00.000Z'), }, { text: 'Rollout of New Website and Marketing Brochures', priorityId: 1, startDate: new Date('2021-04-26T20:00:00.000Z'), endDate: new Date('2021-04-26T22:30:00.000Z'), }, { text: 'Non-Compete Agreements', priorityId: 2, startDate: new Date('2021-04-27T20:00:00.000Z'), endDate: new Date('2021-04-27T22:45:00.000Z'), }, { text: 'Approve Hiring of John Jeffers', priorityId: 2, startDate: new Date('2021-04-27T16:00:00.000Z'), endDate: new Date('2021-04-27T19:00:00.000Z'), }, { text: 'Update NDA Agreement', priorityId: 1, startDate: new Date('2021-04-27T18:00:00.000Z'), endDate: new Date('2021-04-27T21:15:00.000Z'), }, { text: 'Update Employee Files with New NDA', priorityId: 1, startDate: new Date('2021-04-30T16:00:00.000Z'), endDate: new Date('2021-04-30T18:45:00.000Z'), }, { text: 'Submit Questions Regarding New NDA', priorityId: 1, startDate: new Date('2021-04-28T17:00:00.000Z'), endDate: new Date('2021-04-28T18:30:00.000Z'), }, { text: 'Submit Signed NDA', priorityId: 1, startDate: new Date('2021-04-28T20:00:00.000Z'), endDate: new Date('2021-04-28T22:00:00.000Z'), }, { text: 'Review Revenue Projections', priorityId: 2, startDate: new Date('2021-04-28T18:00:00.000Z'), endDate: new Date('2021-04-28T21:00:00.000Z'), }, { text: 'Comment on Revenue Projections', priorityId: 2, startDate: new Date('2021-04-26T17:00:00.000Z'), endDate: new Date('2021-04-26T20:00:00.000Z'), }, { text: 'Provide New Health Insurance Docs', priorityId: 2, startDate: new Date('2021-04-30T19:00:00.000Z'), endDate: new Date('2021-04-30T22:00:00.000Z'), }, { text: 'Review Changes to Health Insurance Coverage', priorityId: 2, startDate: new Date('2021-04-29T16:00:00.000Z'), endDate: new Date('2021-04-29T20:00:00.000Z'), }, { text: 'Review Training Course for any Omissions', priorityId: 1, startDate: new Date('2021-04-29T18:00:00.000Z'), endDate: new Date('2021-04-29T21:00:00.000Z'), }, ]; const priorityData = [ { text: 'Low Priority', id: 1, color: '#1D90FF', }, { text: 'High Priority', id: 2, color: '#FF9747', }, ];

DevExtreme JavaScript Scheduler raises the onSelectionEnd event when a user selects cells. The event's selectedCellData array contains one object per selected cell, each with startDate, endDate, allDay, and group field values.

In this sample, the event handler ignores single-cell selection and passes a new appointment object built from the first and last cell in the selection to the showAppointmentPopup method.