Scheduler: Create appointment by selected range — add react demo to storybook

apps/react-storybook/stories/demos/scheduler/create-from-selection/CreateFromSelection.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import type { SelectionEndEvent } from 'devextreme/ui/scheduler';
+import React, { useCallback } from 'react';
+
+import Scheduler, {
+  Resource,
+  View,
+} from 'devextreme-react/scheduler';
+
+import { data, priorityData } from './data';
+
+const meta: Meta = {
+  title: 'Demos/Scheduler/CreateFromSelection',
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const currentDate = new Date(2021, 3, 21);
+const groups = ['priorityId'];
+
+export const CreateFromSelection: Story = {
+  render: () => {
+    const onSelectionEnd = useCallback((e: SelectionEndEvent) => {
+      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);
+    }, []);
+
+    return (
+      <Scheduler
+        timeZone="America/Los_Angeles"
+        dataSource={data}
+        groups={groups}
+        defaultCurrentView="workWeek"
+        defaultCurrentDate={currentDate}
+        startDayHour={9}
+        endDayHour={16}
+        allDayPanelMode="allDay"
+        onSelectionEnd={onSelectionEnd}
+      >
+        <View
+          type="workWeek"
+          groupOrientation="horizontal"
+          cellDuration={30}
+        />
+        <Resource
+          fieldExpr="priorityId"
+          allowMultiple={false}
+          dataSource={priorityData}
+          label="Priority"
+        />
+      </Scheduler>
+    );
+  },
+};

apps/react-storybook/stories/demos/scheduler/create-from-selection/data.ts

@@ -0,0 +1,165 @@
+import type { SchedulerTypes } from 'devextreme-react/scheduler';
+
+type Appointment = SchedulerTypes.Appointment & { priorityId: number };
+
+type Resource = {
+  text: string;
+  id: number;
+  color: string;
+};
+
+export const data: Appointment[] = [
+  {
+    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: Resource[] = [
+  {
+    text: 'Low Priority',
+    id: 1,
+    color: '#1D90FF',
+  }, {
+    text: 'High Priority',
+    id: 2,
+    color: '#FF9747',
+  },
+];