Clipboard in React Schedule component

17 Mar 202524 minutes to read

The Clipboard functionality in the Syncfusion® Schedule control enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for those managing multiple appointments, as it eliminates the need for repetitive data entry and allows users to quickly adjust their schedules without hassle.
To activate the clipboard feature in the scheduler, simply set the allowClipboard property to true.

Note: The allowKeyboardInteraction property must be true for proper functionality of the clipboard feature.

Cut, copy and paste using keyboard

The Syncfusion® Schedule control supports keyboard shortcuts to streamline the process of managing appointments.

These keyboard shortcuts enable users to efficiently manage their schedules:

Operation Shortcut Description
Copy Ctrl+C Duplicate appointments to streamline the scheduling process.
Cut Ctrl+X Move appointments to a new time slot without duplicates.
Paste Ctrl+V Place copied or cut appointments into the desired time slot.

To use these shortcuts, simply click on the appointment and press Ctrl+C to copy or Ctrl+X to cut. To paste the copied or cut appointment, click on the desired time slot and press Ctrl+V

import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective,
  Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';


const App = () => {
  const scheduleObj = useRef(null);
  const eventSettings = { dataSource: scheduleData };

  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}
            allowClipboard={true} showQuickInfo={false} >
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, CellClickEventArgs,
  Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

const App = () => {
  const scheduleObj = useRef<ScheduleComponent>(null);
  const eventSettings = { dataSource: scheduleData };

  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}
            allowClipboard={true} showQuickInfo={false}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='schedule'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Note: For Mac users, use Cmd instead of Ctrl for copy, cut, and paste operations.

Cut, copy, and paste using context menu

You can programmatically manage appointments by using the public methods cut, copy, and paste. These methods allow you to perform the same actions as the context menu or external buttons.

Utilize these public methods to manage appointments programmatically in Syncfusion® Schedule control:

Method Parameters Description
copy None Duplicate the selected appointment for reuse.
cut None Remove the selected appointment from its current slot for moving.
paste targetElement (Scheduler’s work-cell) Insert the copied or cut appointment into the specified time slot.

By using these methods, you can programmatically cut, copy, and paste appointments in the scheduler, providing more control over the appointment management process.

import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { closest, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
import {
  ScheduleComponent, ViewsDirective, ViewDirective,
  Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import { scheduleData } from './datasource';


const App = () => {
  const scheduleObj = useRef(null);
  const menuObj = useRef(null);
  const eventSettings = { dataSource: scheduleData };

  let selectedTarget;
  let targetElement;
  const menuItems = [
    { text: 'Cut Event', iconCss: 'e-icons e-cut', id: 'Cut' },
    { text: 'Copy Event', iconCss: 'e-icons e-copy', id: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', id: 'Paste' }
  ];


  const onContextMenuBeforeOpen = (args) => {
    let newEventElement = document.querySelector('.e-new-event');
    if (newEventElement) {
      remove(newEventElement);
    }
    scheduleObj.current.closeQuickInfoPopup();
    targetElement = args.event.target;
    if (closest(targetElement, '.e-contextmenu')) {
      return;
    }
    selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
      '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
    if (isNullOrUndefined(selectedTarget)) {
      args.cancel = true;
      return;
    }
    if (selectedTarget.classList.contains('e-appointment')) {
      menuObj.current.showItems(['Cut', 'Copy'], true);
      menuObj.current.hideItems(['Paste'], true);
    } else {
      menuObj.current.showItems(['Paste'], true);
      menuObj.current.hideItems(['Cut', 'Copy'], true);
    }
  }

  const onMenuItemSelect = (args) => {
    let selectedMenuItem = args.item.id;
    switch (selectedMenuItem) {
      case 'Cut':
        scheduleObj.current.cut([selectedTarget]);
        break;
      case 'Copy':
        scheduleObj.current.copy([selectedTarget]);
        break;
      case 'Paste':
        scheduleObj.current.paste(targetElement);
        break;
    }
  }

  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
        </div>
      </div>
      <ContextMenuComponent target='.e-schedule' items={menuItems}
        beforeOpen={onContextMenuBeforeOpen} select={onMenuItemSelect}
        cssClass='schedule-context-menu' ref={menuObj} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { closest, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
import {
  ScheduleComponent, ViewsDirective, ViewDirective,
  Day, Week, WorkWeek, Month, Agenda, Inject
} from '@syncfusion/ej2-react-schedule';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs, MenuItemModel, ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import { scheduleData } from './datasource';

const App = () => {
  const scheduleObj = useRef<ScheduleComponent>(null);
  const eventSettings = { dataSource: scheduleData };
  const menuObj = useRef<ContextMenuComponent>(null);
  let selectedTarget: Element;
  let targetElement: HTMLElement;
  const menuItems: MenuItemModel[] = [
    { text: 'Cut Event', iconCss: 'e-icons e-cut', id: 'Cut' },
    { text: 'Copy Event', iconCss: 'e-icons e-copy', id: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', id: 'Paste' }
  ];

  const onContextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs): void => {
    let newEventElement: HTMLElement = document.querySelector('.e-new-event') as HTMLElement;
    if (newEventElement) {
      remove(newEventElement);
    }
    scheduleObj.current.closeQuickInfoPopup();
    targetElement = args.event.target as HTMLElement;
    if (closest(targetElement, '.e-contextmenu')) {
      return;
    }
    selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
      '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
    if (isNullOrUndefined(selectedTarget)) {
      args.cancel = true;
      return;
    }
    if (selectedTarget.classList.contains('e-appointment')) {
      menuObj.current.showItems(['Cut', 'Copy'], true);
      menuObj.current.hideItems(['Paste'], true);
    } else {
      menuObj.current.showItems(['Paste'], true);
      menuObj.current.hideItems(['Cut', 'Copy'], true);
    }
  }

  const onMenuItemSelect = (args: MenuEventArgs): void => {
    let selectedMenuItem: string = args.item.id;
    switch (selectedMenuItem) {
      case 'Cut':
        scheduleObj.current.cut([selectedTarget] as HTMLElement[]);
        break;
      case 'Copy':
        scheduleObj.current.copy([selectedTarget] as HTMLElement[]);
        break;
      case 'Paste':
        scheduleObj.current.paste(targetElement);
        break;
    }
  }

  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
        </div>
      </div>
      <ContextMenuComponent target='.e-schedule' items={menuItems}
        beforeOpen={onContextMenuBeforeOpen} select={onMenuItemSelect}
        cssClass='schedule-context-menu' ref={menuObj} />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='schedule'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
.schedule-context-menu .e-menu-item .new::before {
  content: '\e7f9';
}

.schedule-context-menu .e-menu-item .edit::before {
  content: '\ea9a';
}

.schedule-context-menu .e-menu-item .recurrence::before {
  content: '\e308';
  font-weight: bold;
}

.schedule-context-menu .e-menu-item .today::before {
  content: '\e322';
}

.schedule-context-menu .e-menu-item .delete::before {
  content: '\e94a';
}

.e-bigger .schedule-context-menu ul .e-menu-item .e-menu-icon {
  font-size: 14px;
}

.schedule-context-menu ul .e-menu-item .e-menu-icon {
  font-size: 12px;
}

Modifying Content before pasting

You can modify the content of an appointment before pasting it by using beforePaste event accessing the appointment details and making necessary changes.

The following example demonstrates how to seamlessly copy and paste content from a grid to a scheduler. To do this, follow these steps:

  1. Select an Item: Click on an item in the grid.
  2. Copy the Details: Press Ctrl + C to copy the selected event details.
  3. Choose a Time Slot: Click on the desired time slot in the scheduler.
  4. Paste the Details: Press Ctrl + V to paste the copied appointment details into the selected time slot.

In this example, the beforePaste event can be utilized to intercept the event details before they are pasted. This allows you to modify the content as needed. Such modifications could include adjusting the time, adding notes, or altering other specifics of the appointment.

Note: Ensure that the field mapping matches with the fields in the scheduler.

import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective,
  Day, Week, WorkWeek, Month, Agenda, Inject, BeforePasteEventArgs
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { GridComponent, ColumnsDirective, ColumnDirective, RowDD, Edit } from "@syncfusion/ej2-react-grids";

const App = () => {
  const scheduleObj = useRef <ScheduleComponent> (null);
  let gridObj = useRef <GridComponent> (null);
  const eventSettings = { dataSource: scheduleData };
  const gridData = [
    {
      OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5,
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
      OrderDate: new Date('2024-01-01')
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6,
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
      OrderDate: new Date('2024-01-02')
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4,
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
      OrderDate: new Date('2024-01-03')
    },
    {
      OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3,
      ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
      ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
      OrderDate: new Date('2024-01-04')
    },
    {
      OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 2,
      ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
      ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
      OrderDate: new Date('2024-01-05')
    },
    {
      OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 7,
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0,
      OrderDate: new Date('2024-01-06')
    },
    {
      OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5,
      ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
      ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1,
      OrderDate: new Date('2024-01-07')
    }
  ];
  const onBeforePasting = (args) => {
    if (typeof args.data === 'string') {
      const dataArray = args.data.split('\t');
      const result = {
        Id: dataArray[0],
        Subject: dataArray[1],
        StartTime: new Date(dataArray[4]).toISOString(),
        EndTime: new Date(new Date(dataArray[4]).getTime() + 60 * 60 * 1000).toISOString(),
        Location: dataArray[2],
        Description: dataArray[3]
      };
      args.data = [result];
    }
  }
  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}
            allowClipboard={true} showQuickInfo={false} beforePaste={onBeforePasting}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
          <GridComponent dataSource={gridData} cssClass="drag-grid" width="40%" height="400px" allowSelection={true}
            ref={gridObj}  >
            <ColumnsDirective>
              <ColumnDirective field="OrderID" headerText="Order ID" textAlign="Right" width={90} />
              <ColumnDirective field="CustomerID" headerText="Customer ID" width={100} />
              <ColumnDirective field="ShipCity" headerText="Ship City" width={100} />
              <ColumnDirective field="ShipName" headerText="Ship Name" width={130} />
              <ColumnDirective field="OrderDate" headerText="Order Date" type="date" format="yMd" width={100} />
            </ColumnsDirective>
            <Inject services={[RowDD, Edit]} />
          </GridComponent>
        </div>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective,
  Day, Week, WorkWeek, Month, Agenda, Inject, BeforePasteEventArgs
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { GridComponent, ColumnsDirective, ColumnDirective, RowDD, Edit } from "@syncfusion/ej2-react-grids";

const App = () => {
  interface ScheduleData {
    Id: string;
    Subject: string;
    StartTime: string;
    EndTime: string;
    Location: string;
    Description: string
  }
  const scheduleObj = useRef<ScheduleComponent>(null);
  let gridObj = useRef<GridComponent>(null);
  const eventSettings = { dataSource: scheduleData };
  const gridData: Object[] = [
    {
      OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5,
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
      OrderDate: new Date('2024-01-01')
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6,
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
      OrderDate: new Date('2024-01-02')
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4,
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
      OrderDate: new Date('2024-01-03')
    },
    {
      OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3,
      ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
      ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
      OrderDate: new Date('2024-01-04')
    },
    {
      OrderID: 10252, CustomerID: 'SUPRD', Role: 'Manager', EmployeeID: 2,
      ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
      ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
      OrderDate: new Date('2024-01-05')
    },
    {
      OrderID: 10253, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 7,
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0,
      OrderDate: new Date('2024-01-06')
    },
    {
      OrderID: 10254, CustomerID: 'CHOPS', Role: 'Employee', EmployeeID: 5,
      ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
      ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1,
      OrderDate: new Date('2024-01-07')
    }
  ];
  const onBeforePasting = (args: BeforePasteEventArgs) => {
    if (typeof args.data === 'string') {
      const dataArray: string[] = (args.data as string).split('\t');
      const result: ScheduleData = {
        Id: dataArray[0],
        Subject: dataArray[1],
        StartTime: new Date(dataArray[4]).toISOString(),
        EndTime: new Date(new Date(dataArray[4]).getTime() + 60 * 60 * 1000).toISOString(),
        Location: dataArray[2],
        Description: dataArray[3]
      };
      args.data = [result];
    }
  }
  return (
    <div className='schedule-control-section'>
      <div className='control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent height='550px' ref={scheduleObj} selectedDate={new Date(2024, 1, 15)} eventSettings={eventSettings}
            allowClipboard={true} showQuickInfo={false} beforePaste={onBeforePasting}>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
              <ViewDirective option='Agenda' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
          </ScheduleComponent>
          <GridComponent dataSource={gridData} cssClass="drag-grid" width="40%" height="400px" allowSelection={true}
            ref={gridObj}  >
            <ColumnsDirective>
              <ColumnDirective field="OrderID" headerText="Order ID" textAlign="Right" width={90} />
              <ColumnDirective field="CustomerID" headerText="Customer ID" width={100} />
              <ColumnDirective field="ShipCity" headerText="Ship City" width={100} />
              <ColumnDirective field="ShipName" headerText="Ship Name" width={130} />
              <ColumnDirective field="OrderDate" headerText="Order Date" type="date" format="yMd" width={100} />
            </ColumnsDirective>
            <Inject services={[RowDD, Edit]} />
          </GridComponent>
        </div>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('schedule'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-richtexteditor/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-notifications/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/bootstrap5.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="index.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='schedule'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
.schedule-control-section .control-wrapper {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 540px) {
    .schedule-control-section .control-wrapper {
        flex-direction: column;
    }

    .e-grid {
        width: 100% !important;
    }
}

You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.