Event Calendar

Get Ritla UI

A whole month with its events as colour chips, or a list of what's coming grouped by day.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add event-calendar
Also works with shadcn: npx shadcn@latest add @ritla/event-calendar
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

event-calendar.tsx

import { EventCalendar } from "@/components/ui/event-calendar";<EventCalendar  events={[{ id: "rent", date: "2026-09-01", title: "Rent due", tone: "warning" }]}  actions={<Button size="sm">Add event</Button>}/>

Examples

Agenda

Upcoming items grouped by day, with a colour bar and an amount at the end.

EnglishMirroredArabic

Get the code

LTR →

API reference

EventCalendar

Prop	Type	Default	Description
`events`	`CalendarEvent[]`	None	The events: `id`, `date` as `YYYY-MM-DD`, `title` and `tone`.
`month / defaultMonth`	`Date`	None	The shown month, controlled or initial.
`onMonthChange`	`(month: Date) => void`	None	When another month is shown.
`today`	`Date`	`new Date()`	The day in the brand circle.
`weekStartsOn`	`number`	`0`	The first weekday: 0 Sunday as in Figma, 6 Saturday.
`actions`	`ReactNode`	None	At the end of the title row: the view switcher and Add event.
`onEventClick`	`(event: CalendarEvent) => void`	None	Makes each chip a button.
`maxEvents`	`number`	`3`	Chips per day before +N more.

CalendarEvent.tone

Prop	Type	Default	Description
`tone`	`"brand" \| "warning" \| "success" \| "danger" \| "neutral"`	`"brand"`	`_Event chip` Tone.

EventAgenda

Prop	Type	Default	Description
`heading`	`ReactNode`	None	The heading, such as Upcoming.
`description`	`ReactNode`	None	The supporting text.
`events`	`AgendaEvent[]`	None	Events with `time`, `kind`, `amount` and `amountTone`.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves through Previous, Next and Today, then the events when they are buttons.

ARIA

The grid is a table named by the month, with full weekday names in each header's abbr.
Each day reads its full date, and today is aria-current="date".
On a phone the chips become dots, and each title stays as text for screen readers.
The month name is announced when it changes.

Arabic and RTL notes

Mirrors

The week starts on the right in Arabic, and Previous and Next flip.
The agenda's colour bar starts the row and the amount ends it.

Does not mirror

Weeks still run top to bottom.

Numerals: Day numbers and the month follow the RitlaProvider numerals setting.
Arabic typography: Short Arabic weekdays drop the article («أحد», «اثنين») to fit the column.
Mixed-direction text: Event titles are dir="auto", and amounts are isolated.