Forms

Calendar

A month of days to pick one day or a range from. Plain YYYY-MM-DD strings in and out, never a Date, so no time zone can move the day. Today is today in the account's zone. Weekdays, months and every label come from Intl in its locale, and the week starts where the locale starts it. Built on react-day-picker with every piece replaced.

view .md

Preview

September 2026

S	M	T	W	T	F	S

2026-09-15 · dots mark days with data

September 2026

S	M	T	W	T	F	S

2026-09-08 → 2026-09-12

Installation

terminal

bash

npx @entrepta/cli@latest add calendar

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

calendar.tsx

tsx

import { Calendar } from "@/components/entrepta/calendar"

<Calendar value={day} onValueChange={setDay} min="2025-01-01" max={today} />

<Calendar
  mode="range"
  value={range}                 // { start, end? }
  onValueChange={setRange}
  renderDay={(day) => hasData(day) ? <Dot /> : null}
/>

Props

Prop	Type	Default	Description
mode	"single" \| "range"	"single"	A range is { start, end? }: end is missing until the second click
min / max	string	-	The first and last days that can be picked
isDisabled	(day: string) => boolean	-	Days that cannot be picked, such as days with no data
renderDay	(day: string) => ReactNode	-	Something small under a day's number, such as a coverage dot
locale / timeZone	string	-	Fall back to the FormatProvider's. timeZone decides which day is today
labels	{ previous?, next?, today?, selected? }	-	The words screen readers hear, for another language