Photonix UI - React Components, Templates & Figma Design System

Calendar

Standalone calendar component for date selection.

Preview

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Usage

import { Calendar } from '@photonix/ultimate';
import { useState } from 'react';

const [date, setDate] = useState(new Date());
const [month, setMonth] = useState(new Date());

<Calendar 
  month={month} 
  onMonthChange={setMonth}
  selectedDate={date} 
  onDayClick={setDate} 
/>

Component API

Calendar

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.)

Calendar

Preview

Component API

Calendar

On this page