VuiAdmin

Calendar

Calendar is a date picker for selecting a single date, several dates, or a range.

September 2026

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/calendar.tsx
Import from@viliha/vui-react/calendar

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Built on react-day-picker. Use mode of single, multiple, or range.

calendar-demo.tsx
import { Calendar } from "@viliha/vui-react/calendar";

export function Example() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border"
    />
  );
}

Calendar props

Plus everything React.ComponentProps<typeof DayPicker> accepts, passed straight through to the underlying element.

PropTypeDefault
buttonVariant?React.ComponentProps<typeof Button>["variant"]"ghost"

CalendarDayButton props

It takes no props of its own. Everything you pass reaches the underlying DayButton primitive, so every attribute it accepts works here unchanged and nothing is invented on top.