MeldUI

Calendar

A date picker calendar for selecting individual dates.

Usage

Month & Year Picker

Use layout="month-and-year" for a compact month/year selection mode.

Props

PropTypeDefaultDescription
layout'month-and-year' | 'month-only' | 'year-only'-The calendar picker layout mode.

Sub-components

CalendarHeader

Navigation header with month/year and prev/next buttons.

CalendarHeading

Displays the current month and year.

CalendarGrid

Grid container for calendar days.

CalendarGridHead

Header row with day-of-week labels.

CalendarGridBody

Body rows containing day cells.

CalendarGridRow

A single row in the calendar grid.

CalendarHeadCell

Day-of-week header cell (Mon, Tue, etc.).

CalendarCell

Container for a single day.

CalendarCellTrigger

Clickable day button within a cell.

CalendarPrevButton

Navigate to previous month.

CalendarNextButton

Navigate to next month.