modereq- Type
"single" | "range" | "multiple"- Default
- -
- Description
- Selection mode.
Components / Inputs
Calendar
நாட்காட்டி
The Calendar component provides an accessible date picker. Use it for date-of-birth fields, appointment scheduling, and deadline selection.
நாட்காட்டி கூறு அணுகக்கூடிய தேதி தேர்வியை வழங்குகிறது.
General calendar
Component preview
General date pickerபொது தேதி தேர்விTamil calendar
Component preview
Tamil solar date and month calendarசித்திரை, வைகாசி, ஆனி, ஆடி, ஆவணி மாத நாட்காட்டிAppointment date picker
Component preview
Appointment date pickerசந்திப்பு தேதி தேர்விRange selection
Component preview
Leave application rangeவிடுப்பு விண்ணப்ப வரம்புAnatomy
Structure
Anatomy
4 parts documented for implementation and review.
1
Navigation
வழிசெலுத்தல்required<div>Navigation bar with previous/next month arrow buttons and current month/year label. Arrows are icon-only buttons with aria-labels. For Tamil, show Tamil month names when localized.
2
Weekday headers
வாரநாள் தலைப்புகள்<div>Row of abbreviated day name headers (Su Mo Tu We Th Fr Sa) labeling the 7-column grid. Uses text-muted-foreground text-xs. For Tamil: use abbreviated forms.
3
Day cell
நாள் கலம்required<button>Clickable date cells in a 7-column grid. Selected date uses brand background (bg-primary) with white text. Keyboard: arrow keys navigate, Enter selects. Disabled dates show at opacity-50.
4
Range fill
வரம்பு நிரப்புRange indicator connecting start and end dates. Endpoints get full brand color, in-between dates get subtle brand/10 tint for visual continuity across the selected range.
API
Props
selected- Type
Date | DateRange | Date[]- Default
- -
- Description
- Controlled selected date(s).
onSelect- Type
(date: ...) => void- Default
- -
- Description
- Fired on date selection.
disabled- Type
Matcher | Matcher[]- Default
- -
- Description
- Disable specific dates, days of week, or date ranges.
fromDate- Type
Date- Default
- -
- Description
- Earliest selectable date.
toDate- Type
Date- Default
- -
- Description
- Latest selectable date.
| Prop | Type | Default | Description |
|---|---|---|---|
modereq | "single" | "range" | "multiple" | - | Selection mode. |
selected | Date | DateRange | Date[] | - | Controlled selected date(s). |
onSelect | (date: ...) => void | - | Fired on date selection. |
disabled | Matcher | Matcher[] | - | Disable specific dates, days of week, or date ranges. |
fromDate | Date | - | Earliest selectable date. |
toDate | Date | - | Latest selectable date. |
Usage guidance
- Pair with a text Input so users can type dates directly — the calendar is a supplement, not a replacement.
- For date-of-birth fields, use
fromDate/toDateto limit the range to valid ages. - Disable past dates for future-only appointments using the
disabledmatcher.
Best practices
Show selected date with a clear visual indicator
தேர்ந்தெடுத்த தேதியை தெளிவான காட்சி குறிப்பாக காட்டவும்
Selected dates should use brand colors so users can immediately see which date is chosen.
தேர்ந்தெடுத்த தேதி உடனடியாக தெரியும்படி தெளிவான வண்ண குறி பயன்படுத்தவும்.
Don't disable navigation without explanation
காரணம் சொல்லாமல் வழிசெலுத்தலை முடக்காதே
If future or past navigation is disabled, show a message explaining why so users are not confused.
வழிசெலுத்தல் ஏன் முடக்கப்பட்டுள்ளது என்பதை தெரிவிக்காமல் பயனரை குழப்பாதே.
Use range mode for multi-day selections
பல நாள் தேர்வுக்கு range பயன்படுத்தவும்
Use mode='range' for leave applications and booking periods so the start and end dates are clearly shown.
விடுப்பு விண்ணப்பம் மற்றும் முன்பதிவிற்கு range பயன்படுத்தி தொடக்க மற்றும் முடிவு தேதி காட்டவும்.
Don't use Calendar just to display a date
ஒரு தேதியை காட்ட மட்டும் நாட்காட்டி பயன்படுத்தாதே
For displaying a single static date, use formatted text — a full Calendar is an interactive element, not a display widget.
ஒரு தேதியை காட்ட வடிவமைக்கப்பட்ட உரை போதுமானது — நாட்காட்டி ஒரு தொடர்பு கூறு.