A month/year date picker that pairs the @calendarjs/ce day grid with a full Pindoba chrome: prev/next buttons, a view-toggle label, and a Today/Clear footer. Pindoba drives navigation through the library’s programmatic control API (prev(), next(), setView(), setValue(), reset()), so the header and footer are real Pindoba buttons, not reskinned library chrome. The surface (background, border, radius, shadow, padding) delegates to Panel, so the same design tokens and variants apply here.
Calendar.js is rendered entirely on the client — on Astro the widget hydrates via a <script> tag, on Svelte it mounts inside an {@attach} attachment.
---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md" })}>
<Calendar id="astro-demo-calendar-default" />
</div>Set options.range to true to let users pick a start and end date.
---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md" })}>
<Calendar
id="astro-demo-calendar-range"
showReset
options={{ range: true }}
/>
</div>Pass views to choose which view tabs are available. The lowest-granularity entry is the leaf view — clicking a cell at the leaf emits a selection (first-of-clicked-month for a months leaf).
A lone month or year is select-box business, not calendar business — passing views={['months']} or views={['years']} is auto-promoted to ['months', 'years'] so the picker always produces a real year-and-month value. Use a Select for plain “pick a month” or “pick a year” interactions.
---
import Calendar from "../calendar.astro";
import { stack } from "@pindoba/styled-system/patterns";
---
<div class={stack({ gap: "md" })}>
<Calendar
id="astro-demo-calendar-month-year"
showReset
views={["months", "years"]}
/>
</div>| prop | type | default | req | description |
|---|---|---|---|---|
| options | CalendarJsOptions | {} | Calendar.js configuration object — events, views, translations, toolbar settings, etc. Forwarded verbatim to the underlying library. See calendar-js.com for the full surface. | |
| size | "xs""sm""md""lg" | "md" | Visual size variant — controls font size and minimum height. | |
| showControls | boolean | true | Render the Pindoba header (prev, month/year label, next). Set to false to hide and drive navigation entirely from the instance API. | |
| showFooter | boolean | true | Render the Today / Clear footer buttons. | |
| locale | string | undefined | BCP 47 locale tag used to format the month/year label in the header. | |
| initialDate | Date | new Date() | Initial display date for the header label. Does not select the date — use options.value for that. | |
| views | ("days" | "months" | "years")[] | ["days", "months", "years"] | Which views the user can navigate between. The lowest-granularity entry (days < months < years) becomes the leaf — clicking a cell at the leaf emits a selection (first-of-month for `months`, January 1…
| |
| initialView | "days""months""years" | leaf view | Which view to show on mount. Falls back to the leaf view if the value isn't included in `views`. | |
| background | "surface.soft""surface.step.1""surface.step.2""surface.step.3""surface.deep""transparent" | "surface.soft" | Panel background token (inherited from Panel). | |
| feedback | "neutral""primary""success""warning""danger" | "neutral" | Color palette (inherited from Panel). | |
| padding | PanelPadding | "sm" | Panel padding token (inherited from Panel). | |
| radius | PanelRadius | "lg" | Panel radius token (inherited from Panel). | |
| border | "none""default""bold""muted""accent" | "default" | Panel border token (inherited from Panel). | |
| shadow | "none""xs""sm""md""lg""xl" | "none" | Panel shadow token (inherited from Panel). | |
| instance | CalendarJsInstancenull | null | Bindable reference to the underlying Calendar.js instance. Useful for imperatively calling methods like setEvents. Svelte only. | |
| passThrough | CalendarPassThrough | undefined | Escape hatch to inject styles or HTML attributes into the root container. |