---
title: "Javascript Event calendar Cut, Copy, Paste Events Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/cut-copy-paste-events-between-calendars"
---

# Cut, Copy, Paste Events - JavaScript Event calendar demo

Transfer events between two Javascript event calendars with cut, copy, paste, and undo — using keyboard shortcuts or a right-click menu. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/eventcalendar/cut-copy-paste-events-between-calendars)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/calendar-view/cut-copy-paste-events-between-calendars)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/cut-copy-paste-events-between-calendars.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/cut-copy-paste-events-between-calendars.md), [React](https://demo.mobiscroll.com/react/eventcalendar/cut-copy-paste-events-between-calendars.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/cut-copy-paste-events-between-calendars.md)

## Description

While copy & pasting one or more events is useful, sometimes being able to move events between two separate calendars can improve productivity. How the calendars are laid out depends on the application, but the basic idea is that you will need to be able to tell where the events from the clipboard will be pasted.

In this example this is implemented by tracking the active instance, which is determined by the active tab of the segmented control. With this out of the way, `CTRL`/`CMD`+`C`/`X`/`Z`/`V` handle the copy, cut, undo and paste actions.

**Looking for multiple event selection & bulk operations?** [Take a look at the previous example →](https://demo.mobiscroll.com/javascript/eventcalendar/event-bulk-actions-edit-delete-update)

## What this demo shows

- A desktop month view event calendar with multiple events and the standard calendar header controls.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button (for jumping back to the current date) between them on the right. 
- **Event creation** Users can create events by clicking and dragging across day cells or by double-clicking a day cell.
- **Calendar switcher** A segmented control above the calendar lets users switch between the First calendar and the Second calendar.
- **Default state** The First calendar is selected when the demo loads.
- **Selection and transfer** One or more events can be selected in the active calendar and then copied or cut for transfer to the other calendar.
- **Keyboard actions** `CTRL`/`CMD` + `C`, `X`, `Z`, and `V` support copy, cut, undo, and paste actions.
- **Context menu** Right-clicking selected events opens a popup with Copy, Cut, Paste, and Delete actions.
- **Cross-calendar workflow** After selecting events in one calendar, users can switch to the other calendar and paste them there.
- **Day cell states for future days** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **Event interaction** Hovering over or selecting an event label highlights it and shows resize handles on both sides, indicating that the event can be resized by clicking and dragging.

## Best for

- **Multi-calendar workflows** Applications where users need to move or duplicate events between separate calendars.
- **Planning tools** Scheduling and planning interfaces that need month-based visibility together with fast event transfer actions.
- **Desktop-heavy use cases** Workflows where keyboard shortcuts and right-click actions help users work more efficiently.
- **Bulk event handling** Scenarios where users may need to select and move multiple events instead of updating them one by one.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`selectMultipleEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-selectMultipleEvents) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-labels) - option
- [`onSelectedEventsChange`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onSelectedEventsChange) - event
- [`setSelectedEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setSelectedEvents) - method
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event
- [`onCellRightClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onCellRightClick) - event
- [`setOptions`](https://mobiscroll.com/docs/javascript/select/api#method-setOptions) - method
- [`data`](https://mobiscroll.com/docs/javascript/select/api#opt-data) - option
- [`anchor`](https://mobiscroll.com/docs/javascript/select/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/javascript/select/api#method-open) - method
- [`onEventRightClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventRightClick) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventDeleted) - event
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/select/api#opt-touchUi) - option
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/javascript/select/api#opt-buttons) - option
- [`inputElement`](https://mobiscroll.com/docs/javascript/select/api#opt-inputElement) - option
- [`onChange`](https://mobiscroll.com/docs/javascript/select/api#event-onChange) - event
- [`onClose`](https://mobiscroll.com/docs/javascript/select/api#event-onClose) - event
- [`setVal`](https://mobiscroll.com/docs/javascript/select/api#method-setVal) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var containerElm = document.getElementById('demo-copy-cut-paste-cont');
var firstContainer = document.getElementById('demo-copy-cut-paste-first-cont');
var secondContainer = document.getElementById('demo-copy-cut-paste-second-cont');
var dummyElm = document.getElementById('my-focus');
var selectedEvents = [];
var deletedEvents = [];
var cutEvents = [];
var pastedEvents = [];
var today = new Date();
var toDate;
var originDate;
var firstToDate = today;
var secondToDate = today;
var activeInst;
var originInst;
var cutInst;
var menuOpen;
var action;
var menuData = [
  { text: 'Copy', value: 'c' },
  { text: 'Cut', value: 'x' },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete' },
];
var disabledMenu = [
  { text: 'Copy', value: 'c', disabled: true },
  { text: 'Cut', value: 'x', disabled: true },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete', disabled: true },
];
var calendarSettings = {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  selectMultipleEvents: true,
  view: {
    calendar: {
      labels: 'all',
    },
  },
  onSelectedEventsChange: function (args, inst) {
    if (inst === secondInst) {
      secondInst.setSelectedEvents(args.events);
    } else {
      firstInst.setSelectedEvents(args.events);
    }
  },
  onPageLoading: function (args, inst) {
    if (inst === secondInst) {
      secondToDate = args.month;
    } else {
      firstToDate = args.month;
    }
    toDate = args.month;
  },
  onCellRightClick: function (args, inst) {
    if (!menuOpen) {
      args.domEvent.preventDefault();
      menu.setOptions({
        data: disabledMenu,
        anchor: args.domEvent.target,
      });
      setTimeout(function () {
        menu.open();
      });
      activeInst = inst;
    }
  },
  onEventRightClick: function (args, inst) {
    if (inst.getSelectedEvents().length <= 1) {
      inst.setSelectedEvents([args.event]);
    }
    args.domEvent.preventDefault();
    menu.setOptions({
      data: menuData,
      anchor: args.domEvent.target,
    });
    setTimeout(function () {
      menu.open();
    });
    activeInst = inst;
    menuOpen = true;
  },
  onEventDeleted: function (args, inst) {
    deletedEvents = args.events;
    originInst = inst;
    action = 'delete';
    mobiscroll.snackbar({
      button: {
        action: function () {
          inst.addEvent(deletedEvents);
          deletedEvents = [];
        },
        text: 'Undo',
      },
      duration: 3000,
      message: 'Event' + (deletedEvents.length === 1 ? '' : 's') + ' deleted',
    });
    dummyElm.focus();
  },
};
var firstInst = mobiscroll.eventcalendar(
  '#demo-copy-cut-paste-first',
  Object.assign(
    {
      data: [
        {
          start: '2026-10-02T09:00',
          end: '2026-10-06T18:00',
          title: 'Business of Software Conference',
          color: '#ff6d42',
        },
        {
          start: '2026-10-10T07:00',
          end: '2026-10-10T08:00',
          title: 'Green box to post office',
          color: '#6e7f29',
        },
        {
          start: '2026-10-15T09:30',
          end: '2026-10-15T10:30',
          title: 'Product team mtg.',
          color: '#f67944',
        },
        {
          start: '2026-10-23T11:00',
          end: '2026-10-23T11:45',
          title: 'Stakeholder mtg.',
          color: '#a144f6',
        },
        {
          start: '2026-10-28T13:00',
          end: '2026-10-28T13:45',
          title: "Lunch @ Butcher's",
          color: '#00aabb',
        },
      ],
    },
    calendarSettings,
  ),
);
var secondInst = mobiscroll.eventcalendar(
  '#demo-copy-cut-paste-second',
  Object.assign(
    {
      data: [
        {
          start: '2026-10-04T08:45',
          end: '2026-10-04T10:00',
          title: 'Quick mtg. with Martin',
          color: '#de3d83',
        },
        {
          start: '2026-10-08T15:00',
          end: '2026-10-08T16:00',
          title: 'General orientation',
          color: '#a71111',
        },
        {
          start: '2026-10-10T13:00',
          end: '2026-10-14T21:00',
          title: 'Friends binge marathon',
          color: '#7bde83',
        },
        {
          start: '2026-10-23T08:00',
          end: '2026-10-27T09:00',
          title: 'Product team mtg.',
          color: '#913aa7',
        },
      ],
    },
    calendarSettings,
  ),
);
var menu = mobiscroll.select('#copy-cut-paste-menu', {
  touchUi: false,
  display: 'anchored',
  buttons: [],
  data: menuData,
  inputElement: document.getElementById('copy-cut-paste-menu-input'),
  onChange: function (args) {
    detectAction(args.value);
  },
  onClose: function () {
    menuOpen = false;
    // Clear selection
    menu.setVal();
  },
});

function monthDiff(d1, d2) {
  return d2.getMonth() - d1.getMonth() + 12 * (d2.getFullYear() - d1.getFullYear());
}

function pasteEvents() {
  var evLength = selectedEvents.length;
  if (evLength > 0) {
    for (var i = 0; i < evLength; ++i) {
      var event = Object.assign({}, selectedEvents[i]);
      var startDate = new Date(event.start);
      var endDate = new Date(event.end);
      var diff = Math.abs(endDate - startDate);

      event.start = startDate.setMonth(startDate.getMonth() - monthDiff(toDate, originDate));
      event.end = new Date(startDate.getTime() + diff);

      delete event.id;
      activeInst.addEvent(event);
      pastedEvents.push(event);
    }
    if (action === 'cut') {
      cutEvents = selectedEvents;
      cutInst = activeInst;
      originInst.removeEvent(selectedEvents);
      mobiscroll.snackbar({
        button: {
          action: function () {
            originInst.addEvent(cutEvents);
            cutInst.removeEvent(pastedEvents);
            mobiscroll.toast({
              message: 'Event' + (cutEvents.length === 1 ? '' : 's') + ' reverted',
            });
          },
          text: 'Undo',
        },
        duration: 3000,
        message: 'Event' + (selectedEvents.length === 1 ? '' : 's') + ' pasted',
      });
    } else {
      mobiscroll.toast({
        message: 'Event' + (evLength === 1 ? '' : 's') + ' pasted',
      });
    }
    dummyElm.focus();
    if (action !== 'copy') {
      selectedEvents = [];
    }
  }
}

function detectAction(key) {
  switch (key) {
    case 'delete': // Delete
      action = 'delete';
      originInst = activeInst;
      var selEvs = activeInst.getSelectedEvents();
      if (selEvs.length > 0) {
        activeInst.removeEvent(selEvs);
        deletedEvents = selEvs;
        mobiscroll.snackbar({
          button: {
            action: function () {
              activeInst.addEvent(selEvs);
              deletedEvents = [];
            },
            text: 'Undo',
          },
          duration: 3000,
          message: 'Event' + (selEvs.length === 1 ? '' : 's') + ' deleted',
        });
        dummyElm.focus();
      }
      break;
    case 'c': // Copy
      if (activeInst.getSelectedEvents().length > 0) {
        action = 'copy';
        selectedEvents = activeInst.getSelectedEvents();
        if (selectedEvents.length > 0) {
          originInst = activeInst;
          originDate = toDate;
          mobiscroll.toast({
            message: 'Event' + (selectedEvents.length === 1 ? '' : 's') + ' copied',
          });
        }
      }
      break;
    case 'x': // Cut
      if (activeInst.getSelectedEvents().length > 0) {
        action = 'cut';
        selectedEvents = activeInst.getSelectedEvents();
        if (selectedEvents.length > 0) {
          originInst = activeInst;
          deletedEvents = [];
          originDate = toDate;
          mobiscroll.toast({
            message: 'Event' + (selectedEvents.length === 1 ? '' : 's') + ' cut',
          });
        }
      }
      break;
    case 'z': // Undo
      if (action === 'delete') {
        originInst.addEvent(deletedEvents);
        deletedEvents = [];
      } else if (action === 'cut') {
        originInst.addEvent(cutEvents);
        cutInst.removeEvent(pastedEvents);
        cutEvents = [];
        pastedEvents = [];
      }
      break;
    case 'v': // Paste
      pasteEvents();
      break;
  }
}

document.querySelectorAll('.md-header-toggle').forEach(function (elm) {
  elm.addEventListener('change', function (ev) {
    if (ev.target.value === 'first') {
      firstContainer.classList.remove('md-hide-calendar');
      secondContainer.classList.add('md-hide-calendar');
      activeInst = firstInst;
      toDate = firstToDate;
      secondInst.setSelectedEvents([]);
    } else {
      secondContainer.classList.remove('md-hide-calendar');
      firstContainer.classList.add('md-hide-calendar');
      activeInst = secondInst;
      toDate = secondToDate;
      firstInst.setSelectedEvents([]);
    }
  });
});

containerElm.addEventListener('keydown', function (ev) {
  if (ev.ctrlKey || ev.metaKey) {
    detectAction(ev.key);
  }
  if (ev.key === 'Delete') {
    detectAction('delete');
  }
});

secondContainer.classList.add('md-hide-calendar');
activeInst = firstInst;
```

### HTML

```html
<div mbsc-page id="demo-copy-cut-paste-cont">
    <div class="mbsc-flex-col md-copy-cut-paste">
        <div class="mbsc-flex-none">
            <label>
                First calendar
                <input type="radio" mbsc-segmented name="header-toggle" class="md-header-toggle" value="first" checked />
            </label>
            <label>
                Second calendar
                <input type="radio" mbsc-segmented name="header-toggle" class="md-header-toggle" value="second" />
            </label>
        </div>
        <div class="mbsc-flex-col mbsc-flex-1-1">
            <div id="demo-copy-cut-paste-first-cont" class="mbsc-flex-1-1 md-copy-cut-paste-cont">
                <div id="demo-copy-cut-paste-first"></div>
            </div>
            <div id="demo-copy-cut-paste-second-cont" class="mbsc-flex-1-1 md-copy-cut-paste-cont">
                <div id="demo-copy-cut-paste-second"></div>
            </div>
            <input id="copy-cut-paste-menu" type="hidden" />
        </div>
    </div>
    <div id="my-focus" tabindex="-1"></div>
</div>
```

### CSS

```css
.md-copy-cut-paste .mbsc-segmented {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.md-copy-cut-paste .md-hide-calendar {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
```

## Implementation notes

- Use `view: { calendar: { labels: 'all' } }` (not `true` - `'all'` shows every event label without collapsing). Enable `clickToCreate: true`, `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, and `selectMultipleEvents: true` on both calendar instances.
- Render two `Eventcalendar` instances in a stacked container. Both are always in the DOM; the inactive one is hidden with a CSS class (`visibility: hidden; position: absolute`). A `SegmentedGroup` above the container switches between "First calendar" and "Second calendar". On switch, toggle visibility, update `activeCalendar`/`activeInst`, restore the inactive calendar's last known `toDate`, and clear the now-inactive calendar's selection.
- Track each calendar's current month separately (`firstToDate`, `secondToDate`) via `onPageLoading` using `args.month`. Also keep a shared `toDate` pointing to the active calendar's current month - this is the paste destination month.
- Maintain clipboard state: `selectedEvents` (events to paste), `action` (`'copy'`, `'cut'`, `'delete'`), `originDate` (the active `toDate` at copy/cut time), `deletedEvents` and `moveEvents`/`pastedEvents` (for undo).
- **Copy** (`Ctrl/Cmd+C`): store the active calendar's selected events in `selectedEvents`, record `originDate = toDate`, set `action = 'copy'`, show toast.
- **Cut** (`Ctrl/Cmd+X`): same as copy but `action = 'cut'`, record `cutCalendar`/`originInst`. Events are not removed until paste.
- **Paste** (`Ctrl/Cmd+V`): for each event in `selectedEvents`, clone it, delete its `id`, then adjust start/end by subtracting `monthDiff(toDate, originDate)` months (preserving duration). Add the cloned event to the active calendar. For **cut**: also remove the originals from the source calendar, show snackbar with "Undo"; for **copy**: show toast. After paste, clear `selectedEvents` only if action was cut.
- **Delete** (`Delete` key or context menu): remove selected events from the active calendar, store them in `deletedEvents`, show snackbar with "Undo" that re-adds them. After triggering, move focus to a hidden dummy element (`tabIndex={-1}`) to prevent the keyboard event from re-firing.
- **Undo** (`Ctrl/Cmd+Z`): if `action === 'delete'`, re-add `deletedEvents` to the source calendar; if `action === 'cut'`, re-add `moveEvents` to the source calendar and remove `pastedEvents` from the destination.
- **Right-click context menu**: a `Select` popup with options `Copy`, `Cut`, `Paste`, `Delete`. On `onEventRightClick`: open with all options enabled; if the event right-clicked is not already among multiple selected events, select just that event. On `onCellRightClick` (empty cell): open with Copy/Cut/Delete disabled, Paste enabled only. Dispatch the chosen action through the same `detectAction(key)` handler as keyboard shortcuts.
- `monthDiff(d1, d2)`: returns `d2.getMonth() - d1.getMonth() + 12 * (d2.getFullYear() - d1.getFullYear())` - used to shift pasted event dates to the destination calendar's current month.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Bulk Actions](https://demo.mobiscroll.com/javascript/eventcalendar/event-bulk-actions-edit-delete-update.md) - Multi-select events by keyboard in a Javascript calendar - bulk delete, update, or run custom actions via action panel or right-click context menu.