Month calendar
ProA complete calendar app in the Arc shell. It has a month grid with event chips and N more, plus a docked day panel showing busy time, guests, video links and free gaps you can block as focus time. You can filter by calendar or text, drag to reschedule or plan across days, and use the invitations, upcoming and teammate views.
- The month view of a calendar or scheduling app
- Team or content calendars with categories and invitations
- Planning across many events, trips and multi-day launches
- Hour by hour scheduling, use week-calendar
- Picking one date in a form, use date-picker
- Project phases with dependencies, use gantt-timeline
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the month view of a scheduling or planning app. Load calendars and events from your API, persist new and deleted events through onEventCreate and onEventDelete, and keep the month in your URL with month and onMonthChange.
import { useState } from "react";import { MonthCalendar } from "@/components/arc/blocks/month-calendar/month-calendar"; export function CalendarPage({ events, calendars, people, user }) { const [month, setMonth] = useState("2026-11"); return ( <div style={{ height: "100dvh" }}> <MonthCalendar events={events} calendars={calendars} people={people} userId={user.id} month={month} onMonthChange={setMonth} today={new Date().toISOString().slice(0, 10)} onEventCreate={event => fetch("/api/events", { method: "POST", body: JSON.stringify(event) })} onEventChange={event => fetch(`/api/events/${event.id}`, { method: "PATCH", body: JSON.stringify(event) })} onEventDelete={event => fetch(`/api/events/${event.id}`, { method: "DELETE" })} /> </div> );}MonthCalendar
A complete calendar app screen in the Arc screen shell. The sidebar has Calendar, Upcoming and Invitations, My calendars (each calendar with its own icon in its colour, its count this month, a show or hide toggle and Only on hover), teammates' calendars and the account menu. The month packs multi-day events into lanes, shows timed events as chips and folds the rest into N more. A docked day panel shows the selected day as a strip of busy time, all day events, the schedule with guests and video links, and free gaps you can turn into focus time; events open details with replies, guests, notes, a copyable call link, a calendar picker and delete. Filter by calendar from the sidebar or by text from the header, drag chips to reschedule, drag across days to plan a span, and undo moves and deletes from the toast.
eventsCalendarEvent[]sample November 2026 eventsEvents with id, title, calendarId, start and optional inclusive end date. Optional: time and endTime (24 hour), location, attendees ({ id, status }), organizer, rsvp (yes, maybe, no, pending), video ({ provider: "zoom" | "meet", url }) and notes. Pending events show as outlined chips and appear under Invitations.calendarsCalendarSource[]Work, Launch, Personal, Travel, HolidaysCalendars with id, name, any CSS color and an optional icon (any lucide icon). The icon is drawn in the calendar's colour wherever its events appear; it defaults to a calendar glyph. The sample uses the --tone-* tokens.peopleCalendarPerson[]sample teamPeople referenced by attendees and organizers, with id, name, avatar and email. The first five teammates fill the sidebar.userIdstring"emma-collins"The signed in person in people. Their invites get an RSVP control and their name fills the account row.todaystring"2026-11-12"ISO date treated as today.monthstring–Controlled month as YYYY-MM. Pair with onMonthChange.defaultMonthstringtoday's monthMonth shown on mount when uncontrolled.onMonthChange(month: string) => void–Called when the month changes.weekStartsOn0 | 110 starts weeks on Sunday, 1 on Monday. The account menu can switch it.showWeekendsbooleantrueShows Saturday and Sunday columns. The account menu can switch it.localestring"en-US"Locale for month, weekday, date and time labels.onEventCreate(event: CalendarEvent) => void | Promise<void>–Persists a new event, including focus time blocked from the day panel. Throw an Error to keep the form open and show its message.onEventDelete(event: CalendarEvent) => void | Promise<void>–Deletes an event. Undo in the toast calls onEventCreate with the same event.onEventChange(event: CalendarEvent) => void–Called after an event is moved, answered or put on another calendar, with the updated event.classNamestring–Extra class on the root.- Arrow keys
- Move between days; crossing the month edge turns the month. The highlight lands at once.
- EnterorSpace
- Opens the focused day in the day panel.
- Page uporPage down
- Previous and next month.
- T
- Jumps to today.
- N
- New event on the selected day.
- /
- Focuses the event filter. Escape clears it.
- Alt+arrow keys
- Moves the focused event by a day or a week.
- DeleteorBackspace
- Deletes the focused event, with Undo in the toast.
- Escape
- Returns the panel from an event or the new event form to the day.
- ?
- Opens the keyboard shortcuts.
- ⌘K
- Searches the sidebar.
- The month is a grid of rows and cells; each day button is named with its full date, today, and its event count, with a roving tab index.
- Event chips are buttons named with title, dates, times and reply state; N more names how many events it reveals and on which day.
- Calendar filters in the sidebar are toggle buttons with aria-pressed and a named Only button; replies use Arc's segmented control and the calendar is Arc's select.
- Calendars are told apart by their icon and name, never by colour alone; pending events are outlined and declined events strike the title.
- Moves, deletes, replies and new events are announced through a polite live region and the toast.
- The month crossfades with a 12px shift in the direction you move, and the title crossfades with it.
- When events are added, moved, removed or filtered, chips glide to their new lanes on the smooth spring and dim or fade instead of jumping.
- The day panel crossfades between the day, an event and the new event form. Selecting another day updates the panel in place.
- Replies, buttons, inputs, the checkbox and the select are Arc components with their own motion; buttons press to 0.97 and sidebar hover fills are instant.
- Reduced motion removes shifts and glides and keeps the final states.
- From 1080px the day panel sits beside the month; below that it is a sheet.
- Below 900px the sidebar becomes a sheet opened from the menu button.
- Below 560px of page width the month shows dots and the day's events list under it, and both scroll together.
- Week layouts are memoized and recomputed only when events, filters, the week start or the month change.
- One ResizeObserver measures rows; chips animate position with transforms, and dragging updates only the ghost and the drop highlight.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose this for the main screen of a calendar, scheduling, booking or team planning app.
- The screen fills its container, so give the parent a height: the preview frame is 1440 by 900 and a page can use 100dvh.
- Store end dates inclusively. Timed events show as chips with the time in the calendar's colour; all day and multi-day events show as tinted bars.
- The day panel docks from 1080px of width; below that it opens as a sheet when you pick a day or an event.
- Lanes follow the real row height, so the grid adapts to any height. Below 560px of page width each day shows a small load meter (one tick per event, up to four) and the selected day's list sits below.
- The Google Meet mark is the Simple Icons (CC0) path and the Zoom mark follows its app icon; they are sample content, so swap in your own assets.
The full library index for assistants is at /llms.txt.