Content & Dashboard
Calendar Month Grid
Month calendar grid with prev/next navigation, locale-aware weekday/month labels via Intl, and per-day event dots.
$ velocityx add calendar-month-grid
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Calendar Month Grid →
Needs a licence key —
subscribe here, then
velocityx loginonce.
October 2026
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| initialMonth | Date, default: today | No | new Date() | |
| events | Record<string, { id, label }[]> | No | {} | key = 'YYYY-MM-DD' |
| locale | string, | No | 'en-AU' | |
| onSelectDay | (date: Date) => void | Yes | ||
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/calendar-month-grid/CalendarMonthGrid.jsxUsing the Calendar Month Grid component
Install it with velocityx add calendar-month-grid.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Content & Dashboard.
Client-filtered blog index grid driven by a category pill row built from the posts data.
reactStyled pre/code block with a filename bar and a copy button with a real success state, no syntax highlighter bundled.
reactShare-to-platform link row (X, LinkedIn, Facebook, Email) plus a copy-link button with a real success state.
reactKPI tile with a trend arrow and a hand-drawn inline SVG sparkline computed from a numbers array, no chart library.
react