---
title: "Vue Scheduler Event Hooks Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/event-hooks"
---

# Event Hooks - Vue Scheduler demo

Explore Vue Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/scheduler/event-hooks)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/scheduler/event-hooks)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/scheduler/event-hooks)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/event-hooks.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/event-hooks.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/event-hooks.md), [React](https://demo.mobiscroll.com/react/scheduler/event-hooks.md)

## Description

The scheduler ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

While users interact with the UI events like `event-click`, `init`, `selected-date-change` ... will be triggered.

**For a complete list of events go to the documentation** [See available lifecycle events →](https://mobiscroll.com/docs/vue/eventcalendar/api#events)

## What this demo shows

- A desktop daily scheduler with date navigation, multiple resources, and a vertically scrollable time grid for the selected day.
- **External drag & drop** Two external events are shown above the scheduler and can be dragged onto the day view.
- **Event log** An Event log panel is shown at the left and lists the lifecycle events fired during interactions such as event creation, hover, drag, and similar actions.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between days and jump back to the current day.
- **Day header** The short weekday name and the selected date are shown below the main navigation.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Resource strip** Three resources are displayed across the scheduler: `Ryan`, `Kate`, and `John`.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected day.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Current time** A horizontal blue line marks the current time across the scheduler.
- **Hover feedback** Hovering over the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Timed events** Events are displayed as colored cards with a colored left stripe, the event title, and the exact start and end time.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles when the event allows those interactions.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Lifecycle event discovery** Understanding which scheduler lifecycle hooks fire during common user interactions.

## Tutorial

```js
<MbscEventcalendar
  @cell-click="handleCellClick"
  @cell-double-click="handleCellDoubleClick"
  @cell-right-click="handleCellRightClick"
  @cell-hover-in="handleCellHoverIn"
  @cell-hover-out="handleCellHoverOut"
  @destroy="handleDestroy"
  @event-click="handleEventClick"
  @event-create="handleEventCreate"
  @event-created="handleEventCreated"
  @event-create-failed="handleEventCreateFailed"
  @event-delete="handleEventDelete"
  @event-deleted="handleEventDeleted"
  @event-double-click="handleEventDoubleClick"
  @event-drag-start="handleEventDragStart"
  @event-drag-end="handleEventDragEnd"
  @event-drag-enter="handleEventDragEnter"
  @event-drag-leave="handleEventDragLeave"
  @event-hover-in="handleEventHoverIn"
  @event-hover-out="handleEventHoverOut"
  @event-right-click="handleEventRightClick"
  @event-update="handleEventUpdate"
  @event-updated="handleEventUpdated"
  @event-update-failed="handleEventUpdateFailed"
  @init="handleInit"
  @page-change="handlePageChange"
  @page-loaded="handlePageLoaded"
  @page-loading="handlePageLoading"
  @resource-click="handleResourceClick"
  @resource-double-click="handleResourceDoubleClick"
  @resource-right-click="handleResourceRightClick"
  @resource-hover-in="handleResourceHoverIn"
  @resource-hover-out="handleResourceHoverOut"
  @selected-date-change="handleSelectedDateChange"
/>
```

## 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
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`invalid`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-invalid) - 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
- [`externalDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalDrop) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`cell-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellClick) - event
- [`cell-double-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellDoubleClick) - event
- [`cell-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellRightClick) - event
- [`cell-hover-in`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellHoverIn) - event
- [`cell-hover-out`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onCellHoverOut) - event
- [`destroy`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onDestroy) - event
- [`event-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventClick) - event
- [`event-create`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreate) - event
- [`event-created`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreated) - event
- [`event-create-failed`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventCreateFailed) - event
- [`event-delete`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDelete) - event
- [`event-deleted`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDeleted) - event
- [`event-double-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDoubleClick) - event
- [`event-drag-start`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragStart) - event
- [`event-drag-end`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragEnd) - event
- [`event-drag-enter`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragEnter) - event
- [`event-drag-leave`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventDragLeave) - event
- [`event-hover-in`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverIn) - event
- [`event-hover-out`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverOut) - event
- [`event-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventRightClick) - event
- [`event-update`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventUpdate) - event
- [`event-updated`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventUpdated) - event
- [`event-update-failed`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventUpdateFailed) - event
- [`init`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onInit) - event
- [`page-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageChange) - event
- [`page-loaded`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoaded) - event
- [`page-loading`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoading) - event
- [`resource-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceClick) - event
- [`resource-double-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceDoubleClick) - event
- [`resource-right-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceRightClick) - event
- [`resource-hover-in`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceHoverIn) - event
- [`resource-hover-out`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceHoverOut) - event
- [`selected-date-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onSelectedDateChange) - event

## Code

### SFC JS

```vue
<script setup>
import {
  getJson,
  MbscDraggable,
  MbscEventcalendar,
  setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref([])
const myResources = [
  { id: 1, name: 'Ryan', color: '#f7c4b4' },
  { id: 2, name: 'Kate', color: '#c6f1c9' },
  { id: 3, name: 'John', color: '#e8d0ef' }
]
const myView = {
  scheduler: {
    type: 'day'
  }
}
const myInvalids = [
  {
    start: '12:00',
    end: '13:00',
    title: 'Lunch break',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    }
  }
]
const dragData1 = {
  title: 'External drag 1',
  color: '#ffdab8'
}
const dragData2 = {
  title: 'External drag 2',
  color: '#ddfcf7'
}

const dragElm1 = ref()
const dragElm2 = ref()

function handleCellClick() {
  // Logic for event click
}
function handleCellDoubleClick() {
  // Logic for cell double click
}
function handleCellRightClick() {
  // Logic for cell right click
}
function handleCellHoverIn() {
  // Logic for cell hover in
}
function handleCellHoverOut() {
  // Logic for cell hover out
}
function handleDestroy() {
  // Logic for destroying the event calendar
}
function handleEventClick() {
  // Logic for event click
}
function handleEventCreate() {
  // Logic for event create
}
function handleEventCreated() {
  // Logic for event created
}
function handleEventCreateFailed() {
  // Logic for failed event create
}
function handleEventDelete() {
  // Logic for event delete
}
function handleEventDeleted() {
  // Logic for event deleted
}
function handleEventDoubleClick() {
  // Logic for event double click
}
function handleEventDragStart() {
  // Logic for event drag start
}
function handleEventDragEnd() {
  // Logic for event drag end
}
function handleEventDragEnter() {
  // Logic for event drag enter
}
function handleEventDragLeave() {
  // Logic for event drag leave
}
function handleEventHoverIn() {
  // Logic for event hover in
}
function handleEventHoverOut() {
  // Logic for event hover out
}
function handleEventRightClick() {
  // Logic for event right click
}
function handleEventUpdate() {
  // Logic for event update
}
function handleEventUpdated() {
  // Logic for event updated
}
function handleEventUpdateFailed() {
  // Logic for failed event update
}
function handleInit() {
  // Logic running on component init
}
function handlePageChange() {
  // Your custom event handler goes here
}
function handlePageLoaded() {
  // Use it to inject custom markup & attach custom listeners
}
function handlePageLoading() {
  // Use it to load data on demand
}
function handleResourceClick() {
  // Logic for resource click
}
function handleResourceDoubleClick() {
  // Logic for resource double click
}
function handleResourceRightClick() {
  // Logic for resource right click
}
function handleResourceHoverIn() {
  // Logic for resource hover in
}
function handleResourceHoverOut() {
  // Logic for resource hover out
}
function handleSelectedDateChange() {
  // Use it to keep track of the selected date externally
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/resource-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <div ref="dragElm1" class="event-hooks-draggable" :style="{ background: '#ffdab8' }">
    <div class="draggable-title">External drag 1</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm1" :dragData="dragData1" />
  </div>
  <div ref="dragElm2" class="event-hooks-draggable" :style="{ background: '#ddfcf7' }">
    <div class="draggable-title">External drag 2</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm2" :dragData="dragData2" />
  </div>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :invalid="myInvalids"
    :dragToCreate="true"
    :dragToMove="true"
    :dragToResize="true"
    :externalDrop="true"
    :resources="myResources"
    @cell-click="handleCellClick"
    @cell-double-click="handleCellDoubleClick"
    @cell-right-click="handleCellRightClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @destroy="handleDestroy"
    @event-click="handleEventClick"
    @event-create="handleEventCreate"
    @event-created="handleEventCreated"
    @event-create-failed="handleEventCreateFailed"
    @event-delete="handleEventDelete"
    @event-deleted="handleEventDeleted"
    @event-double-click="handleEventDoubleClick"
    @event-drag-start="handleEventDragStart"
    @event-drag-end="handleEventDragEnd"
    @event-drag-enter="handleEventDragEnter"
    @event-drag-leave="handleEventDragLeave"
    @event-hover-in="handleEventHoverIn"
    @event-hover-out="handleEventHoverOut"
    @event-right-click="handleEventRightClick"
    @event-update="handleEventUpdate"
    @event-updated="handleEventUpdated"
    @event-update-failed="handleEventUpdateFailed"
    @init="handleInit"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @resource-click="handleResourceClick"
    @resource-double-click="handleResourceDoubleClick"
    @resource-right-click="handleResourceRightClick"
    @resource-hover-in="handleResourceHoverIn"
    @resource-hover-out="handleResourceHoverOut"
    @selected-date-change="handleSelectedDateChange"
  ></MbscEventcalendar>
</template>

<style>
.event-hooks-draggable {
  padding: 10px 20px;
  display: inline-block;
  margin: 15px;
  border-radius: 8px;
  width: 210px;
}

.event-hooks-draggable .draggable-title {
  font-size: 16px;
  font-weight: 600;
}

.event-hooks-draggable .draggable-text {
  opacity: 0.7;
  line-height: 25px;
}

.event-hooks-draggable-1 {
  background: #ffdab8;
}

.event-hooks-draggable-2 {
  background: #ddfcf7;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscDraggable,
  MbscEventcalendar,
  setOptions
} from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscCellClickEvent,
  MbscCellHoverEvent,
  MbscEventcalendarView,
  MbscEventClickEvent,
  MbscEventCreatedEvent,
  MbscEventCreateEvent,
  MbscEventCreateFailedEvent,
  MbscEventDeletedEvent,
  MbscEventDeleteEvent,
  MbscEventDragEvent,
  MbscEventUpdatedEvent,
  MbscEventUpdateEvent,
  MbscEventUpdateFailedEvent,
  MbscPageChangeEvent,
  MbscPageLoadedEvent,
  MbscPageLoadingEvent,
  MbscResource,
  MbscResourceClickEvent,
  MbscResourceHoverEvent,
  MbscSelectedDateChangeEvent
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref<MbscCalendarEvent[]>([])
const myResources: MbscResource[] = [
  { id: 1, name: 'Ryan', color: '#f7c4b4' },
  { id: 2, name: 'Kate', color: '#c6f1c9' },
  { id: 3, name: 'John', color: '#e8d0ef' }
]
const myView: MbscEventcalendarView = {
  scheduler: {
    type: 'day'
  }
}
const myInvalids = [
  {
    start: '12:00',
    end: '13:00',
    title: 'Lunch break',
    recurring: {
      repeat: 'weekly',
      weekDays: 'MO,TU,WE,TH,FR'
    }
  }
]
const dragData1: MbscCalendarEvent = {
  title: 'External drag 1',
  color: '#ffdab8'
}
const dragData2: MbscCalendarEvent = {
  title: 'External drag 2',
  color: '#ddfcf7'
}

const dragElm1 = ref<HTMLDivElement>()
const dragElm2 = ref<HTMLDivElement>()

function handleCellClick(args: MbscCellClickEvent) {
  // Logic for event click
  console.log(args)
}
function handleCellDoubleClick(args: MbscCellClickEvent) {
  // Logic for cell double click
  console.log(args)
}
function handleCellRightClick(args: MbscCellClickEvent) {
  // Logic for cell right click
  console.log(args)
}
function handleCellHoverIn(args: MbscCellHoverEvent) {
  // Logic for cell hover in
  console.log(args)
}
function handleCellHoverOut(args: MbscCellHoverEvent) {
  // Logic for cell hover out
  console.log(args)
}
function handleDestroy(args: any) {
  // Logic for destroying the event calendar
  console.log(args)
}
function handleEventClick(args: MbscEventClickEvent) {
  // Logic for event click
  console.log(args)
}
function handleEventCreate(args: MbscEventCreateEvent) {
  // Logic for event create
  console.log(args)
}
function handleEventCreated(args: MbscEventCreatedEvent) {
  // Logic for event created
  console.log(args)
}
function handleEventCreateFailed(args: MbscEventCreateFailedEvent) {
  // Logic for failed event create
  console.log(args)
}
function handleEventDelete(args: MbscEventDeleteEvent) {
  // Logic for event delete
  console.log(args)
}
function handleEventDeleted(args: MbscEventDeletedEvent) {
  // Logic for event deleted
  console.log(args)
}
function handleEventDoubleClick(args: MbscEventClickEvent) {
  // Logic for event double click
  console.log(args)
}
function handleEventDragStart(args: MbscEventDragEvent) {
  // Logic for event drag start
  console.log(args)
}
function handleEventDragEnd(args: MbscEventDragEvent) {
  // Logic for event drag end
  console.log(args)
}
function handleEventDragEnter(args: MbscEventDragEvent) {
  // Logic for event drag enter
  console.log(args)
}
function handleEventDragLeave(args: MbscEventDragEvent) {
  // Logic for event drag leave
  console.log(args)
}
function handleEventHoverIn(args: MbscEventClickEvent) {
  // Logic for event hover in
  console.log(args)
}
function handleEventHoverOut(args: MbscEventClickEvent) {
  // Logic for event hover out
  console.log(args)
}
function handleEventRightClick(args: MbscEventClickEvent) {
  // Logic for event right click
  console.log(args)
}
function handleEventUpdate(args: MbscEventUpdateEvent) {
  // Logic for event update
  console.log(args)
}
function handleEventUpdated(args: MbscEventUpdatedEvent) {
  // Logic for event updated
  console.log(args)
}
function handleEventUpdateFailed(args: MbscEventUpdateFailedEvent) {
  // Logic for failed event update
  console.log(args)
}
function handleInit(args: any) {
  // Logic running on component init
  console.log(args)
}
function handlePageChange(args: MbscPageChangeEvent) {
  // Your custom event handler goes here
  console.log(args)
}
function handlePageLoaded(args: MbscPageLoadedEvent) {
  // Use it to inject custom markup & attach custom listeners
  console.log(args)
}
function handlePageLoading(args: MbscPageLoadingEvent) {
  // Use it to load data on demand
  console.log(args)
}
function handleResourceClick(args: MbscResourceClickEvent) {
  // Logic for resource click
  console.log(args)
}
function handleResourceDoubleClick(args: MbscResourceClickEvent) {
  // Logic for resource double click
  console.log(args)
}
function handleResourceRightClick(args: MbscResourceClickEvent) {
  // Logic for resource right click
  console.log(args)
}
function handleResourceHoverIn(args: MbscResourceHoverEvent) {
  // Logic for resource hover in
  console.log(args)
}
function handleResourceHoverOut(args: MbscResourceHoverEvent) {
  // Logic for resource hover out
  console.log(args)
}
function handleSelectedDateChange(args: MbscSelectedDateChangeEvent) {
  // Use it to keep track of the selected date externally
  console.log(args)
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/resource-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <div ref="dragElm1" class="event-hooks-draggable" :style="{ background: '#ffdab8' }">
    <div class="draggable-title">External drag 1</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm1" :dragData="dragData1" />
  </div>
  <div ref="dragElm2" class="event-hooks-draggable" :style="{ background: '#ddfcf7' }">
    <div class="draggable-title">External drag 2</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm2" :dragData="dragData2" />
  </div>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :invalid="myInvalids"
    :dragToCreate="true"
    :dragToMove="true"
    :dragToResize="true"
    :externalDrop="true"
    :resources="myResources"
    @cell-click="handleCellClick"
    @cell-double-click="handleCellDoubleClick"
    @cell-right-click="handleCellRightClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @destroy="handleDestroy"
    @event-click="handleEventClick"
    @event-create="handleEventCreate"
    @event-created="handleEventCreated"
    @event-create-failed="handleEventCreateFailed"
    @event-delete="handleEventDelete"
    @event-deleted="handleEventDeleted"
    @event-double-click="handleEventDoubleClick"
    @event-drag-start="handleEventDragStart"
    @event-drag-end="handleEventDragEnd"
    @event-drag-enter="handleEventDragEnter"
    @event-drag-leave="handleEventDragLeave"
    @event-hover-in="handleEventHoverIn"
    @event-hover-out="handleEventHoverOut"
    @event-right-click="handleEventRightClick"
    @event-update="handleEventUpdate"
    @event-updated="handleEventUpdated"
    @event-update-failed="handleEventUpdateFailed"
    @init="handleInit"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @resource-click="handleResourceClick"
    @resource-double-click="handleResourceDoubleClick"
    @resource-right-click="handleResourceRightClick"
    @resource-hover-in="handleResourceHoverIn"
    @resource-hover-out="handleResourceHoverOut"
    @selected-date-change="handleSelectedDateChange"
  ></MbscEventcalendar>
</template>

<style>
.event-hooks-draggable {
  padding: 10px 20px;
  display: inline-block;
  margin: 15px;
  border-radius: 8px;
  width: 210px;
}

.event-hooks-draggable .draggable-title {
  font-size: 16px;
  font-weight: 600;
}

.event-hooks-draggable .draggable-text {
  opacity: 0.7;
  line-height: 25px;
}

.event-hooks-draggable-1 {
  background: #ffdab8;
}

.event-hooks-draggable-2 {
  background: #ddfcf7;
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'day' } }`.
- Define 3 resources (Ryan, Kate, John) with `id`, `name`, and `color`. Load events from `https://trial.mobiscroll.com/resource-events/` via JSONP: React/Vue call `getJson(url, callback, 'jsonp')`; JS calls `mobiscroll.getJson(url, callback, 'jsonp')`; jQuery calls `$.getJSON(url + '&callback=?', callback)`; Angular uses `HttpClient.jsonp()`. React/Angular/Vue: in the callback, assign the fetched array to the state/property bound to the `data` prop. Imperative API (JS/jQuery): call `inst.setEvents(events)` in the callback.
- Add an `invalid` entry blocking `12:00–13:00` recurring weekly on `MO,TU,WE,TH,FR` (titled "Lunch break") - all frameworks use the same pattern.
- Enable `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, and `externalDrop: true`.
- **External draggables** - elements outside the calendar can be made draggable into it via `dragData: { title, color }`. React/Vue: use `Draggable` / `MbscDraggable` component with `dragData` and `element` (ref) props. Angular: use the `mbsc-draggable` directive with `[dragData]`. JS/jQuery: use the `mbsc-draggable` attribute with `data-drag-data` as a JSON string.
- **All lifecycle hooks** - register every available hook as an empty handler, grouped by concern:
  - **Cell**: `onCellClick`, `onCellDoubleClick`, `onCellRightClick`, `onCellHoverIn`, `onCellHoverOut`
  - **Event interaction**: `onEventClick`, `onEventDoubleClick`, `onEventRightClick`, `onEventHoverIn`, `onEventHoverOut`
  - **Event create/update/delete**: `onEventCreate`, `onEventCreated`, `onEventCreateFailed`, `onEventDelete`, `onEventDeleted`, `onEventUpdate`, `onEventUpdated`, `onEventUpdateFailed`
  - **Event drag**: `onEventDragStart`, `onEventDragEnd`, `onEventDragEnter`, `onEventDragLeave`
  - **Resource**: `onResourceClick`, `onResourceDoubleClick`, `onResourceRightClick`, `onResourceHoverIn`, `onResourceHoverOut`
  - **Page / lifecycle**: `onInit`, `onDestroy`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onSelectedDateChange`

## 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: [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/vue/scheduler/gregorian-jalali-hijri.md) - Switch the Vue Scheduler between Gregorian, Jalali, and Hijri calendar systems — locale and language packs load automatically.
- Next: [Localization](https://demo.mobiscroll.com/vue/scheduler/localization.md) - Add multi-language support to the Vue Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings manually overridable.