# Vue Scheduler Drag and Drop

> Move and resize events with the pointer — snapped to a configurable step, previewed live, cancellable with Escape.

Drag an event to move it; drag its top or bottom edge to resize. Both
operations snap to the `snap` step (default `15` minutes), render a live
preview, and can be abandoned with <kbd>Escape</kbd> before release.

```html
<script setup lang="ts">
import { CScheduler, type EventChangePayload } from '@coreui/vue-scheduler'
import { ref } from 'vue'

const pad = (n: number) => String(n).padStart(2, '0')
const day = (offset: number) => {
  const date = new Date()
  date.setDate(date.getDate() - ((date.getDay() + 6) % 7) + offset)
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
}

const events = [
  { id: 'kickoff', title: 'Kickoff', start: `${day(0)}T09:00`, end: `${day(0)}T10:00` },
  { id: 'review', title: 'Review', start: `${day(2)}T13:00`, end: `${day(2)}T14:30`, color: '#2eb85c' }
]

const log = ref('')

const onEventChange = (change: EventChangePayload) => {
  log.value = `${change.action}: ${change.event.title} → ${change.event.start}`
}
</script>

<template>
  <CScheduler
    :day-start-hour="8"
    :day-end-hour="18"
    :snap="30"
    :events="events"
    @event-change="onEventChange"
  />
  <p class="mt-2 mb-0 text-body-secondary">{{ log }}</p>
</template>
```

## Touch

On touch devices the grids pan natively — a drag starts from a **long
press** (~300 ms): hold an event until it engages, then move; page
scrolling is suppressed for the rest of the gesture and <kbd>Escape</kbd>
still cancels. A quick tap keeps its click semantics (selection + edit
dialog), and moving your finger right away simply scrolls.

## The eventChange payload

Every committed operation emits `eventChange`:

| Property | Description |
| --- | --- |
| `action` | `'create'`, `'move'`, `'resize'`, `'update'` or `'delete'`. |
| `event` | The event with its updated ISO dates. |
| `occurrence` | The affected occurrence (`key`, `start`, `end`), or `null` for `create`. |
| `revert` | Call to restore the previous state — e.g. when your API rejects the change. |
| `scope` | For recurring events: `'occurrence'`, `'future'` or `'all'`. |

Moving or resizing a single occurrence of a recurring event detaches it by
default: the series gains an exception date and the change materializes as a
standalone event. See [Recurrence](https://coreui.io/scheduler/vue/docs/features/recurrence/) for the other
scopes.