Clipboard in ASP.NET Core Scheduler

Clipboard functionality in the Scheduler control enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially useful for users managing multiple appointments because it eliminates repetitive data entry and allows quick schedule updates.
To activate the clipboard feature in the Scheduler, set the allowClipboard property to true.

Note: The allowKeyboardInteraction property must be set to true for the clipboard feature to work correctly.

Cut, copy and paste using keyboard

The Syncfusion Schedule control supports keyboard shortcuts to streamline appointment management.

These keyboard shortcuts enable users to efficiently manage their schedules:

Operation	Shortcut	Description
Copy	Ctrl+C	Duplicates appointments for reuse.
Cut	Ctrl+X	Moves appointments to a new time slot.
Paste	Ctrl+V	Inserts copied or cut appointments into the selected time slot.

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

CSHTML

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" height="650px" selectedDate="new DateTime(2024, 2, 15)" allowDragAndDrop="false"
    allowResizing="false" allowClipboard="true" showQuickInfo="false">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

Data.cs

public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2024, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2024, 2, 15, 12, 30, 0),
        IsAllDay = false,
        Status = "Completed",
        Priority = "High"
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
    public string Status { get; set; }
    public string Priority { get; set; }
}

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.

Use these public methods to manage appointments programmatically in the Syncfusion Schedule control:

Method	Parameters	Description
copy	None	Duplicates the selected appointment for reuse.
cut	None	Removes the selected appointment from its current slot for moving.
paste	targetElement (Scheduler work cell)	Inserts the copied or cut appointment into the specified time slot.

Using these methods gives you more control over appointment management in the Scheduler.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Navigations

<ejs-schedule id="schedule" height="650px" selectedDate="new DateTime(2024, 2, 15)" allowDragAndDrop="false" allowResizing="false" allowClipboard="true" showQuickInfo="false">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

<ejs-contextmenu id="ScheduleContextMenu" target=".e-schedule" items="@ViewBag.menuItems" beforeOpen="onContextMenuBeforeOpen" select="onMenuItemSelect" cssClass="schedule-context-menu"></ejs-contextmenu>

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

    .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;
    }
</style>
<script type="text/javascript">
    var selectedTarget;
    var targetElement;
    function onContextMenuBeforeOpen(args) {
        var newEventElement = document.querySelector('.e-new-event');
        if (newEventElement) {
            ej.base.remove(newEventElement);
        }
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        scheduleObj.closeQuickInfoPopup();
        targetElement = args.event.target;
        if (ej.base.closest(targetElement, '.e-contextmenu')) {
            return;
        }
        selectedTarget = ej.base.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 (ej.base.isNullOrUndefined(selectedTarget)) {
            args.cancel = true;
            return;
        }
        if (selectedTarget.classList.contains('e-appointment')) {
            this.showItems(['Cut', 'Copy'], true);
            this.hideItems(['Paste'], true);
        } else {
            this.showItems(['Paste'], true);
            this.hideItems(['Cut', 'Copy'], true);
        }
    }

    function onMenuItemSelect(args) {
        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
        var selectedMenuItem = args.item.id;
        switch (selectedMenuItem) {
            case 'Cut':
                scheduleObj.cut([selectedTarget]);
                break;
            case 'Copy':
                scheduleObj.copy([selectedTarget]);
                break;
            case 'Paste':
                scheduleObj.paste(targetElement);
                break;
        }
    }
</script>

Data.cs

public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "Cut Event",
        iconCss = "e-icons e-cut",
        id = "Cut"
    });
    menuItems.Add(new
    {
        text = "Copy Event",
        iconCss = "e-icons e-copy",
        id = "Copy"
    });
    menuItems.Add(new
    {
        text = "Paste",
        iconCss = "e-icons e-paste",
        id = "Paste"
    });

    ViewBag.menuItems = menuItems;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2024, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2024, 2, 15, 12, 30, 0),
        IsAllDay = false,
        Status = "Completed",
        Priority = "High"
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
    public string Status { get; set; }
    public string Priority { get; set; }
}

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 the necessary changes.

The following example demonstrates how to 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 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 used to intercept the event details before they are pasted. This allows you to modify the content as needed, such as adjusting the time, adding notes, or changing other appointment details.

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

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule

<div class="schedule-container">
<ejs-schedule id="schedule" height="650px" selectedDate="new DateTime(2024, 2, 15)" allowDragAndDrop="false"
    allowResizing="false" allowClipboard="true" showQuickInfo="false" beforePaste="onBeforePaste">
    <e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>

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


<style>
    .schedule-container {
        display: flex;
        justify-content: space-between;
    }

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

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

<script type="text/javascript">
    function onBeforePaste(args) {
        if (typeof args.data === 'string') {
            var dataArray = (args.data).split('\t');
            var 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];
        }
    }
    </script>

Data.cs

public ActionResult Index()
{
    ViewBag.appointments = GetScheduleData();
    var gridData = new List<Order>
    {
        new Order { OrderID = 10248, CustomerID = "VINET", ShipCity = "Reims", ShipName = "Vins et alcools Chevalier", OrderDate = new DateTime(2024, 1, 1) },
        new Order { OrderID = 10249, CustomerID = "TOMSP", ShipCity = "Münster", ShipName = "Toms Spezialitäten", OrderDate = new DateTime(2024, 1, 2) },
        new Order { OrderID = 10250, CustomerID = "HANAR", ShipCity = "Rio de Janeiro", ShipName = "Hanari Carnes", OrderDate = new DateTime(2024, 1, 3) },
        new Order { OrderID = 10251, CustomerID = "VICTE", ShipCity = "Lyon", ShipName = "Victuailles en stock", OrderDate = new DateTime(2024, 1, 4) },
        new Order { OrderID = 10252, CustomerID = "SUPRD", ShipCity = "Charleroi", ShipName = "Suprêmes délices", OrderDate = new DateTime(2024, 1, 5) },
        new Order { OrderID = 10253, CustomerID = "HANAR", ShipCity = "Rio de Janeiro", ShipName = "Hanari Carnes", OrderDate = new DateTime(2024, 1, 6) },
        new Order { OrderID = 10254, CustomerID = "CHOPS", ShipCity = "Bern", ShipName = "Chop-suey Chinese", OrderDate = new DateTime(2024, 1, 7) }
    };
    ViewBag.gridData = gridData;
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    {
        Id = 2,
        Subject = "Meeting",
        StartTime = new DateTime(2024, 2, 15, 10, 0, 0),
        EndTime = new DateTime(2024, 2, 15, 12, 30, 0),
        IsAllDay = false,
        Status = "Completed",
        Priority = "High"
    });
    return appData;
}

public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
    public string Status { get; set; }
    public string Priority { get; set; }
}

public class Order
{
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public string ShipCity { get; set; }
    public string ShipName { get; set; }
    public DateTime OrderDate { get; set; }
}

You can refer to our ASP.NET Core Scheduler feature tour page for its feature highlights. You can also explore our ASP.NET Core Scheduler example to learn how to present and manipulate data.