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

# Event Hooks - Vue Timeline demo

Explore Vue Timeline lifecycle hooks — see hooks fire on event clicks, initialization, and date changes, tracked in a live event log. For Vue and Nuxt.

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

## Description

The timeline 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 timeline where hours are arranged horizontally and a hierarchical resource tree arranged vertically on the left.
- **External drag & drop** Three external events are shown above the timeline 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 opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected days, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** The left side shows expandable and collapsible resource groups, including parent groups and draggable resources.
- **Resource hierarchy** Nested resources are grouped under parent rows, before listing individual resources.
- **Resource template** Each resource header shows the resource name in bold.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, a description, and a bold time range.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Lifecycle event discovery** Understanding which timeline 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-drag-end="handleResourceDragEnd"
  @resource-drag-start="handleResourceDragStart"
  @resource-order-update="handleResourceOrderUpdate"
  @resource-create="handleResourceCreate"
  @resource-created="handleResourceCreated"
  @resource-delete="handleResourceDelete"
  @resource-deleted="handleResourceDeleted"
  @resource-drag-enter="handleResourceDragEnter"
  @resource-drag-leave="handleResourceDragLeave"
  @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
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - 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
- [`externalResourceDrop`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-externalResourceDrop) - 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-order-update`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceOrderUpdate) - event
- [`resource-create`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceCreate) - event
- [`resource-delete`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onResourceDelete) - 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 myView = {
  timeline: {
    type: 'day',
    resourceReorder: true
  }
}
const myResources = ref([
  { id: 1, name: 'Ryan', color: '#fdf500' },
  { id: 2, name: 'Kate', color: '#ff4600' },
  { id: 3, name: 'John', color: '#ff0101' },
  { id: 4, name: 'Mark', color: '#239a21' },
  { id: 5, name: 'Sharon', color: '#8f1ed6' },
  { id: 6, name: 'Ashley', color: '#01adff' }
])
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 dragData3 = {
  name: 'External resource',
  color: '#d19494'
}

const dragElm1 = ref()
const dragElm2 = ref()
const dragElm3 = 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 handleResourceDragEnd() {
  // Logic for resource drag end
}
function handleResourceDragStart() {
  // Logic for resource drag start
}
function handleResourceOrderUpdate() {
  // Logic for resource update
}
function handleResourceCreate() {
  // Logic for resource create
}
function handleResourceCreated() {
  // Logic for resource created
}
function handleResourceDelete() {
  // Logic for resource delete
}
function handleResourceDeleted() {
  // Logic for resource deleted
}
function handleResourceDragEnter() {
  // Logic for resource update
}
function handleResourceDragLeave() {
  // Logic for resource update
}
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/timeline-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>
  <div ref="dragElm3" class="event-hooks-draggable" :style="{ background: '#d19494' }">
    <div class="draggable-title">External resource</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm3" :dragData="dragData3" type="resource" />
  </div>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :invalid="myInvalids"
    :dragToCreate="true"
    :dragToMove="true"
    :dragToResize="true"
    :externalDrop="true"
    :externalResourceDrop="true"
    @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-drag-end="handleResourceDragEnd"
    @resource-drag-start="handleResourceDragStart"
    @resource-order-update="handleResourceOrderUpdate"
    @resource-create="handleResourceCreate"
    @resource-created="handleResourceCreated"
    @resource-delete="handleResourceDelete"
    @resource-deleted="handleResourceDeleted"
    @resource-drag-enter="handleResourceDragEnter"
    @resource-drag-leave="handleResourceDragLeave"
    @resource-right-click="handleResourceRightClick"
    @resource-hover-in="handleResourceHoverIn"
    @resource-hover-out="handleResourceHoverOut"
    @selected-date-change="handleSelectedDateChange"
  />
</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,
  MbscResourceCreatedEvent,
  MbscResourceCreateEvent,
  MbscResourceDeletedEvent,
  MbscResourceDragEvent,
  MbscResourceOrderEvent,
  MbscSelectedDateChangeEvent
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = {
  timeline: {
    type: 'day',
    resourceReorder: true
  }
}
const myResources = ref([
  { id: 1, name: 'Ryan', color: '#fdf500' },
  { id: 2, name: 'Kate', color: '#ff4600' },
  { id: 3, name: 'John', color: '#ff0101' },
  { id: 4, name: 'Mark', color: '#239a21' },
  { id: 5, name: 'Sharon', color: '#8f1ed6' },
  { id: 6, name: 'Ashley', color: '#01adff' }
])
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 dragData3: MbscResource = {
  id: 'test-res',
  name: 'External resource',
  color: '#d19494'
}

const dragElm1 = ref<HTMLInputElement>()
const dragElm2 = ref<HTMLInputElement>()
const dragElm3 = ref<HTMLInputElement>()

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: MbscResourceClickEvent) {
  // Logic for resource hover in
  console.log(args)
}
function handleResourceHoverOut(args: MbscResourceClickEvent) {
  // Logic for resource hover out
  console.log(args)
}
function handleResourceDragEnd(args: MbscResourceDragEvent) {
  // Logic for resource drag end
  console.log(args)
}
function handleResourceDragStart(args: MbscResourceDragEvent) {
  // Logic for resource drag start
  console.log(args)
}
function handleResourceOrderUpdate(args: MbscResourceOrderEvent) {
  // Logic for resource update
  console.log(args)
}
function handleResourceCreate(args: MbscResourceCreateEvent) {
  // Logic for resource create
  console.log(args)
}
function handleResourceCreated(args: MbscResourceCreatedEvent) {
  // Logic for resource created
  console.log(args)
}
function handleResourceDelete(args: MbscResourceDeletedEvent) {
  // Logic for resource delete
  console.log(args)
}
function handleResourceDeleted(args: MbscResourceDeletedEvent) {
  // Logic for resource deleted
  console.log(args)
}
function handleResourceDragEnter(args: MbscResourceDragEvent) {
  // Logic for resource update
  console.log(args)
}
function handleResourceDragLeave(args: MbscResourceDragEvent) {
  // Logic for resource update
  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/timeline-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>
  <div ref="dragElm3" class="event-hooks-draggable" :style="{ background: '#d19494' }">
    <div class="draggable-title">External resource</div>
    <div class="draggable-text">Drag me to calendar</div>
    <MbscDraggable :element="dragElm3" :dragData="dragData3" type="resource" />
  </div>
  <MbscEventcalendar
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :invalid="myInvalids"
    :dragToCreate="true"
    :dragToMove="true"
    :dragToResize="true"
    :externalDrop="true"
    :externalResourceDrop="true"
    @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-drag-end="handleResourceDragEnd"
    @resource-drag-start="handleResourceDragStart"
    @resource-order-update="handleResourceOrderUpdate"
    @resource-create="handleResourceCreate"
    @resource-created="handleResourceCreated"
    @resource-delete="handleResourceDelete"
    @resource-deleted="handleResourceDeleted"
    @resource-drag-enter="handleResourceDragEnter"
    @resource-drag-leave="handleResourceDragLeave"
    @resource-right-click="handleResourceRightClick"
    @resource-hover-in="handleResourceHoverIn"
    @resource-hover-out="handleResourceHoverOut"
    @selected-date-change="handleSelectedDateChange"
  />
</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 `timeline: { type: 'day', resourceReorder: true }` - a single-day view with drag-to-reorder resources enabled.
- Define 6 resources with `id`, `name`, and `color`.
- Load events from `https://trial.mobiscroll.com/timeline-events/` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. Call `inst.setEvents(events)` for the imperative API.
- Add an `invalid` entry blocking 12:00-13:00 recurring on weekdays (`weekDays: 'MO,TU,WE,TH,FR'`).
- Enable all interactions: `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, `externalDrop: true`, `externalResourceDrop: true`.
- **External draggables** - elements outside the calendar can be registered as Mobiscroll draggables:
  - Event draggables with `dragData: { title, color }` - when dropped onto the calendar, they create new events.
  - One resource draggable with `dragData: { name, color }` and `type="resource"` - when dropped onto the resource column, it creates a new resource row.
  - For the imperative API: use `mbsc-draggable` attribute with `data-drag-data` (JSON string) and `data-type="resource"` on the third card. For component frameworks, use the `Draggable` / `MbscDraggable` component with `dragData` and `type` props.
- **All lifecycle hooks** - register every available hook as an empty handler to catalog them. The handlers contain no logic; the purpose of the demo is to show what hooks exist. Group them 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`, `onResourceCreate`, `onResourceCreated`, `onResourceDelete`, `onResourceDeleted`, `onResourceDragStart`, `onResourceDragEnd`, `onResourceDragEnter`, `onResourceDragLeave`, `onResourceOrderUpdate`
  - **Page / lifecycle**: `onInit`, `onDestroy`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onSelectedDateChange`
- Style each draggable card with padding, border-radius, and `display: inline-block` so they appear as clickable tiles above the calendar.

## 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/timeline/gregorian-jalali-hijri.md) - Use the Vue Timeline with Gregorian, Jalali, or Hijri calendar systems — switch by locale to build scheduling interfaces for Persian.
- Next: [Multi-Language Support](https://demo.mobiscroll.com/vue/timeline/localization.md) - Localize the Vue Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support.