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

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

Transfer events between two Vue event calendars with cut, copy, paste, and undo — using keyboard shortcuts or a right-click menu. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/cut-copy-paste-events-between-calendars)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/cut-copy-paste-events-between-calendars)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/calendar-view/cut-copy-paste-events-between-calendars)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/cut-copy-paste-events-between-calendars.md), [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)

## 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/vue/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/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`labels`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-labels) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`selectedEvents`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-selectedEvents) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`selectMultipleEvents`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-selectMultipleEvents) - option
- [`selected-events-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onSelectedEventsChange) - event
- [`page-loading`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoading) - event
- [`cell-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellRightClick) - event
- [`event-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventRightClick) - event
- [`event-deleted`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDeleted) - event
- [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) - option
- [`touchUi`](https://mobiscroll.com/docs/vue/select/api#opt-touchUi) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`anchor`](https://mobiscroll.com/docs/vue/select/api#opt-anchor) - option
- [`buttons`](https://mobiscroll.com/docs/vue/select/api#opt-buttons) - option
- [`isOpen`](https://mobiscroll.com/docs/vue/select/api#opt-isOpen) - option
- [`inputProps`](https://mobiscroll.com/docs/vue/select/api#opt-inputProps) - option
- [`change`](https://mobiscroll.com/docs/vue/select/api#event-onChange) - event
- [`close`](https://mobiscroll.com/docs/vue/select/api#event-onClose) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/snackbar#event-onClose) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

```vue
<script setup>
import {
  MbscEventcalendar,
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscSelect,
  MbscSnackbar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const today = new Date()

const defaultMenuData = [
  { text: 'Copy', value: 'c' },
  { text: 'Cut', value: 'x' },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete' }
]

const disabledMenu = [
  { text: 'Copy', value: 'c', disabled: true },
  { text: 'Cut', value: 'x', disabled: true },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete', disabled: true }
]

const firstEvents = ref([
  {
    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'
  }
])

const secondEvents = ref([
  {
    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'
  }
])

const myView = {
  calendar: { labels: 'all' }
}
const menuData = ref(defaultMenuData)
const selectValue = ref('')
const menuAnchor = ref(null)
const activeCalendar = ref('first')
const cutCalendar = ref('first')
const toDate = ref(today)
const firstToDate = ref(today)
const secondToDate = ref(today)
const originDate = ref(today)
const isMenuOpen = ref(false)
const selectedEvents = ref([])
const moveEvents = ref([])
const pastedEvents = ref([])
const deletedEvents = ref([])
const action = ref('')
const snackbarMessage = ref('')
const snackbarButton = ref(null)
const isSnackbarOpen = ref(false)
const toastMessage = ref(null)
const isToastOpen = ref(false)
const dummyElm = ref(null)
const menuElm = ref(null)
const firstSelectedEvents = ref([])
const secondSelectedEvents = ref([])

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

function pasteEvents() {
  const activeEvents = getActiveEvents()
  const activeSelectedEvents = selectedEvents.value
  let eventsToUpdate = [...activeEvents]
  if (activeSelectedEvents.length > 0) {
    for (const event of activeSelectedEvents) {
      const newEvent = Object.assign({}, event)
      const startDate = new Date(event.start)
      const endDate = new Date(event.end)
      const diff = Math.abs(endDate - startDate)

      startDate.setMonth(startDate.getMonth() - monthDiff(toDate.value, originDate.value))

      newEvent.start = startDate
      newEvent.end = new Date(startDate.getTime() + diff)

      delete newEvent.id

      eventsToUpdate = [...eventsToUpdate, newEvent]

      pastedEvents.value = [...pastedEvents.value, newEvent]
    }

    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }

    if (action.value === 'cut') {
      let cutEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
      moveEvents.value = [...selectedEvents.value]
      for (const event of selectedEvents.value) {
        cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
      }
      if (cutCalendar.value === 'first') {
        firstEvents.value = cutEvs
      } else {
        secondEvents.value = cutEvs
      }

      snackbarButton.value = {
        action: () => {
          let revertEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
          for (const event of moveEvents.value) {
            revertEvs = [...revertEvs, event]
          }
          if (cutCalendar.value === 'first') {
            firstEvents.value = revertEvs
          } else {
            secondEvents.value = revertEvs
          }

          let cutEvs = getActiveEvents()
          for (const event of pastedEvents.value) {
            cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
          }
          if (activeCalendar.value === 'first') {
            firstEvents.value = cutEvs
          } else {
            secondEvents.value = cutEvs
          }

          toastMessage.value =
            'Event' + (selectedEvents.value.length === 1 ? '' : 's') + ' reverted'
          isToastOpen.value = true
        },
        text: 'Undo'
      }
      snackbarMessage.value = 'Event' + (selectedEvents.value.length === 1 ? '' : 's') + ' pasted'
      dummyElm.value.focus()
      isSnackbarOpen.value = true
    } else {
      toastMessage.value = 'Event' + (activeSelectedEvents.length === 1 ? '' : 's') + ' pasted'
      isToastOpen.value = true
    }
    if (action.value !== 'copy') {
      selectedEvents.value = []
    }
  }
}

function getActiveEvents() {
  return activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
}

function getActiveSelectedEvents() {
  return activeCalendar.value === 'first' ? firstSelectedEvents.value : secondSelectedEvents.value
}

function deleteEvents() {
  const activeEvents = getActiveEvents()
  let eventsToUpdate = [...activeEvents]
  action.value = 'delete'
  const activeSelectedEvents = getActiveSelectedEvents()

  if (activeSelectedEvents.length > 0) {
    deletedEvents.value = activeSelectedEvents

    for (const event of activeSelectedEvents) {
      eventsToUpdate = eventsToUpdate.filter((ev) => ev.id !== event.id)
    }

    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }

    snackbarButton.value = {
      action: () => {
        for (const event of activeSelectedEvents) {
          eventsToUpdate = [...eventsToUpdate, event]
        }
        if (activeCalendar.value === 'first') {
          firstEvents.value = eventsToUpdate
        } else {
          secondEvents.value = eventsToUpdate
        }
        deletedEvents.value = []
      },
      text: 'Undo'
    }
    snackbarMessage.value = 'Event' + (activeSelectedEvents.length === 1 ? '' : 's') + ' deleted'
    dummyElm.value.focus()
    isSnackbarOpen.value = true
  }
}

function activateAction(type) {
  if (selectedEvents.value.length > 0) {
    const act = type == 'copy' ? ' copied' : ' cut'
    originDate.value = toDate.value
    toastMessage.value = 'Event' + (selectedEvents.value.length === 1 ? '' : 's') + act
    isToastOpen.value = true
  }
}

function copyEvents() {
  if (activeCalendar.value === 'first') {
    if (firstSelectedEvents.value.length > 0) {
      action.value = 'copy'
      selectedEvents.value = firstSelectedEvents.value
      activateAction('copy')
    }
  } else {
    if (secondSelectedEvents.value.length > 0) {
      action.value = 'copy'
      selectedEvents.value = secondSelectedEvents.value
      activateAction('copy')
    }
  }
}

function cutEvents() {
  if (activeCalendar.value === 'first') {
    if (firstSelectedEvents.value.length > 0) {
      action.value = 'cut'
      selectedEvents.value = firstSelectedEvents.value
      cutCalendar.value = activeCalendar.value
      activateAction('cut')
      deletedEvents.value = []
    }
  } else {
    if (secondSelectedEvents.value.length > 0) {
      action.value = 'cut'
      selectedEvents.value = secondSelectedEvents.value
      cutCalendar.value = activeCalendar.value
      activateAction('cut')
      deletedEvents.value = []
    }
  }
}

function undoEvents() {
  const activeEvents = getActiveEvents()
  let eventsToUpdate = [...activeEvents]
  if (action.value === 'delete') {
    for (const event of deletedEvents.value) {
      eventsToUpdate = [...eventsToUpdate, event]
    }
    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }
    deletedEvents.value = []
  } else if (action.value === 'cut') {
    let revertEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
    for (const event of moveEvents.value) {
      revertEvs = [...revertEvs, event]
    }
    if (cutCalendar.value === 'first') {
      firstEvents.value = revertEvs
    } else {
      secondEvents.value = revertEvs
    }

    let cutEvs = getActiveEvents()
    for (const event of pastedEvents.value) {
      cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
    }
    if (activeCalendar.value === 'first') {
      firstEvents.value = cutEvs
    } else {
      secondEvents.value = cutEvs
    }

    pastedEvents.value = []
  }
}

function detectAction(key) {
  switch (key) {
    case 'delete': // Delete
      deleteEvents()
      break
    case 'c': // Copy
      copyEvents()
      break
    case 'x': // Cut
      cutEvents()
      break
    case 'z': // Undo
      undoEvents()
      break
    case 'v': // Paste
      pasteEvents()
      break
  }
}

function switchCalendar(ev) {
  if (ev.target.value === 'first') {
    toDate.value = firstToDate.value
    secondSelectedEvents.value = []
  } else {
    toDate.value = secondToDate.value
    firstSelectedEvents.value = []
  }
}

function handlePageLoading(args) {
  if (activeCalendar.value === 'first') {
    firstToDate.value = args.month
  } else {
    secondToDate.value = args.month
  }
  toDate.value = args.month
}

function handleCellRightClick(args) {
  if (!isMenuOpen.value) {
    args.domEvent.preventDefault()
    menuData.value = disabledMenu
    menuAnchor.value = args.domEvent.target
    isMenuOpen.value = true
  }
}

function handleEventRightClick(args) {
  const activeEvents = activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
  if (activeEvents.length <= 1) {
    if (activeCalendar.value === 'first') {
      firstEvents.value = [args.event]
    } else {
      secondEvents.value = [args.event]
    }
  }
  args.domEvent.preventDefault()
  menuData.value = defaultMenuData
  menuAnchor.value = args.domEvent.target
  isMenuOpen.value = true
}

function handleEventDeleted(args) {
  deletedEvents.value = args.events
  action.value = 'delete'
  snackbarButton.value = {
    action: () => {
      const activeEvents = activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
      let eventsToUpdate = [...activeEvents]
      for (const event of deletedEvents.value) {
        eventsToUpdate = eventsToUpdate.filter((ev) => ev.id !== event.id)
      }

      if (activeCalendar.value === 'first') {
        firstEvents.value = eventsToUpdate
      } else {
        secondEvents.value = eventsToUpdate
      }

      deletedEvents.value = []
    },
    text: 'Undo'
  }
  snackbarMessage.value = 'Event' + (deletedEvents.value.length === 1 ? '' : 's') + ' deleted'
  dummyElm.value.focus()
  isSnackbarOpen.value = true
}

function handleFirstSelectedEventsChange(args) {
  firstSelectedEvents.value = args.events
}

function handleSecondSelectedEventsChange(args) {
  secondSelectedEvents.value = args.events
}

function handleSelectChange(args) {
  detectAction(args.value)
}

function handleSelectClose() {
  isMenuOpen.value = false
  selectValue.value = null
}

function handleKeyDown(ev) {
  if (ev.ctrlKey || ev.metaKey) {
    detectAction(ev.key)
  }
  if (ev.key === 'Delete') {
    detectAction('delete')
  }
}
</script>

<template>
  <MbscPage @keydown="handleKeyDown($event)">
    <div class="mbsc-flex-col md-copy-cut-paste">
      <div class="mbsc-flex-none">
        <MbscSegmentedGroup v-model="activeCalendar" @change="switchCalendar($event)">
          <MbscSegmented value="first">First calendar</MbscSegmented>
          <MbscSegmented value="second">Second calendar</MbscSegmented>
        </MbscSegmentedGroup>
      </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">
          <MbscEventcalendar
            :data="firstEvents"
            :selectedEvents="firstSelectedEvents"
            :className="activeCalendar === 'second' ? 'md-hide-calendar' : ''"
            :view="myView"
            :clickToCreate="true"
            :dragToCreate="true"
            :dragToMove="true"
            :dragToResize="true"
            :selectMultipleEvents="true"
            @selected-events-change="handleFirstSelectedEventsChange"
            @page-loading="handlePageLoading"
            @cell-right-click="handleCellRightClick"
            @event-right-click="handleEventRightClick"
            @event-deleted="handleEventDeleted"
          />
        </div>
        <div id="demo-copy-cut-paste-second-cont" class="mbsc-flex-1-1 md-copy-cut-paste-cont">
          <MbscEventcalendar
            :data="secondEvents"
            :selectedEvents="secondSelectedEvents"
            :className="activeCalendar === 'first' ? 'md-hide-calendar' : ''"
            :view="myView"
            :clickToCreate="true"
            :dragToCreate="true"
            :dragToMove="true"
            :dragToResize="true"
            :selectMultipleEvents="true"
            @selected-events-change="handleSecondSelectedEventsChange"
            @page-loading="handlePageLoading"
            @cell-right-click="handleCellRightClick"
            @event-right-click="handleEventRightClick"
            @event-deleted="handleEventDeleted"
          />
        </div>
        <MbscSelect
          ref="menuElm"
          display="anchored"
          v-model="selectValue"
          :touchUi="false"
          :data="menuData"
          :anchor="menuAnchor"
          :buttons="[]"
          :isOpen="isMenuOpen"
          :inputProps="{ type: 'hidden' }"
          @change="handleSelectChange"
          @close="handleSelectClose"
        />
      </div>
    </div>
    <div ref="dummyElm" tabindex="-1"></div>
    <MbscSnackbar
      :message="snackbarMessage"
      :button="snackbarButton"
      :duration="3000"
      :isOpen="isSnackbarOpen"
      @close="isSnackbarOpen = false"
    />
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
  </MbscPage>
</template>

<style>
.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;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscEventcalendar,
  MbscPage,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscSelect,
  MbscSnackbar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscCellClickEvent,
  MbscEventcalendarView,
  MbscEventClickEvent,
  MbscEventDeletedEvent,
  MbscPageLoadingEvent,
  MbscSelectedEventsChangeEvent
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const today: Date = new Date()

const defaultMenuData = [
  { text: 'Copy', value: 'c' },
  { text: 'Cut', value: 'x' },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete' }
]

const disabledMenu = [
  { text: 'Copy', value: 'c', disabled: true },
  { text: 'Cut', value: 'x', disabled: true },
  { text: 'Paste', value: 'v' },
  { text: 'Delete', value: 'delete', disabled: true }
]

const firstEvents = ref<MbscCalendarEvent[]>([
  {
    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'
  }
])

const secondEvents = ref<MbscCalendarEvent[]>([
  {
    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'
  }
])

const myView: MbscEventcalendarView = {
  calendar: { labels: 'all' }
}
const menuData = ref(defaultMenuData)
const selectValue = ref<string>('')
const menuAnchor = ref<any>(null)
const activeCalendar = ref<string>('first')
const cutCalendar = ref<string>('first')
const toDate = ref<Date>(today)
const firstToDate = ref<Date>(today)
const secondToDate = ref<Date>(today)
const originDate = ref<Date>(today)
const isMenuOpen = ref<boolean>(false)
const selectedEvents = ref<MbscCalendarEvent[]>([])
const moveEvents = ref<MbscCalendarEvent[]>([])
const pastedEvents = ref<MbscCalendarEvent[]>([])
const deletedEvents = ref<MbscCalendarEvent[]>([])
const action = ref<string>('')
const snackbarMessage = ref<string>('')
const snackbarButton = ref<any>(null)
const isSnackbarOpen = ref<boolean>(false)
const toastMessage = ref<any>(null)
const isToastOpen = ref<boolean>(false)
const dummyElm = ref<any>(null)
const menuElm = ref<any>(null)
const firstSelectedEvents = ref<MbscCalendarEvent[]>([])
const secondSelectedEvents = ref<MbscCalendarEvent[]>([])

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

function pasteEvents() {
  const activeEvents = getActiveEvents()
  const activeSelectedEvents = selectedEvents.value
  let eventsToUpdate = [...activeEvents]
  if (activeSelectedEvents.length > 0) {
    for (const event of activeSelectedEvents) {
      const newEvent = Object.assign({}, event)
      const startDate = new Date(event.start as string)
      const endDate = new Date(event.end as string)
      const diff = Math.abs(endDate.getTime() - startDate.getTime())

      startDate.setMonth(startDate.getMonth() - monthDiff(toDate.value, originDate.value))

      newEvent.start = startDate
      newEvent.end = new Date(startDate.getTime() + diff)

      delete newEvent.id

      eventsToUpdate = [...eventsToUpdate, newEvent]

      pastedEvents.value = [...pastedEvents.value, newEvent]
    }

    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }

    if (action.value === 'cut') {
      let cutEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
      moveEvents.value = [...selectedEvents.value]
      for (const event of selectedEvents.value) {
        cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
      }
      if (cutCalendar.value === 'first') {
        firstEvents.value = cutEvs
      } else {
        secondEvents.value = cutEvs
      }

      snackbarButton.value = {
        action: () => {
          let revertEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
          for (const event of moveEvents.value) {
            revertEvs = [...revertEvs, event]
          }
          if (cutCalendar.value === 'first') {
            firstEvents.value = revertEvs
          } else {
            secondEvents.value = revertEvs
          }

          let cutEvs = getActiveEvents()
          for (const event of pastedEvents.value) {
            cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
          }
          if (activeCalendar.value === 'first') {
            firstEvents.value = cutEvs
          } else {
            secondEvents.value = cutEvs
          }

          toastMessage.value =
            'Event' + (selectedEvents.value.length === 1 ? '' : 's') + ' reverted'
          isToastOpen.value = true
        },
        text: 'Undo'
      }
      snackbarMessage.value = 'Event' + (selectedEvents.value.length === 1 ? '' : 's') + ' pasted'
      dummyElm.value.focus()
      isSnackbarOpen.value = true
    } else {
      toastMessage.value = 'Event' + (activeSelectedEvents.length === 1 ? '' : 's') + ' pasted'
      isToastOpen.value = true
    }
    if (action.value !== 'copy') {
      selectedEvents.value = []
    }
  }
}

function getActiveEvents() {
  return activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
}

function getActiveSelectedEvents() {
  return activeCalendar.value === 'first' ? firstSelectedEvents.value : secondSelectedEvents.value
}

function deleteEvents() {
  const activeEvents = getActiveEvents()
  let eventsToUpdate = [...activeEvents]
  action.value = 'delete'
  const activeSelectedEvents = getActiveSelectedEvents()

  if (activeSelectedEvents.length > 0) {
    deletedEvents.value = activeSelectedEvents

    for (const event of activeSelectedEvents) {
      eventsToUpdate = eventsToUpdate.filter((ev) => ev.id !== event.id)
    }

    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }

    snackbarButton.value = {
      action: () => {
        for (const event of activeSelectedEvents) {
          eventsToUpdate = [...eventsToUpdate, event]
        }
        if (activeCalendar.value === 'first') {
          firstEvents.value = eventsToUpdate
        } else {
          secondEvents.value = eventsToUpdate
        }
        deletedEvents.value = []
      },
      text: 'Undo'
    }
    snackbarMessage.value = 'Event' + (activeSelectedEvents.length === 1 ? '' : 's') + ' deleted'
    dummyElm.value.focus()
    isSnackbarOpen.value = true
  }
}

function activateAction(type: string) {
  if (selectedEvents.value.length > 0) {
    const act = type == 'copy' ? ' copied' : ' cut'
    originDate.value = toDate.value
    toastMessage.value = 'Event' + (selectedEvents.value.length === 1 ? '' : 's') + act
    isToastOpen.value = true
  }
}

function copyEvents() {
  if (activeCalendar.value === 'first') {
    if (firstSelectedEvents.value.length > 0) {
      action.value = 'copy'
      selectedEvents.value = firstSelectedEvents.value
      activateAction('copy')
    }
  } else {
    if (secondSelectedEvents.value.length > 0) {
      action.value = 'copy'
      selectedEvents.value = secondSelectedEvents.value
      activateAction('copy')
    }
  }
}

function cutEvents() {
  if (activeCalendar.value === 'first') {
    if (firstSelectedEvents.value.length > 0) {
      action.value = 'cut'
      selectedEvents.value = firstSelectedEvents.value
      cutCalendar.value = activeCalendar.value
      activateAction('cut')
      deletedEvents.value = []
    }
  } else {
    if (secondSelectedEvents.value.length > 0) {
      action.value = 'cut'
      selectedEvents.value = secondSelectedEvents.value
      cutCalendar.value = activeCalendar.value
      activateAction('cut')
      deletedEvents.value = []
    }
  }
}

function undoEvents() {
  const activeEvents = getActiveEvents()
  let eventsToUpdate = [...activeEvents]
  if (action.value === 'delete') {
    for (const event of deletedEvents.value) {
      eventsToUpdate = [...eventsToUpdate, event]
    }
    if (activeCalendar.value === 'first') {
      firstEvents.value = eventsToUpdate
    } else {
      secondEvents.value = eventsToUpdate
    }
    deletedEvents.value = []
  } else if (action.value === 'cut') {
    let revertEvs = cutCalendar.value === 'first' ? firstEvents.value : secondEvents.value
    for (const event of moveEvents.value) {
      revertEvs = [...revertEvs, event]
    }
    if (cutCalendar.value === 'first') {
      firstEvents.value = revertEvs
    } else {
      secondEvents.value = revertEvs
    }

    let cutEvs = getActiveEvents()
    for (const event of pastedEvents.value) {
      cutEvs = cutEvs.filter((ev) => ev.id !== event.id)
    }
    if (activeCalendar.value === 'first') {
      firstEvents.value = cutEvs
    } else {
      secondEvents.value = cutEvs
    }

    pastedEvents.value = []
  }
}

function detectAction(key: string) {
  switch (key) {
    case 'delete': // Delete
      deleteEvents()
      break
    case 'c': // Copy
      copyEvents()
      break
    case 'x': // Cut
      cutEvents()
      break
    case 'z': // Undo
      undoEvents()
      break
    case 'v': // Paste
      pasteEvents()
      break
  }
}

function switchCalendar(ev: any) {
  if (ev.target.value === 'first') {
    toDate.value = firstToDate.value
    secondSelectedEvents.value = []
  } else {
    toDate.value = secondToDate.value
    firstSelectedEvents.value = []
  }
}

function handlePageLoading(args: MbscPageLoadingEvent) {
  if (activeCalendar.value === 'first') {
    firstToDate.value = args.month!
  } else {
    secondToDate.value = args.month!
  }
  toDate.value = args.month!
}

function handleCellRightClick(args: MbscCellClickEvent) {
  if (!isMenuOpen.value) {
    args.domEvent.preventDefault()
    menuData.value = disabledMenu
    menuAnchor.value = args.domEvent.target
    isMenuOpen.value = true
  }
}

function handleEventRightClick(args: MbscEventClickEvent) {
  const activeEvents = activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
  if (activeEvents.length <= 1) {
    if (activeCalendar.value === 'first') {
      firstEvents.value = [args.event]
    } else {
      secondEvents.value = [args.event]
    }
  }
  args.domEvent.preventDefault()
  menuData.value = defaultMenuData
  menuAnchor.value = args.domEvent.target
  isMenuOpen.value = true
}

function handleEventDeleted(args: MbscEventDeletedEvent) {
  deletedEvents.value = args.events!
  action.value = 'delete'
  snackbarButton.value = {
    action: () => {
      const activeEvents = activeCalendar.value === 'first' ? firstEvents.value : secondEvents.value
      let eventsToUpdate = [...activeEvents]
      for (const event of deletedEvents.value) {
        eventsToUpdate = eventsToUpdate.filter((ev) => ev.id !== event.id)
      }

      if (activeCalendar.value === 'first') {
        firstEvents.value = eventsToUpdate
      } else {
        secondEvents.value = eventsToUpdate
      }

      deletedEvents.value = []
    },
    text: 'Undo'
  }
  snackbarMessage.value = 'Event' + (deletedEvents.value.length === 1 ? '' : 's') + ' deleted'
  dummyElm.value.focus()
  isSnackbarOpen.value = true
}

function handleFirstSelectedEventsChange(args: MbscSelectedEventsChangeEvent) {
  firstSelectedEvents.value = args.events
}

function handleSecondSelectedEventsChange(args: MbscSelectedEventsChangeEvent) {
  secondSelectedEvents.value = args.events
}

function handleSelectChange(args: any) {
  detectAction(args.value)
}

function handleSelectClose() {
  isMenuOpen.value = false
  selectValue.value = ''
}

function handleKeyDown(ev: any) {
  if (ev.ctrlKey || ev.metaKey) {
    detectAction(ev.key)
  }
  if (ev.key === 'Delete') {
    detectAction('delete')
  }
}
</script>

<template>
  <MbscPage @keydown="handleKeyDown($event)">
    <div class="mbsc-flex-col md-copy-cut-paste">
      <div class="mbsc-flex-none">
        <MbscSegmentedGroup v-model="activeCalendar" @change="switchCalendar($event)">
          <MbscSegmented value="first">First calendar</MbscSegmented>
          <MbscSegmented value="second">Second calendar</MbscSegmented>
        </MbscSegmentedGroup>
      </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">
          <MbscEventcalendar
            :data="firstEvents"
            :selectedEvents="firstSelectedEvents"
            :className="activeCalendar === 'second' ? 'md-hide-calendar' : ''"
            :view="myView"
            :clickToCreate="true"
            :dragToCreate="true"
            :dragToMove="true"
            :dragToResize="true"
            :selectMultipleEvents="true"
            @selected-events-change="handleFirstSelectedEventsChange"
            @page-loading="handlePageLoading"
            @cell-right-click="handleCellRightClick"
            @event-right-click="handleEventRightClick"
            @event-deleted="handleEventDeleted"
          />
        </div>
        <div id="demo-copy-cut-paste-second-cont" class="mbsc-flex-1-1 md-copy-cut-paste-cont">
          <MbscEventcalendar
            :data="secondEvents"
            :selectedEvents="secondSelectedEvents"
            :className="activeCalendar === 'first' ? 'md-hide-calendar' : ''"
            :view="myView"
            :clickToCreate="true"
            :dragToCreate="true"
            :dragToMove="true"
            :dragToResize="true"
            :selectMultipleEvents="true"
            @selected-events-change="handleSecondSelectedEventsChange"
            @page-loading="handlePageLoading"
            @cell-right-click="handleCellRightClick"
            @event-right-click="handleEventRightClick"
            @event-deleted="handleEventDeleted"
          />
        </div>
        <MbscSelect
          ref="menuElm"
          display="anchored"
          v-model="selectValue"
          :touchUi="false"
          :data="menuData"
          :anchor="menuAnchor"
          :buttons="[]"
          :isOpen="isMenuOpen"
          :inputProps="{ type: 'hidden' }"
          @change="handleSelectChange"
          @close="handleSelectClose"
        />
      </div>
    </div>
    <div ref="dummyElm" tabindex="-1"></div>
    <MbscSnackbar
      :message="snackbarMessage"
      :button="snackbarButton"
      :duration="3000"
      :isOpen="isSnackbarOpen"
      @close="isSnackbarOpen = false"
    />
    <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
  </MbscPage>
</template>

<style>
.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;
}
</style>
```

## 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-vue.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 vue
   ```

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 vue --trial`.

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

## Related demos

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