Calendar
A powerful and fully-featured calendar component with event management, multiple views, recurring events, and rich customization options.
Pro features
What the Pro version adds to this component.
Multiple Views
Month, week, day and agenda views with a built-in switcher (or control it with view / onViewChange). A year view is not available yet
Recurring Events
Daily, weekly, monthly and yearly repeats with interval, weekday sets and an end date; exported to .ics as RRULE
Token-Based Theming
Styled entirely with your design tokens — light and dark modes follow the host app automatically
Event Reminders
Attach reminder metadata to events and surface it in the grid and to screen readers
Drag & Drop
Move events with mouse, touch or keyboard in month, week, day and agenda views
Internationalization
Month/weekday names and date formats follow `locale`; every UI string can be replaced through `labels`
Installation
Install via CLI
npx @moontra/moonui-cli add calendarUsage
Examples
Month View with Event Management
Full calendar with create, edit, delete, and drag & drop capabilities
Week View with Time Slots
Weekly calendar with hourly time slots; overlapping events are laid out side by side, all-day and multi-day events sit in a strip above the grid
Agenda View
Chronological list of the next 30 days; the sidebar search and category filter narrow it down
Recurring Events
Daily, weekly, monthly and yearly repeats with interval, daysOfWeek and endDate (single-occurrence exceptions are not supported)
Day View
Single-day timeline that lays out every event by its start and end time, with overlapping events in side-by-side columns
Localization and Regional Formats
Switch locale, first day of week, and clock format at runtime — the calendar's colors already follow your design tokens (including dark mode)
Controlled View and Translated UI
Drive the view from your own state (view + onViewChange), hide or keep the built-in view switcher, and translate UI text with labels — only the keys you pass are replaced
Event Reminders
Events that carry a reminder show a bell indicator, and the reminder lead time is announced to screen readers