Components
Calendar
The date-picker's month grid, standing on the page without its popup: always open, the trigger gone, the vessel a quiet card. The title zooms out through month and year grids; the grids themselves are the date-picker's machinery — value, range selection, and focus included.
#Basic usage
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
January | February | March | ||||||
April | May | June | ||||||
July | August | September | ||||||
October | November | December |
2020 | 2021 | 2022 | ||||||
2023 | 2024 | 2025 | ||||||
2026 | 2027 | 2028 | ||||||
2029 |
<script setup lang="ts">
import { Calendar } from "@bysages/vue";
</script>
<template>
<Calendar />
</template>
#Props
#Calendar
The date-picker's month grid, standing on the page without its popup: always open, the trigger gone, the vessel a quiet card. The title zooms out through month and year grids; the grids themselves are the date-picker's machinery — value, range selection, and focus included.
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | null as unknown as PropType<DatePickerRootProps["modelValue"]> | undefined | Selected date(s) — an array, as the machine speaks in ranges. |
min | null as unknown as PropType<DatePickerRootProps["min"]> | undefined | — |
max | null as unknown as PropType<DatePickerRootProps["max"]> | undefined | — |