---
title: "Vue Event calendar Event Hooks Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/eventcalendar/event-hooks"
---

# Event Hooks - Vue Event calendar demo

See which lifecycle hooks the Vue event calendar fires on create, drag, hover, and click — interactions are tracked in a live event log. For Vue and Nuxt.

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

## Description

The event calendar 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 month-view event calendar that demonstrates lifecycle events triggered by calendar interactions.
- **External drag & drop** Two external events are shown above the calendar and can be dragged onto the month grid.
- **Month grid** The calendar displays a full month view with weekends disabled.
- **Event labels** Days with events show colored labels inside the day cells, with different colors distinguishing different events.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **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.
- **Event creation** Users can create events by clicking and dragging across calendar cells or by double-clicking a day cell.
- **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 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.

## Best for

- **Lifecycle event discovery** Understanding which Event calendar 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"
  @label-click="handleLabelClick"
  @page-change="handlePageChange"
  @page-loaded="handlePageLoaded"
  @page-oading="handlePageLoading"
  @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
- [`labels`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-labels) - 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
- [`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
- [`label-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onLabelClick) - 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
- [`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 = {
  calendar: { labels: true }
}
const myInvalids = [
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]
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 handleLabelClick() {
  // Logic for label click
}
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 handleSelectedDateChange() {
  // Use it to keep track of the selected date externally
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (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"
    @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"
    @label-click="handleLabelClick"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-oading="handlePageLoading"
    @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,
  MbscLabelClickEvent,
  MbscPageChangeEvent,
  MbscPageLoadedEvent,
  MbscPageLoadingEvent,
  MbscSelectedDateChangeEvent
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref<MbscCalendarEvent[]>([])
const myView: MbscEventcalendarView = {
  calendar: { labels: true }
}
const myInvalids = [
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'SA,SU'
    }
  }
]
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 handleLabelClick(args: MbscLabelClickEvent) {
  // Logic for label click
  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 handleSelectedDateChange(args: MbscSelectedDateChangeEvent) {
  // Use it to keep track of the selected date externally
  console.log(args)
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (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"
    @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"
    @label-click="handleLabelClick"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-oading="handlePageLoading"
    @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 `view: { calendar: { labels: true } }`. Enable `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`, and `externalDrop: true`.
- Add an `invalid` entry blocking weekends: `{ recurring: { repeat: 'weekly', weekDays: 'SA,SU' } }`.
- **External draggables** - elements outside the calendar can be made draggable into it via `dragData: { title, color }`. React/Vue: use the `Draggable` 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.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()` instead for the HTTP call. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery: call `inst.setEvents(events)` in the callback.
- **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`, `onLabelClick`
  - **Event create/update/delete**: `onEventCreate`, `onEventCreated`, `onEventCreateFailed`, `onEventDelete`, `onEventDeleted`, `onEventUpdate`, `onEventUpdated`, `onEventUpdateFailed`
  - **Event drag**: `onEventDragStart`, `onEventDragEnd`, `onEventDragEnter`, `onEventDragLeave`
  - **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/eventcalendar/gregorian-jalali-hijri.md) - Show events in Gregorian, Jalali, or Hijri with the Vue event calendar — switch calendar systems to support Persian, Farsi and Arabic.