BuildCalendar
v1.0.11Updated 27 Aug 2026Month / week / day calendar with event chips and drag-to-create. Use when users need to see and schedule events on a grid.
Preview
Live · 14 stories▸Why this is recommendedcalendareventsschedulemonth+7
A polished showcase bringing several BuildCalendar variations together — beautiful.
- ✓Scheduling surfaces
- ✓Booking calendars
- ✓Editorial / publishing calendars
- Month / week / day views
- Multi-day event spanning (an event with `end` appears on every intersecting day)
- Event chips with colour by category
- Drag-to-create new event
- Click event to open detail
- Today highlight + weekend tint
- All-day vs timed events
- Read-only friendly: create affordances render only when onCreateEvent is provided
- i18n (FB-18): labels prop overrides every built-in string; LocaleProvider drives localized month/weekday names, Buddhist-calendar headers and weekStartsOn (0 Sunday / 1 Monday, default Monday)
- ✕Single-date picker (use Calendar primitive)
- ✕Activity log (use Timeline)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
eventsEvents to render
yesviewActive view
—onEventClickEvent click handler
—onCreateEventCreate handler — the toolbar's New event button and the cell + affordances render only when this is set (omit for derived/read-only calendars)
—labelsOverride any subset of the built-in UI strings (today, previous/next aria, day/week/month tabs, newEvent, myCalendars, addEvent, moreEvents '+{count} more', showAllEvents). English defaults ship as DEFAULT_BUILD_CALENDAR_LABELS. Month/weekday names and header dates are NOT labels — wrap the app in LocaleProvider ({ locale, calendar: 'buddhist', weekStartsOn }) instead
—