Mini Calendar Card

About this block

Mini Calendar Card is the compact month picker sized for a sidebar panel. June 2026 fills a tight 7-column grid with two-letter weekday headers (Su through Sa). Today, Jun 13, is highlighted with a filled foreground circle. Three dates carry a small dot indicator below their number: Jun 9, Jun 17, and Jun 24. Out-of-month days from May and July are rendered at reduced opacity. Prev and next chevron buttons sit beside the month label.

The grid is built from the same three-array stitch as the full month view, scaled down with size-7 day buttons and size-1 event dots. The invisible aria-hidden dot on empty days keeps the grid stable without conditional height shifts.

When to use

Reach for this block as the date-context widget that sits in a sidebar alongside the week agenda or event list. Wire the day button click to set the active date in your calendar state.

A natural flow around it on an Application Pro page:

Before

• App shell
• Navigation

After

• Week agenda
• Event list day

What you can display

One strong use is the date navigator beside a day or week view. Other mini calendar card uses:

• Date range picker. Two mini cards side by side, start and end date highlighted with a range fill.
• Deadline picker in a form. Inline inside a task creation form to select a due date.
• Heatmap variant. Day cell background intensity driven by event count instead of a dot.

Tip: the dot sits below the day number in its own flex row; using invisible instead of conditional rendering keeps every cell the same height.