Calendar

Usage

import { Calendar } from "@tulip-systems/ui/calendar";

const [date, setDate] = React.useState<Date | undefined>(new Date());

return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-lg border" />;

Selected Date (With TimeZone)

The Calendar component accepts a timeZone prop to ensure dates are displayed and selected in the user's local timezone.

Note: If you notice a selected date offset, make sure the timeZone prop is set to the user's local timezone.

Examples

Basic

A basic calendar component. We used className="rounded-lg border" to style the calendar.

Range Calendar

Use the mode="range" prop to enable range selection.

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

Presets

Date and Time Picker

Booked dates

Week Numbers

Use showWeekNumber to show week numbers.