Calendar

Month grid

An inline month you can pick a day — or a range — from. The model is an ISO date string ("2019-09-25"), or [start, end] in range mode; the second click closes the range and hovering previews it. locale drives the month name and weekday initials through Intl; weekStart is 1 (Monday) by default, 0 for Sunday. min, max and disabledDates(iso) strike out what can't be picked; month (YYYY-MM) sets the month shown before anything is selected.

Keyboard: arrows move a day or a week (← / → follow reading direction in RTL), Home / End to the week's ends, PageUp / PageDown a month, Enter or Space picks. One cell is in the tab order at a time — the focused day — so the grid is a single stop. The month heading is polite-live, so paging is announced.

For a date field — this in a popover, or the native picker on touch — use DatePicker.

Basic

single · min 2019-09-10

2019年9月

月火水木金土日

2019-09-25

range · en-US · Sunday start

September 2019

SunMonTueWedThuFriSat

[ "2019-09-10", "2019-09-16" ]

weekends disabled

September 2019

MonTueWedThuFriSatSun

<script setup lang="ts">
import { ref } from "vue";
import { BlessCalendar, BlessText } from "blessing-ui";
const day = ref<string | undefined>("2019-09-25");
const stay = ref<[string, string]>(["2019-09-10", "2019-09-16"]);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div>
      <BlessText as="p" size="xs" muted>single · min 2019-09-10</BlessText>
      <BlessCalendar v-model="day" min="2019-09-10" />
      <small>{{ day }}</small>
    </div>
    <div>
      <BlessText as="p" size="xs" muted>range · en-US · Sunday start</BlessText>
      <BlessCalendar v-model="stay" range locale="en-US" :week-start="0" month="2019-09" />
      <small>{{ stay }}</small>
    </div>
    <div>
      <BlessText as="p" size="xs" muted>weekends disabled</BlessText>
      <BlessCalendar
        :disabled-dates="(iso) => [0, 6].includes(new Date(iso).getDay())"
        locale="en-US"
        month="2019-09"
      />
    </div>
  </div>
</template>

Usage

import { BlessCalendar } from "blessing-ui";

API

Props

Name	Type	Default	Description
range	boolean	—	range mode: model is [start, end]
min	string	—
max	string	—
weekStart	0 | 1	1	0 = Sunday, 1 = Monday
locale	string	"ja-JP"
disabledDates	((iso: string) => boolean)	—
month	string	—	month shown initially (YYYY-MM); defaults to model or today
modelValue	string | [string, string]	—

Events

Name	Payload	Description
update:modelValue	[value: string | [string, string] | undefined]