vant/src/calendar

Calendar

Intro

Calendar component for selecting dates or date ranges.

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 = `选择了 ${dates.length} 个日期`;
    };

    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、left、right.

<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

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-bottom	Whether to enable bottom safe area adaptation	boolean	true
teleport	Return the mount node for Calendar	string | Element	-

Range Props

Following props are supported when the type is range

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

Multiple Props

Following props are supported when the type is multiple

Attribute	Description	Type	Default
max-range	Max count of selectable days	number | string	Unlimitied
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、start、middle、end、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	{ date: Date, title: string }

Slots

Name	Description
title	Custom title
footer	Custom fotter

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	-

Less Variables

How to use: Custom Theme.

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