Calendar

Low-level, single-month day grid. Renders weekday labels and day cells for one month, driven by a datepicker state object.

When to use

Calendar is the raw building block underneath the pickers — it renders a month grid but has no popover, no month/year navigation and no input field. Reach for a higher-level component instead unless you are assembling a custom calendar UI:

• Standalone popover calendar: DatePicker / DateRangePicker.
• Input field with a calendar popover: DatePickerInput / DateRangePickerInput.

It has no @uxf/form twin. Selection state is not owned by Calendar; it is produced by the useDatePicker / useDateRangePicker hooks from @uxf/datepicker and passed in via datePickerProps.

Usage

"use client";

import { useDatePicker } from "@uxf/datepicker/hooks/use-date-picker";
import { Calendar } from "@uxf/ui/calendar";
import React, { useState } from "react";

export function MonthCalendar() {
    const [date, setDate] = useState<Date | null>(null);

    const datePickerProps = useDatePicker({
        firstDayOfWeek: 1,
        onDateChange: setDate,
        selectedDate: date,
    });

    return <Calendar datePickerProps={datePickerProps} />;
}

The exported CalendarNavigation is a presentational month/year/prev/next button bar for building your own navigation; wire each button through its *ButtonProps:

import { CalendarNavigation } from "@uxf/ui/calendar";

<CalendarNavigation
    monthButtonProps={{ children: "June", onClick: openMonthView }}
    nextButtonProps={{ onClick: goToNextMonth }}
    prevButtonProps={{ onClick: goToPrevMonth }}
    yearButtonProps={{ children: "2026", onClick: openYearView }}
/>;

Props

Calendar (CalendarProps)

onChange and selectedDate also exist on CalendarProps, but the current component does not read them — selection flows entirely through datePickerProps. Do not rely on them.

CalendarNavigation (CalendarNavigationProps)

All four props are required and take ButtonProps. The bar renders a month button and a year button (each with a caret-down icon), plus previous/next icon buttons.

Requirements

Client component ("use client"). Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/calendar.css");

CalendarNavigation additionally renders Button and Icon, so include their stylesheets when you use it:

@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.