Calendar
Month-grid date picker; the consumer owns the date math.
ui form
Preview
Installation
npx slintcn@latest add calendarUsage
import { Calendar } from "slintcn/components/calendar.slint";
Calendar {
month-label: "May 2026";
days-in-month: 31;
first-day-offset: 5; // 1 May 2026 = Friday
selected-day <=> day;
day-selected(d) => { day = d }
prev-month => { /* roll model back one month */ }
next-month => { /* roll model forward one month */ }
}Properties
month-label
in
string
Header text, e.g. "May 2026". The component does no date formatting.
days-in-month
in
int
Number of days in the displayed month — 28 / 29 / 30 / 31.
first-day-offset
in
int
Day-of-week of the first day of the month (0 = Sun, 6 = Sat). Leading empty cells render before day 1.
selected-day
in-out
int
Two-way; the selected day-of-month (1 … days-in-month), or -1 for none.
day-selected
callback
(int)
Fired when the user clicks a valid day cell.
prev-month
callback
()
Fired when the previous-month chevron is clicked.
next-month
callback
()
Fired when the next-month chevron is clicked.
API
Accessibility
focusablenoDependencies
Installed automatically as transitive dependencies of slintcn add calendar.