NerdfishUI

Calendar

Calendar is a component that allows users to pick a date.

View on GitHub
June 2025
tsx
'use client'

import { Calendar } from '@nerdfish/ui'
import * as React from 'react'

export function CalendarExample() {
	const [date, setDate] = React.useState<Date | undefined>(new Date())
	const currentYear = new Date().getFullYear()

	return (
		<Calendar
			mode="single"
			selected={date}
			onSelect={setDate}
			className="shadow-outline rounded-container p-md"
			fromYear={currentYear - 10}
			toYear={currentYear + 10}
		/>
	)
}

Usage

tsx
import { Calendar } from '@nerdfish/ui'
tsx
const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
	<Calendar
		mode="single"
		selected={date}
		onSelect={setDate}
		className="rounded-container border"
	/>
)