Vibe UI
Initializing Vibe UI System...
Vibe UI

Calendar

Calendar component represents a date picker layout calendar grid.

Calendar

Calendar component represents a date picker layout calendar grid.

Preview

SuMoTuWeThFrSa

Installation

pnpm dlx vibe-ui-kit@latest add calendar button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Presets

Explore the different calendar styling variants, featuring Default Card, Glassmorphism, Retro Neobrutalism, and Neon Glow.

Default Card
SuMoTuWeThFrSa
Glassmorphic
SuMoTuWeThFrSa
Retro Neobrutalism
SuMoTuWeThFrSa
Neon Glow
SuMoTuWeThFrSa

Selection & Filter Patterns

Flexible calendar modes including Date Range, Multi-Date selection, Disabled schedules, and clean month view.

Date Range Selection
SuMoTuWeThFrSa
Multi-Date Selection
SuMoTuWeThFrSa
Weekdays Only (Weekends Disabled)
SuMoTuWeThFrSa
Clean Month View (No Outside Days)
SuMoTuWeThFrSa

Real-World Applications

Production-ready integration patterns including meeting booking widgets and Popover DatePicker inputs.

Interactive Booking Widget
Schedule Meeting
Select an available date below
SuMoTuWeThFrSa
Popover DatePicker Input

Props

PropTypeDefaultDescription
variant"default" | "glass" | "retro" | "glow""default"Visual style preset theme of the calendar container and active date selection cell.
mode"single" | "range" | "multiple""single"Selection mode determining whether a single date, date range, or multiple dates can be selected.
selectedDate | DateRange | Date[]-Currently selected date, date range object ({ from, to }), or array of selected dates.
onSelect(date: any) => void-Event callback function triggered when a date or date range selection changes.
showOutsideDaysbooleantrueControls whether dates belonging to adjacent previous/next months are visible in the grid.
disabledMatcher | Matcher[]-Date matcher rule or function (e.g. { dayOfWeek: [0, 6] }) to disable selection on specific dates.
classNamestring-Additional Tailwind CSS classes applied directly to the root calendar container.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Calendar | Vibe UI