Calendar - Month Views

These blocks show dates and events in a month. Most of them draw their own grid from plain date math, so you can see how it works and change it, and one uses the UiCalendar component for a picker with dots. All of them take a today prop, so the demos stay stable and you can pass the real date in your own app, and a typed events prop with fictional data.

Days are real buttons with an accessible label that includes the date and the number of events, and the selected day uses aria-pressed. The compact calendar also supports the arrow keys, with a roving tabindex. The year overview and the widget are visual summaries that add screen reader text to days with events. Dates are handled as ISO strings in UTC to avoid time zone surprises.

Style One

Full month grid with previous, next and today buttons, color coded event chips with a plus more link, selectable days and a list of the selected day's events.

Style Two

Mini calendar with dots on days that have events. Pick a day to see its agenda with time, place and attendees.

Style Three

Compact month with event dots, a stronger tint for busy days, arrow key navigation and a list for the selected day.

Style Four

Multi day events drawn as bars that span the week rows and continue over week breaks, with rounded ends only where an event starts and finishes, plus an accessible list of events.

Style Five

Year overview with twelve mini months, event days marked, event counts per month and a panel that lists the events of the month you pick.

Style Six

Compact calendar widget in a card with a mini month and the next three events with relative day labels.