Mon
Tue
Wed
Thu
Fri
Sat
Sun
Standalone calendar component for date selection.
"use client";
import { useState } from 'react';
import { Calendar } from '@photonix/ultimate';
export default function CalendarBasicExample() {
const [month, setMonth] = useState(new Date(2026, 5, 1));
const [selectedDate, setSelectedDate] = useState(new Date(2026, 5, 12));
return (
<Calendar
month={month}
onMonthChange={setMonth}
selectedDate={selectedDate}
onDayClick={setSelectedDate}
mode="single"
/>
);
}Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | |
month | Date | - | Current month to display |
onMonthChange | ((month: Date) => void) | - | Called when month changes via navigation |
mode | "single" | "range" | 'single' | Selection mode: single date or range |
selectedDate | Date | - | Selected date for single mode |
rangeStart | Date | - | Range start date |
rangeEnd | Date | - | Range end date |
onDayClick | ((date: Date) => void) | - | Called when a day is clicked (single mode) |
onRangeChange | ((start: Date, end?: Date) => void) | - | Called when range changes (range mode) |
minDate | Date | - | Minimum selectable date |
maxDate | Date | - | Maximum selectable date |
hidePrevButton | boolean | false | Hide previous month button |
hideNextButton | boolean | false | Hide next month button |
hasShadow | boolean | true | Show shadow and padding (card style) |
headerContent | React.ReactNode | - | Custom header content? |
hideHeader | boolean | false | Hide the entire header (navigation and title) |
hideWeekDays | boolean | false | Hide the weekdays labels (Mon, Tue, etc.) |