Install

import { createApp } from 'vue';
import { Calendar } from 'vant';

const app = createApp();
app.use(Calendar);

Usage

Select Single Date

The confirm event will be emitted after the date selection is completed.

<van-cell title="Select Single Date" :value="date" @click="show = true" />
<van-calendar v-model:show="show" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => \`\${date.getMonth() + 1}/\${date.getDate()}\`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};

Select Multiple Date

<van-cell title="Select Multiple Date" :value="text" @click="show = true" />
<van-calendar v-model:show="show" type="multiple" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const text = ref('');
    const show = ref(false);

    const onConfirm = (dates) => {
      show.value = false;
      text.value = \`\u9009\u62E9\u4E86 \${dates.length} \u4E2A\u65E5\u671F\`;
    };

    return {
      text,
      show,
      onConfirm,
    };
  },
};

Select Date Range

You can select a date range after setting type torange. In range mode, the date returned by the confirm event is an array, the first item in the array is the start time and the second item is the end time.

<van-cell title="Select Date Range" :value="date" @click="show = true" />
<van-calendar v-model:show="show" type="range" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const date = ref('');
    const show = ref(false);

    const formatDate = (date) => \`\${date.getMonth() + 1}/\${date.getDate()}\`;
    const onConfirm = (values) => {
      const [start, end] = values;
      show.value = false;
      date.value = \`\${formatDate(start)} - \${formatDate(end)}\`;
    };

    return {
      date,
      show,
      onConfirm,
    };
  },
};

Quick Select

Set show-confirm to false to hide the confirm button. In this case, the confirm event will be emitted immediately after the selection is completed.

<van-calendar v-model:show="show" :show-confirm="false" />

Custom Color

Use color prop to custom calendar color.

<van-calendar v-model:show="show" color="#1989fa" />

Custom Date Range

Use min-date and max-date to custom date range.

<van-calendar v-model:show="show" :min-date="minDate" :max-date="maxDate" />

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);

    return {
      show,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31),
    };
  },
};

Custom Confirm Text

Use confirm-text and confirm-disabled-text to custom confirm text.

<van-calendar
  v-model:show="show"
  type="range"
  confirm-text="OK"
  confirm-disabled-text="Select End Time"
/>

Custom Day Text

Use formatter to custom day text.

<van-calendar v-model:show="show" type="range" :formatter="formatter" />

export default {
  setup() {
    const formatter = (day) => {
      const month = day.date.getMonth() + 1;
      const date = day.date.getDate();

      if (month === 5) {
        if (date === 1) {
          day.topInfo = 'Labor Day';
        } else if (date === 4) {
          day.topInfo = 'Youth Day';
        } else if (date === 11) {
          day.text = 'Today';
        }
      }

      if (day.type === 'start') {
        day.bottomInfo = 'In';
      } else if (day.type === 'end') {
        day.bottomInfo = 'Out';
      }

      return day;
    };

    return {
      formatter,
    };
  },
};

Custom Position

Use position to custom popup position, can be set to top\u3001left\u3001right.

<van-calendar v-model:show="show" :round="false" position="right" />

Max Range

When selecting a date range, you can use the max-range prop to specify the maximum number of selectable days.

<van-calendar type="range" :max-range="3" :style="{ height: '500px' }" />

Custom First Day Of Week

Use first-day-of-week to custom the start day of week

<van-calendar first-day-of-week="1" />

Tiled display

Set poppable to false, the calendar will be displayed directly on the page instead of appearing as a popup

<van-calendar
  title="Calendar"
  :poppable="false"
  :show-confirm="false"
  :style="{ height: '500px' }"
/>

API

Props

Attribute	Description	Type	Default
type	Type, can be set to `range` `multiple`	string	`single`
title	Title of calendar	string	`Calendar`
color	Color for the bottom button and selected date	string	`#ee0a24`
min-date	Min date	Date	Today
max-date	Max date	Date	Six months after the today
default-date	Default selected date	Date \| Date[] \| null	Today
row-height	Row height	number \| string	`64`
formatter	Day formatter	(day: Day) => Day	-
poppable	Whether to show the calendar inside a popup	boolean	`true`
lazy-render	Whether to enable lazy render	boolean	`true`
show-mark	Whether to show background month mark	boolean	`true`
show-title	Whether to show title	boolean	`true`
show-subtitle	Whether to show subtitle	boolean	`true`
show-confirm	Whether to show confirm button	boolean	`true`
readonly	Whether to be readonly	boolean	`false`
confirm-text	Confirm button text	string	`Confirm`
confirm-disabled-text	Confirm button text when disabled	string	`Confirm`
first-day-of-week	Set the start day of week	0-6	`0`

Calendar Poppable Props

Following props are supported when the poppable is true

Attribute	Description	Type	Default
v-model:show	Whether to show calendar	boolean	`false`
position	Popup position, can be set to `top` `right` `left`	string	`bottom`
round	Whether to show round corner	boolean	`true`
close-on-popstate	Whether to close when popstate	boolean	`true`
close-on-click-overlay	Whether to close when overlay is clicked	boolean	`true`
safe-area-inset-top	Whether to enable top safe area adaptation	boolean	`false`
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`true`
teleport	Specifies a target element where Calendar will be mounted	string \| Element	-

Calendar Range Props

Following props are supported when the type is range

Attribute	Description	Type	Default
max-range	Number of selectable days	number \| string	Unlimited
range-prompt	Error message when exceeded max range	string	`Choose no more than xx days`
show-range-prompt	Whether prompt error message when exceeded max range	boolean	`true`
allow-same-day	Whether the start and end time of the range is allowed on the same day	boolean	`false`

Calendar Multiple Props

Following props are supported when the type is multiple

Attribute	Description	Type	Default
max-range	Max count of selectable days	number \| string	Unlimited
range-prompt	Error message when exceeded max count	string	`Choose no more than xx days`

Data Structure of Day

Key	Description	Type
date	Date	Date
type	Type, can be set to `selected`\u3001`start`\u3001`middle`\u3001`end`\u3001`disabled`	string
text	Text	string
topInfo	Top info	string
bottomInfo	Bottom info	string
className	Extra className	string

Events

Event	Description	Arguments
select	Emitted when date is selected	value: Date \| Date[]
confirm	Emitted after date selection is complete, if `show-confirm` is `true`, it is Emitted after clicking the confirm button	value: Date \| Date[]
open	Emitted when opening Popup	-
close	Emitted when closing Popup	-
opened	Emitted when Popup is opened	-
closed	Emitted when Popup is closed	-
unselect	Emitted when unselect date when type is multiple	value: Date
month-show	Emitted when a month enters the visible area	value: { date: Date, title: string }
over-range	Emitted when exceeded max range	-
click-subtitle `v3.1.3`	Emitted when clicking the subtitle	event: MouseEvent

Slots

Name	Description	SlotProps
title	Custom title	-
subtitle `v3.1.3`	Custom subtitle	-
footer	Custom footer	-
confirm-text `v3.2.6`	Custom confirm text	{ disabled: boolean }
top-info `v3.0.17`	Custom top info of day	day: Day
bottom-info `v3.0.17`	Custom bottom info of day	day: Day

Methods

Use ref to get Calendar instance and call instance methods.

Name	Description	Attribute	Return value
reset	Reset selected date, will reset to default date when no params passed	date?: Date \| Date[]	-
scrollToDate	Scroll to date	date: Date	-
getSelectedDate	get selected date	-	Date \| Date[] \| null

Types

The component exports the following type definitions:

import type {
  CalendarType,
  CalendarProps,
  CalendarDayItem,
  CalendarDayType,
  CalendarInstance,
} from 'vant';

CalendarInstance is the type of component instance:

import { ref } from 'vue';
import type { CalendarInstance } from 'vant';

const calendarRef = ref<CalendarInstance>();

calendarRef.value?.reset();

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-calendar-background-color	var(--van-background-color-light)	-
--van-calendar-popup-height	80%	-
--van-calendar-header-box-shadow	0 2px 10px rgba(125, 126, 128, 0.16)	-
--van-calendar-header-title-height	44px	-
--van-calendar-header-title-font-size	var(--van-font-size-lg)	-
--van-calendar-header-subtitle-font-size	var(--van-font-size-md)	-
--van-calendar-weekdays-height	30px	-
--van-calendar-weekdays-font-size	var(--van-font-size-sm)	-
--van-calendar-month-title-font-size	var(--van-font-size-md)	-
--van-calendar-month-mark-color	fade(var(--van-gray-2), 80%)	-
--van-calendar-month-mark-font-size	160px	-
--van-calendar-day-height	64px	-
--van-calendar-day-font-size	var(--van-font-size-lg)	-
--van-calendar-day-margin-bottom	4px	-
--van-calendar-range-edge-color	var(--van-white)	-
--van-calendar-range-edge-background-color	var(--van-danger-color)	-
--van-calendar-range-middle-color	var(--van-danger-color)	-
--van-calendar-range-middle-background-opacity	0.1	-
--van-calendar-selected-day-size	54px	-
--van-calendar-selected-day-color	var(--van-white)	-
--van-calendar-info-font-size	var(--van-font-size-xs)	-
--van-calendar-info-line-height	var(--van-line-height-xs)	-
--van-calendar-selected-day-background-color	var(--van-danger-color)	-
--van-calendar-day-disabled-color	var(--van-text-color-3)	-
--van-calendar-confirm-button-height	36px	-
--van-calendar-confirm-button-margin	7px 0	-

Calendar

Intro