NerdfishUI

Calendar

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

View on GitHub
Month:
Year:
SuMoTuWeThFrSa
'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-semi"
			fromYear={currentYear - 10}
			toYear={currentYear + 10}
		/>
	)
}

Usage

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


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