Calendar (month view)

Status: ✅ Implemented

Intent

Show dated items — a team schedule, a content plan, bookings — on a familiar month grid, so when things happen reads at a glance and clustering is visible.

Solution

Use the Calendar component: month is any LocalDate in the month to display (the grid is derived from it), and each CalendarEvent is placed on its date as a small chip. A chip carries an optional accent color and an optional actionId that makes it clickable (dispatches the standard action-requested event).

@Section("March 2026")
Component calendar = Calendar.builder()
        .month(LocalDate.of(2026, 3, 1))
        .events(List.of(
                CalendarEvent.builder().title("Sprint planning")
                        .date(LocalDate.of(2026, 3, 2)).color("#3b82f6").build(),
                CalendarEvent.builder().title("Release 3.1")
                        .date(LocalDate.of(2026, 3, 13)).color("#10b981")
                        .actionId("openRelease").build()))
        .build();

The renderer is dependency-free (a Monday-first CSS grid), themes through the standard CSS variables, marks today, and works in dark mode. On mobile (React Native) and in the IntelliJ plugin the same events render as an agenda list (sorted by date) — the natural narrow-viewport adaptation.

Calendar page (the RDS template)

The CalendarPage archetype turns the component into the full Redwood Calendar page template: a calendar toolbar — previous/next month chevrons, a Today button and an optional primary + Create button — over the month grid. Month navigation re-runs events(month) with the newly displayed month (so events can be fetched per month), and clicking an event runs actionOn(event).

@UI("/calendar-demo")
@Title("Housekeeping calendar")
public class HousekeepingCalendar extends CalendarPage {

    @Override
    protected List<CalendarEvent> events(LocalDate month, HttpRequest httpRequest) {
        return myEventsOf(month);                 // your use case / repository, per month
    }
    @Override
    protected Object actionOn(CalendarEvent event, HttpRequest httpRequest) {
        return URI.create("/bookings/" + event.id());
    }
    @Override protected boolean showCreate() { return true; }
    @Override protected Object createAction(HttpRequest httpRequest) {
        return URI.create("/todo-list-demo");
    }
}

• initialMonth() defaults to the current month; the displayed month is page state, so ‹ / › and Today round-trip through the backend and re-fetch.
• The week/day/list views of the RDS template are not built in yet — the underlying component is a month grid.
• Works on every renderer and on the .NET (CalendarPage) and Python (CalendarPage) backends — see the parity matrix.

Redwood parameter and slot reference

What the Redwood calendar template exposes, and what Mateu gives you for it. This is the template with the largest open surface of the set — the underlying component is a month grid. The canonical page-header elements shared by every template are documented once in Page templates.

Legend: ✅ supported · 🟡 partial · — not supported · ⚪ deliberately out of scope

Redwood prop / slot	Mateu
calendarEvents	events(LocalDate month, HttpRequest) — fetched per displayed month, server-side	✅
Month navigation	‹ / › / Today round-trip through the backend; initialMonth() sets the start	✅
displayOptions.createEvent / createEventLabel	showCreate() + createAction(HttpRequest)	✅
Event click	actionOn(CalendarEvent, HttpRequest) — return a URI to navigate	✅
selectedViewValue + displayOptions {monthView, weekView, dayView, listView}	— month only; on narrow viewports (React Native, IntelliJ) the same events render as an agenda list	—
displayOptions.firstDayOfWeek	— the grid is Monday-first	—
displayOptions {eventCounter, eventSortCriteria, eventDetailMode}	—	—
calendarProviders[] + visibleCalendars[] (multi-calendar)	— one event source per page	—
selectionMode: none | single | multiple	events are actionable, not selectable	🟡
readonly	the calendar is read-only by design; pair it with a form to create or move events	⚪
emptyState {primaryText}	—	—
eventDetailActions[]	a single actionOn per event	🟡
Slots eventTemplate / tooltipTemplate / eventDetailTemplate	— events render as chips with an optional accent color; the chip shape is not overridable	—
spCalendarEventCreate / Update / DetailAction	createCalendarEvent / openCalendarEvent cover create and open; there is no update event	🟡

When to use it

Use a Calendar to show dated events on a month for scanning and light interaction (click an event to drill in). It is read-only by design; for scheduling/drag-to-create, pair it with a form that creates or moves events and re-renders. Demo: /calendar-demo.