TCalendar / 日历

Calendar for date selection and display. Supports date range, week selection, min/max constraints, disabled dates, mini mode, and multi-view switching. / 日历用于日期选择与展示，支持日期范围、周选择、最小/最大约束、禁用日期、迷你模式和多视图切换。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	string | null	null	v-model selected date
range	boolean	false	Range selection mode
min	string	—	Minimum date
max	string	—	Maximum date
firstDayOfWeek	0 | 1	1	First day of week
fullscreen	boolean	false	Fullscreen mode
mini	boolean	false	Compact mode
readonly	boolean	false	Readonly (display only)

Basic Usage / 基础用法

<script setup lang="ts">
import { TCalendar } from '@gulcc/tabler-vue'

const date = ref('2026-06-25')
</script>

<template>
  <TCalendar v-model="date" />
</template>

Tips / 避坑指南

• Date format is 'YYYY-MM-DD' string
• range=true changes v-model to [start, end] array
• firstDayOfWeek=1 starts on Monday; 0 starts on Sunday
• Uses dayjs internally for date manipulation