Van Calendar

Vant Calendar Component

Calendar component for selecting dates or date ranges with multiple selection modes.

When to Invoke

Invoke this skill when:

• User needs to select a single date
• User wants to select multiple dates
• User needs to select a date range
• User wants to customize calendar appearance
• User asks about date formatting or validation
• User needs to limit date selection range

Features

• Multiple Selection Modes: single, multiple, range
• Switch Modes: none, month, year-month for navigation
• Custom Date Range: min-date and max-date constraints
• Custom Styling: color customization, formatter support
• Quick Select: hide confirm button for immediate selection
• Tiled Display: inline display without popup
• Custom Day Content: top info, bottom info, custom text
• Accessibility: safe area adaptation, keyboard support

API Reference

Props

Calendar Poppable Props

Calendar Range Props

Calendar Multiple Props

Data Structure of Day

Events

Slots

Methods

Use ref to get Calendar instance and call instance methods.

Usage Examples

Select Single Date

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

<script setup>
import { ref } from 'vue'

const date = ref('')
const show = ref(false)

const formatDate = (date) => {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
}

const => {
  show.value = false
  date.value = formatDate(value)
}
</script>

Select Date Range

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

<script setup>
import { ref } from 'vue'

const date = ref('')
const show = ref(false)

const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`

const => {
  const [start, end] = values
  show.value = false
  date.value = `${formatDate(start)} - ${formatDate(end)}`
}
</script>

Select Multiple Dates

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

<script setup>
import { ref } from 'vue'

const text = ref('')
const show = ref(false)

const => {
  show.value = false
  text.value = `${dates.length} dates selected`
}
</script>

Custom Date Range

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

<script setup>
import { ref } from 'vue'

const show = ref(false)
const minDate = new Date(2010, 0, 1)
const maxDate = new Date(2010, 0, 31)
</script>

Custom Day Text

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

<script setup>
import { ref } from 'vue'

const show = ref(false)

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
}
</script>

Quick Select

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

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Tiled Display

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

Switch Mode

<template>
  <van-calendar v-model:show="show" switch-mode="year-month" />
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Best Practices

1. Date Format on iOS: Avoid using new Date('2020-01-01') on iOS. Use new Date('2020/01/01') or new Date(2020, 0, 1) instead.

2. Async Data in Formatter: Use computed properties to dynamically create formatter functions when working with async data.

3. Performance: Use switch-mode when displaying many months to improve performance.

4. Max Range: Set max-range for range selection to prevent excessive date selection.

5. Custom Styling: Use color prop for simple color changes, or CSS variables for advanced customization.

6. Accessibility: Always provide clear labels and consider screen reader users when customizing calendar content.