Vue 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 Scheduler opens the appointment popup pre-populated with the corresponding start date, end date, and resource group.

Backend API

<template> <DxScheduler time-zone="America/Los_Angeles" :data-source="dataSource" :groups="groups" :current-date="currentDate" :start-day-hour="9" :end-day-hour="16" :show-current-time-indicator="false" all-day-panel-mode="allDay" current-view="workWeek" @selection-end="onSelectionEnd" > <DxView :cell-duration="30" type="workWeek" group-orientation="horizontal" /> <DxResource :allow-multiple="false" :data-source="priorityData" field-expr="priorityId" label="Priority" /> </DxScheduler> </template> <script setup lang="ts"> import { DxScheduler, DxResource, DxView } from 'devextreme-vue/scheduler'; import { data, priorityData } from './data.ts'; const groups = ['priorityId']; const currentDate = new Date(2021, 3, 21); const dataSource = data; function onSelectionEnd(e: any) { 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); } </script>

export 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'), }, ]; export const priorityData = [ { text: 'Low Priority', id: 1, color: '#1D90FF', }, { text: 'High Priority', id: 2, color: '#FF9747', }, ];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

DevExtreme 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.