Clipboard in TypeScript Scheduler

The Clipboard functionality in the Scheduler control enhances scheduling efficiency by enabling users to cut, copy, and paste appointments seamlessly. This feature is particularly beneficial for managing multiple appointments, eliminating repetitive data entry and allowing users to quickly adjust their schedules.

To activate clipboard functionality in the Scheduler, set the allowClipboard property to true.

Note: The allowKeyboardInteraction property is set to true for proper clipboard functionality through keyboard shortcuts.

Cut, copy, and paste using keyboard

The Scheduler control supports keyboard shortcuts to streamline appointment management operations.

Use these keyboard shortcuts to efficiently manage appointments:

Operation Shortcut Description
Copy Ctrl+C Duplicate the selected appointment for reuse in another time slot.
Cut Ctrl+X Remove the selected appointment from its current slot for relocation.
Paste Ctrl+V Insert the copied or cut appointment into the target time slot.

To perform these operations, select an appointment and press Ctrl+C to copy or Ctrl+X to cut. Then, select the desired destination time slot and press Ctrl+V to paste the appointment.

import {
    Schedule, Day, Week, WorkWeek, Month, Agenda, CellClickEventArgs
} from '@syncfusion/ej2-schedule';

import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2024, 1, 15),
    eventSettings: { dataSource: scheduleData },
    allowClipboard: true,
    showQuickInfo: false
});
scheduleObj.appendTo('#Schedule');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="../index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Schedule">
            </div>
        </div>
    </div>
</body>

</html>
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2024, 1, 11, 9, 30),
        EndTime: new Date(2024, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2024, 1, 12, 12, 0),
        EndTime: new Date(2024, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2024, 1, 13, 9, 30),
        EndTime: new Date(2024, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2024',
        StartTime: new Date(2024, 1, 14, 13, 0),
        EndTime: new Date(2024, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2024, 1, 15, 12, 0),
        EndTime: new Date(2024, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2024, 1, 15, 9, 30),
        EndTime: new Date(2024, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2024, 1, 16, 11, 0),
        EndTime: new Date(2024, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2024, 1, 17, 9, 0),
        EndTime: new Date(2024, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2024, 1, 19, 11, 0),
        EndTime: new Date(2024, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2024, 1, 21, 11, 0),
        EndTime: new Date(2024, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2024',
        StartTime: new Date(2024, 1, 22, 9, 30),
        EndTime: new Date(2024, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2024, 1, 9, 10, 0),
        EndTime: new Date(2024, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2024, 1, 7, 10, 30),
        EndTime: new Date(2024, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2024, 1, 5, 10, 0),
        EndTime: new Date(2024, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2024, 1, 20, 9, 30),
        EndTime: new Date(2024, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 23, 11, 0),
        EndTime: new Date(2024, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2024, 1, 12, 5, 30),
        EndTime: new Date(2024, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2024, 1, 12, 17, 0),
        EndTime: new Date(2024, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2024, 1, 15, 6, 0),
        EndTime: new Date(2024, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 15, 16, 0),
        EndTime: new Date(2024, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];

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

Cut, copy, and paste using public methods

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.

Use these public methods to programmatically control appointment operations in the Scheduler 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 work cell element) 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 { closest, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
import { Schedule, Day, Week, WorkWeek, Month, Resize, DragAndDrop, TimelineViews, TimelineMonth } from '@syncfusion/ej2-schedule';
import {
    ContextMenu, MenuItemModel, BeforeOpenCloseMenuEventArgs, MenuEventArgs
} from '@syncfusion/ej2-navigations';
import { scheduleData } from './datasource.ts';

Schedule.Inject(Week, DragAndDrop, Resize, WorkWeek, Day, Month, TimelineViews, TimelineMonth);

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    views: [
        { option: 'Week' },
        { option: 'Day' },
        { option: 'Month' },
        { option: 'TimelineDay' },
        { option: 'TimelineWeek' },
        { option: 'TimelineWorkWeek' },
        { option: 'TimelineMonth' },
    ],
    currentView: 'Week',
    selectedDate: new Date(2024, 1, 15),
    allowClipboard: true,
    showQuickInfo: false,
    eventSettings: { dataSource: scheduleData },
    destroyed: () => {
        menuObj.destroy();
    }
});
scheduleObj.appendTo('#Schedule');

let selectedTarget: Element;
let targetElement: HTMLElement;
let menuObj: ContextMenu;
let 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' }
];

menuObj = new ContextMenu({
    target: '.e-schedule',
    items: menuItems,
    beforeOpen: onContextMenuBeforeOpen,
    select: onMenuItemSelect,
    cssClass: 'schedule-context-menu'
});
menuObj.appendTo('#ScheduleContextMenu');

function onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
    let newEventElement: HTMLElement = document.querySelector('.e-new-event') as HTMLElement;
    if (newEventElement) {
        remove(newEventElement);
    }
    scheduleObj.closeQuickInfoPopup();
    targetElement = <HTMLElement>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.showItems(['Cut', 'Copy'], true);
        menuObj.hideItems(['Paste'], true);
    } else {
        menuObj.showItems(['Paste'], true);
        menuObj.hideItems(['Cut', 'Copy'], true);
    }
}

function onMenuItemSelect(args: MenuEventArgs): void {
    let selectedMenuItem: string = args.item.id;
    switch (selectedMenuItem) {
        case 'Cut':
            scheduleObj.cut([selectedTarget] as HTMLElement[]);
            break;
        case 'Copy':
            scheduleObj.copy([selectedTarget] as HTMLElement[]);
            break;
        case 'Paste':
            scheduleObj.paste(targetElement);
            break;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="../index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
    <style>
        .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';
        }

        .schedule-context-menu ul .e-menu-item .e-menu-icon {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Schedule">
            </div>
            <ul id="ScheduleContextMenu"></ul>
        </div>
    </div>
</body>

</html>
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2024, 1, 11, 9, 30),
        EndTime: new Date(2024, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2024, 1, 12, 12, 0),
        EndTime: new Date(2024, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2024, 1, 13, 9, 30),
        EndTime: new Date(2024, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2024',
        StartTime: new Date(2024, 1, 14, 13, 0),
        EndTime: new Date(2024, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2024, 1, 15, 12, 0),
        EndTime: new Date(2024, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2024, 1, 15, 9, 30),
        EndTime: new Date(2024, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2024, 1, 16, 11, 0),
        EndTime: new Date(2024, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2024, 1, 17, 9, 0),
        EndTime: new Date(2024, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2024, 1, 19, 11, 0),
        EndTime: new Date(2024, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2024, 1, 21, 11, 0),
        EndTime: new Date(2024, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2024',
        StartTime: new Date(2024, 1, 22, 9, 30),
        EndTime: new Date(2024, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2024, 1, 9, 10, 0),
        EndTime: new Date(2024, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2024, 1, 7, 10, 30),
        EndTime: new Date(2024, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2024, 1, 5, 10, 0),
        EndTime: new Date(2024, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2024, 1, 20, 9, 30),
        EndTime: new Date(2024, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 23, 11, 0),
        EndTime: new Date(2024, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2024, 1, 12, 5, 30),
        EndTime: new Date(2024, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2024, 1, 12, 17, 0),
        EndTime: new Date(2024, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2024, 1, 15, 6, 0),
        EndTime: new Date(2024, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 15, 16, 0),
        EndTime: new Date(2024, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];

Modifying content before pasting

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

The following example demonstrates how to copy content from a Grid control and paste it into the Scheduler. Follow these steps:

  1. Select an Item: Click on an item in the Grid control.
  2. Copy the Details: Press Ctrl + C to copy the selected item 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.

The beforePaste event intercepts the appointment data before insertion, allowing you to map Grid fields to Scheduler fields and modify properties as needed.

Note: Ensure that the field mapping matches the fields in the Scheduler.

import {
    Schedule, Day, Week, WorkWeek, Month, Agenda, BeforePasteEventArgs
} from '@syncfusion/ej2-schedule';
import { Grid } from '@syncfusion/ej2-grids';

import { scheduleData } from './datasource.ts';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

interface ScheduleData {
    Id: string;
    Subject: string;
    StartTime: string;
    EndTime: string;
    Location: string;
    Description: string
}

let scheduleObj: Schedule = new Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2024, 1, 15),
    eventSettings: { dataSource: scheduleData },
    allowClipboard: true,
    showQuickInfo: false,
    beforePaste: (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];
        }
    }
});
scheduleObj.appendTo('#Schedule');

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 gridObj: Grid = new Grid({
    dataSource: gridData,
    allowSelection: true,
    height: 400,
    cssClass: 'drag-grid',
    width: '40%',
    columns: [
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
        { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
        { field: 'ShipCity', headerText: 'Ship City', width: 100 },
        { field: 'ShipName', headerText: 'Ship Name', width: 130 },
        { field: 'OrderDate', headerText: 'Order Date', type: 'date', format: 'yMd', width: 100 }
    ],
});
gridObj.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Schedule Typescript Control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Schedule Control" />
    <meta name="author" content="Syncfusion" />
    <link href="../index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-grids/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-richtexteditor/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-lists/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-notifications/styles/fluent2.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-splitbuttons/styles/fluent2.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>

    <style type="text/css">
        .content-wrapper {
            display: flex;
            justify-content: space-between;
        }

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

            .e-grid {
                width: 100% !important;
            }
        }
    </style>

</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Schedule"></div>
            <div id="Grid"></div>
        </div>
    </div>
</body>

</html>
export let scheduleData: Object[] = [
    {
        Id: 1,
        Subject: 'Explosion of Betelgeuse Star',
        StartTime: new Date(2024, 1, 11, 9, 30),
        EndTime: new Date(2024, 1, 11, 11, 0),
        CategoryColor: '#1aaa55'
    }, {
        Id: 2,
        Subject: 'Thule Air Crash Report',
        StartTime: new Date(2024, 1, 12, 12, 0),
        EndTime: new Date(2024, 1, 12, 14, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 3,
        Subject: 'Blue Moon Eclipse',
        StartTime: new Date(2024, 1, 13, 9, 30),
        EndTime: new Date(2024, 1, 13, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 4,
        Subject: 'Meteor Showers in 2024',
        StartTime: new Date(2024, 1, 14, 13, 0),
        EndTime: new Date(2024, 1, 14, 14, 30),
        CategoryColor: '#ea7a57'
    }, {
        Id: 5,
        Subject: 'Milky Way as Melting pot',
        StartTime: new Date(2024, 1, 15, 12, 0),
        EndTime: new Date(2024, 1, 15, 14, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 6,
        Subject: 'Mysteries of Bermuda Triangle',
        StartTime: new Date(2024, 1, 15, 9, 30),
        EndTime: new Date(2024, 1, 15, 11, 0),
        CategoryColor: '#f57f17'
    }, {
        Id: 7,
        Subject: 'Glaciers and Snowflakes',
        StartTime: new Date(2024, 1, 16, 11, 0),
        EndTime: new Date(2024, 1, 16, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 8,
        Subject: 'Life on Mars',
        StartTime: new Date(2024, 1, 17, 9, 0),
        EndTime: new Date(2024, 1, 17, 10, 0),
        CategoryColor: '#357cd2'
    }, {
        Id: 9,
        Subject: 'Alien Civilization',
        StartTime: new Date(2024, 1, 19, 11, 0),
        EndTime: new Date(2024, 1, 19, 13, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 10,
        Subject: 'Wildlife Galleries',
        StartTime: new Date(2024, 1, 21, 11, 0),
        EndTime: new Date(2024, 1, 21, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 11,
        Subject: 'Best Photography 2024',
        StartTime: new Date(2024, 1, 22, 9, 30),
        EndTime: new Date(2024, 1, 22, 11, 0),
        CategoryColor: '#00bdae'
    }, {
        Id: 12,
        Subject: 'Smarter Puppies',
        StartTime: new Date(2024, 1, 9, 10, 0),
        EndTime: new Date(2024, 1, 9, 11, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 13,
        Subject: 'Myths of Andromeda Galaxy',
        StartTime: new Date(2024, 1, 7, 10, 30),
        EndTime: new Date(2024, 1, 7, 12, 30),
        CategoryColor: '#1aaa55'
    }, {
        Id: 14,
        Subject: 'Aliens vs Humans',
        StartTime: new Date(2024, 1, 5, 10, 0),
        EndTime: new Date(2024, 1, 5, 11, 30),
        CategoryColor: '#357cd2'
    }, {
        Id: 15,
        Subject: 'Facts of Humming Birds',
        StartTime: new Date(2024, 1, 20, 9, 30),
        EndTime: new Date(2024, 1, 20, 11, 0),
        CategoryColor: '#7fa900'
    }, {
        Id: 16,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 23, 11, 0),
        EndTime: new Date(2024, 1, 23, 13, 0),
        CategoryColor: '#ea7a57'
    }, {
        Id: 17,
        Subject: 'The Cycle of Seasons',
        StartTime: new Date(2024, 1, 12, 5, 30),
        EndTime: new Date(2024, 1, 12, 7, 30),
        CategoryColor: '#00bdae'
    }, {
        Id: 18,
        Subject: 'Space Galaxies and Planets',
        StartTime: new Date(2024, 1, 12, 17, 0),
        EndTime: new Date(2024, 1, 12, 18, 30),
        CategoryColor: '#f57f17'
    }, {
        Id: 19,
        Subject: 'Lifecycle of Bumblebee',
        StartTime: new Date(2024, 1, 15, 6, 0),
        EndTime: new Date(2024, 1, 15, 7, 30),
        CategoryColor: '#7fa900'
    }, {
        Id: 20,
        Subject: 'Sky Gazers',
        StartTime: new Date(2024, 1, 15, 16, 0),
        EndTime: new Date(2024, 1, 15, 18, 0),
        CategoryColor: '#ea7a57'
    }
];

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