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

# Event Hooks - Vue Calendar demo

Explore Vue date picker lifecycle hooks — see which events fire on change, set, and init, and use the live event log to understand callback timing. For Vue and Nuxt.

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

## Description

The date picker ships with different event 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 `change`, `set`, `init` ... will be triggered.

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

## What this demo shows

- Shows date picker examples for selecting a single date.
- **Date picker with inputs** This example opens the picker when the user focuses or clicks the input. It can also be opened with the Show button below the input.
- **Input behavior** The picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.
- **Footer actions** The gray Cancel button discards the change, while the blue Set button confirms the selected date.
- **Input value** Confirming a date with Set displays the selected value in the input using a month, day, and year format.
- **Event log** An Event log panel is shown on 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 date picker lifecycle hooks fire during common user interactions.

## Tutorial

```js
<MbscDatepicker
  @cancel="handleCancel"
  @cell-click="handleCellClick"
  @cell-hover-in="handleCellHoverIn"
  @cell-hover-out="handleCellHoverOut"
  @change="handleChange"
  @close="handleClose"
  @destroy="handleDestroy"
  @init="handleInit"
  @label-click="handleLabelClick"
  @open="handleOpen"
  @page-change="handlePageChange"
  @page-loaded="handlePageLoaded"
  @page-loading="handlePageLoading"
  @temp-change="handleTempChange"
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/vue/datepicker/api#opt-controls) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/datepicker/api#opt-inputStyle) - option
- [`cancel`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCancel) - event
- [`cell-click`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellClick) - event
- [`cell-hover-in`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellHoverIn) - event
- [`cell-hover-out`](https://mobiscroll.com/docs/vue/datepicker/api#event-onCellHoverOut) - event
- [`change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onChange) - event
- [`close`](https://mobiscroll.com/docs/vue/datepicker/api#event-onClose) - event
- [`destroy`](https://mobiscroll.com/docs/vue/datepicker/api#event-onDestroy) - event
- [`init`](https://mobiscroll.com/docs/vue/datepicker/api#event-onInit) - event
- [`label-click`](https://mobiscroll.com/docs/vue/datepicker/api#event-onLabelClick) - event
- [`open`](https://mobiscroll.com/docs/vue/datepicker/api#event-onOpen) - event
- [`page-change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageChange) - event
- [`page-loaded`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageLoaded) - event
- [`page-loading`](https://mobiscroll.com/docs/vue/datepicker/api#event-onPageLoading) - event
- [`temp-change`](https://mobiscroll.com/docs/vue/datepicker/api#event-onTempChange) - event

## Code

### SFC JS

```vue
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

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

function handleCancel() {
  // Logic for cancel button click
}

function handleCellClick() {
  // Logic for event click
}

function handleCellHoverIn() {
  // Logic for handling cell hover in
}

function handleCellHoverOut() {
  // Logic for handling cell hover out
}

function handleChange() {
  // Logic for value change
}

function handleClose() {
  // Your custom event handler goes here
}

function handleDestroy() {
  // Your custom event handler goes here
}

function handleInit() {
  // Logic running on component init
}

function handleLabelClick() {
  // Logic for label click
}

function handleOpen() {
  // Your custom event handler goes here
}

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 handleTempChange() {
  // Logic for temporary value change
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    label="Calendar"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
    @cancel="handleCancel"
    @cell-click="handleCellClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @label-click="handleLabelClick"
    @open="handleOpen"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @temp-change="handleTempChange"
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'

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

function handleCancel() {
  // Logic for cancel button click
}

function handleCellClick() {
  // Logic for event click
}

function handleCellHoverIn() {
  // Logic for handling cell hover in
}

function handleCellHoverOut() {
  // Logic for handling cell hover out
}

function handleChange() {
  // Logic for value change
}

function handleClose() {
  // Your custom event handler goes here
}

function handleDestroy() {
  // Your custom event handler goes here
}

function handleInit() {
  // Logic running on component init
}

function handleLabelClick() {
  // Logic for label click
}

function handleOpen() {
  // Your custom event handler goes here
}

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 handleTempChange() {
  // Logic for temporary value change
}
</script>

<template>
  <MbscDatepicker
    :controls="['calendar']"
    label="Calendar"
    labelStyle="stacked"
    inputStyle="box"
    placeholder="Please select..."
    @cancel="handleCancel"
    @cell-click="handleCellClick"
    @cell-hover-in="handleCellHoverIn"
    @cell-hover-out="handleCellHoverOut"
    @change="handleChange"
    @close="handleClose"
    @destroy="handleDestroy"
    @init="handleInit"
    @label-click="handleLabelClick"
    @open="handleOpen"
    @page-change="handlePageChange"
    @page-loaded="handlePageLoaded"
    @page-loading="handlePageLoading"
    @temp-change="handleTempChange"
  />
</template>
```

## Implementation notes

- Use `controls: ['calendar']` with `label`, `labelStyle: 'stacked'`, `inputStyle: 'box'`, and a `placeholder` set on the input-triggered `Datepicker`.
- Wire the full set of lifecycle hooks: `onCancel`, `onCellClick`, `onCellHoverIn`, `onCellHoverOut`, `onChange`, `onClose`, `onDestroy`, `onInit`, `onLabelClick`, `onOpen`, `onPageChange`, `onPageLoaded`, `onPageLoading`, `onTempChange` - each handler receives `(event, inst)` (Angular: bound via `(onX)="..."`; Vue: `@cancel`, `@cell-click`, `@cell-hover-in`, `@cell-hover-out`, `@change`, `@close`, `@destroy`, `@init`, `@label-click`, `@open`, `@page-change`, `@page-loaded`, `@page-loading`, `@temp-change`).
- Note the distinction between `onChange` (confirmed value change) and `onTempChange` (fires on intermediate/temporary selection before confirmation) when documenting hook semantics.

## 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

- Next: [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/vue/calendar/gregorian-jalali-hijri.md) - Use a Vue calendar date picker with Gregorian, Jalali (Persian), and Hijri (Arabic) calendar system support for regional date selection.