Syncfusion AI Assistant

How can I help you?

Clipboard in Vue Schedule component

3 Feb 202624 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 also be set to true for clipboard operations to function correctly.

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.

When an appointment is selected, pressing Ctrl+C copies it, while Ctrl+X cuts it. Clicking a target time slot and pressing Ctrl+V pastes the appointment into the selected location.

<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard="true" :showQuickInfo="false"></ejs-schedule>
            </div>
        </div>
    </div>
</template>

<script setup>
import { provide, ref } from "vue";
import { scheduleData } from './datasource.js';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

const scheduleObj = ref(null);
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2024, 1, 15);

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>
<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard="true" :showQuickInfo="false"></ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
import { scheduleData } from './datasource.js';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
    },
    data: function () {
        return {
            eventSettings: { dataSource: extend([], scheduleData, null, true) },
            selectedDate: new Date(2024, 1, 15),
        }
    },
    provide: {
        schedule: [Day, Week, WorkWeek, Month, Agenda]
    },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

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

Cut, Copy, and Paste using Context Menu

Clipboard operations can also be performed programmatically using the Schedule component’s public methods cut, copy, and paste. These methods allow users 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.

These methods enable direct programmatic control over appointment manipulation, replicating the behavior of context menu actions and keyboard shortcuts.

<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard=true :showQuickInfo="false"></ejs-schedule>
            </div>
            <div>
                <ejs-contextmenu id="ScheduleContextMenu" ref="menuObj" :target="'.e-schedule'" :items="menuItems"
                    :beforeOpen="onContextMenuBeforeOpen" :select="onMenuItemSelect"
                    :cssClass="schedule-context-menu"></ejs-contextmenu>
            </div>
        </div>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { scheduleData } from './datasource.js';
import { extend, closest, isNullOrUndefined, remove, removeClass } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { ContextMenuComponent as EjsContextmenu } from '@syncfusion/ej2-vue-navigations';

const scheduleObj = ref(null);
const menuObj = ref(null);
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2024, 1, 15);
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 targetElement: null,
const selectedTarget = null;

const onContextMenuBeforeOpen = function (args) {
    let newEventElement = document.querySelector('.e-new-event');
    if (newEventElement) {
        remove(newEventElement);
    }
    this.$refs.scheduleObj.closeQuickInfoPopup();
    this.targetElement = args.event.target;
    if (closest(this.targetElement, '.e-contextmenu')) {
        return;
    }
    this.selectedTarget = closest(this.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(this.selectedTarget)) {
        args.cancel = true;
        return;
    }
    if (this.selectedTarget.classList.contains('e-appointment')) {
        this.$refs.menuObj.showItems(['Cut', 'Copy'], true);
        this.$refs.menuObj.hideItems(['Paste'], true);
    } else {
        this.$refs.menuObj.showItems(['Paste'], true);
        this.$refs.menuObj.hideItems(['Cut', 'Copy'], true);
    }
}
const onMenuItemSelect = function (args) {
    let selectedMenuItem = args.item.id;
    switch (selectedMenuItem) {
        case 'Cut':
            this.$refs.scheduleObj.cut([this.selectedTarget]);
            break;
        case 'Copy':
            this.$refs.scheduleObj.copy([this.selectedTarget]);
            break;
        case 'Paste':
            this.$refs.scheduleObj.paste(this.targetElement);
            break;
    }
}

provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.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;
}

.schedule-context-menu .e-menu-parent.e-ul .e-menu-item {
    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
}
</style>
<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard=true :showQuickInfo="false"></ejs-schedule>
            </div>
            <div>
                <ejs-contextmenu id="ScheduleContextMenu" ref="menuObj" :target="'.e-schedule'" :items="menuItems"
                    :beforeOpen="onContextMenuBeforeOpen" :select="onMenuItemSelect"
                    :cssClass="schedule-context-menu"></ejs-contextmenu>
            </div>
        </div>
    </div>
</template>
<script>
import { scheduleData } from './datasource.js';
import { extend, closest, isNullOrUndefined, remove, removeClass } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { ContextMenuComponent } from '@syncfusion/ej2-vue-navigations';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "ejs-contextmenu": ContextMenuComponent
    },
    data: function () {
        return {
            eventSettings: { dataSource: extend([], scheduleData, null, true) },
            selectedDate: new Date(2024, 1, 15),
            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' }
            ],
            selectedTarget: null,
            targetElement: null,
        }
    },
    provide: {
        schedule: [Day, Week, WorkWeek, Month, Agenda]
    },
    methods: {
        onContextMenuBeforeOpen: function (args) {
            let newEventElement = document.querySelector('.e-new-event');
            if (newEventElement) {
                remove(newEventElement);
            }
            this.$refs.scheduleObj.closeQuickInfoPopup();
            this.targetElement = args.event.target;
            if (closest(this.targetElement, '.e-contextmenu')) {
                return;
            }
            this.selectedTarget = closest(this.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(this.selectedTarget)) {
                args.cancel = true;
                return;
            }
            if (this.selectedTarget.classList.contains('e-appointment')) {
                this.$refs.menuObj.showItems(['Cut', 'Copy'], true);
                this.$refs.menuObj.hideItems(['Paste'], true);
            } else {
                this.$refs.menuObj.showItems(['Paste'], true);
                this.$refs.menuObj.hideItems(['Cut', 'Copy'], true);
            }
        },
        onMenuItemSelect: function (args) {
            let selectedMenuItem = args.item.id;
            switch (selectedMenuItem) {
                case 'Cut':
                    this.$refs.scheduleObj.cut([this.selectedTarget]);
                    break;
                case 'Copy':
                    this.$refs.scheduleObj.copy([this.selectedTarget]);
                    break;
                case 'Paste':
                    this.$refs.scheduleObj.paste(this.targetElement);
                    break;
            }
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.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;
}

.schedule-context-menu .e-menu-parent.e-ul .e-menu-item {
    font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
}
</style>

Modifying Content before Pasting

Appointment content can be altered before it is pasted by handling the beforePaste event. This event exposes the appointment details prior to insertion, enabling modifications such as adjusting times or updating additional fields.

The following workflow outlines how data copied from an external source, such as a grid, can be pasted into the Schedule component:

  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.

By using the beforePaste event, the copied details can be intercepted and updated before insertion to match required field mappings, such as adjusting start and end times or adding additional descriptive fields.

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

<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard="true" :showQuickInfo="false"
                    :beforePaste="onBeforePaste"></ejs-schedule>

                <ejs-grid id="Grid" ref="GridObj" width="40%" height="400px" :dataSource="gridData"
                    :cssClass="'drag-grid'" :allowSelection="true">
                    <e-columns>
                        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
                        <e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
                        <e-column field="ShipCity" headerText="Ship City" width="100"></e-column>
                        <e-column field="ShipName" headerText="Ship Name" width="130"></e-column>
                        <e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="100"></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
        </div>
    </div>
</template>

<script setup>
import { provide, ref } from "vue";
import { scheduleData } from './datasource.js';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-grids";


const scheduleObj = ref(null);
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2024, 1, 15);
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 onBeforePaste = function (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];
    }
}
provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.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>
<template>
    <div id='app'>
        <div id='container'>
            <div class='content-wrapper'>
                <ejs-schedule id='Schedule' ref='scheduleObj' height='550px' :selectedDate='selectedDate'
                    :eventSettings='eventSettings' :allowClipboard="true" :showQuickInfo="false"
                    :beforePaste="onBeforePaste"></ejs-schedule>

                <ejs-grid id="Grid" ref="GridObj" width="40%" height="400px" :dataSource="gridData"
                    :cssClass="'drag-grid'" :allowSelection="true">
                    <e-columns>
                        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
                        <e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
                        <e-column field="ShipCity" headerText="Ship City" width="100"></e-column>
                        <e-column field="ShipName" headerText="Ship Name" width="130"></e-column>
                        <e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="100"></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
        </div>
    </div>
</template>
<script>
import { scheduleData } from './datasource.js';
import { extend } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "ejs-grid": GridComponent,
        "e-columns": ColumnsDirective,
        "e-column": ColumnDirective

    },
    data: function () {
        return {
            eventSettings: { dataSource: extend([], scheduleData, null, true) },
            selectedDate: new Date(2024, 1, 15),
            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')
                }
            ]
        }
    },
    methods: {
        onBeforePaste(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];
            }
        }
    },
    provide: {
        schedule: [Day, Week, WorkWeek, Month, Agenda]
    },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.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>

For more information on Schedule component capabilities, visit the Vue Scheduler feature tour page. Explore live examples at Vue Scheduler example for more usage scenarios.