Calendar is Ant Design's Calendar, installed into your project as a file you own. It takes the same props, merges className through cn and forwards a ref ({ nativeElement }).
Its prop type is read off the component, so the file does not import dayjs. The dates you pass in and get back are still dayjs objects. If dayjs is not in your own dependencies, importing it fails under pnpm, so derive the date type the same way.
Install
npx antuikit@latest init
npx antuikit@latest add calendar
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/calendar, not from antd. The file lives in your project once installed.
import { Calendar } from "@/components/ui/calendar"
The axes
mode is the one prop with named values.
month (the default) shows six weeks, so the first and last rows carry days from the months around it. year shows twelve months.
It picks the grid, not the value. Left alone, the header's Month and Year switch drives it. Pass mode and you control it, so set it back from onPanelChange.
Size is the fullscreen boolean below. There is no size prop.
Flags
fullscreen (default true) is the full-page form, with a content slot under every date. Set fullscreen={false} inside a card. The compact one fills the width you give it.
showWeek (default false) adds a week-number column at either size, numbered by the locale's week rules.
Slots
Three render props take your markup. Reach for them before a descendant selector.
cellRender(date, info) adds content below the date the cell already shows. Return null for cells you skip. Returning info.originNode draws the date twice.
fullCellRender(date, info) replaces the whole cell and wins over cellRender. Draw the date yourself, and return info.originNode for cells you skip.
headerRender({ value, type, onChange, onTypeChange }) replaces the whole toolbar, and is the way to add previous and next buttons. A move through its onChange reaches onSelect with source: "customize".
Both cell renderers get info.type, either "date" or "month". They replace the deprecated dateCellRender, dateFullCellRender, monthCellRender and monthFullCellRender, which still work and warn.
Events
onSelect fires for a click on a day and for a year or month picked in the header. info.source says which.
onChange fires when the value changes, and skips a click on the day already selected.
onPanelChange fires when the month shown or the mode changes.
disabledDate returns true for days that cannot be picked.
Styling
classNames and styles take six keys: root, header, body, content (the table), item (a day cell) and itemContent. styles also takes a function of { props }, to style the full and compact forms differently.
For anything finer, the classes start with ant-picker-calendar and ant-picker-cell, not ant-calendar.
API Reference
Calendar
Calendar's props. Rows marked antuikit in the Version column are added by the kit.