Tile UI Vue
Source code

Components

Calendar

Calendar component.

Use Calendar to pick dates in single, multiple, or range modes.

September 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
import { Calendar, toast } from '@tile-ui/vue';
 
export default function CalendarDemo() {
	return (
		<Calendar
			mode="single"

Registry install

pnpm dlx shadcn@latest add @tile-ui/calendar

Package usage

import { Calendar } from '@tile-ui/vue';
 
<Calendar mode="single" onSelect={(date) => console.log(date)} />

Highlights

  • Single, multiple, and range
  • Disabled matcher
  • Outside days

Registry dependencies

Item Purpose
calendar Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Calendar

Prop Type Default
mode 'single' | 'multiple' | 'range' ‘single’
selected Date | Date[] | CalendarRange | undefined —
defaultSelected Date | Date[] | CalendarRange | undefined —
defaultMonth Date —
showOutsideDays boolean true
disabled (date: Date) => boolean —
onSelect (selection: CalendarSelection) => void —
PreviousButtonGroupNextCard