Skip to content
UI Kit
Accent color

Calendar

Month, week and day views, booking with time slots and a date picker. Weeks start on Monday in German.

5 variants
Switch category

Calendar

Month

Events in the cells with times and colors. Phones get a compact month with dots and the day as a list.

Week schedule

A time grid with all-day row and a now line. Phones pick a day from a strip.

Day agenda

One day as a list with free gaps, a now marker and a small month to jump.

Booking slots

Meeting details, free days and time slots, then a confirmation. Phones go step by step.

Mini calendar and range

Two months with a range preview on hover, quick picks and a summary. Arrow keys move through days.

Details

What Calendar brings along, read from the registry and the source.

Area
App
Variants
5
Version
1.0.2 · since 1.0.0
File
components/ui/calendar.tsx
Brings along
utilskitbuttonicon
npm packages
None
Languages
English and German, 37 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The CalendarProps interface from components/ui/calendar.tsx, with the comments from the code.

  • variantoptional
    CalendarVariant

    monthweekday-agendabooking-slotsmini-calendar

  • todayrequired
    string

    Today as YYYY-MM-DD. Pass it in, so server and browser agree.

  • nowoptional
    string

    The current time as HH:MM for the now line

  • eventsoptional
    CalendarEvent[]
  • hoursoptional
    [number, number]

    First hour and last hour of the week and day grid

  • bookingoptional
    { host: { name: string; role?: string }; title: string; duration: number; location: string; description?: string; /** Free times per day, e.g. { "2026-10-21": ["09:00", "09:30"] } */ slots: Record<string, string[]>; timezone?: string; }

    booking-slots

  • rangeoptional
    boolean

    mini-calendar: pick a range instead of a day

  • onSelectoptional
    (value: { start: string; end?: string; time?: string }) => void

Built-in texts

Calendar writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 37 texts
prevEnglish PreviousGerman Zurück
spanEnglish {a} to {b}German {a} bis {b}
nextEnglish NextGerman Weiter
todayEnglish TodayGerman Heute
monthEnglish MonthGerman Monat
weekEnglish WeekGerman Woche
dayEnglish DayGerman Tag
newEventEnglish New eventGerman Neuer Termin
moreEnglish +{n} moreGerman +{n} weitere
allDayEnglish All dayGerman Ganztägig
noEventsEnglish Nothing planned. A good day for deep work.German Nichts geplant. Ein guter Tag für konzentrierte Arbeit.
eventsEnglish {n} eventsGerman {n} Termine
freeEnglish FreeGerman Frei
nowEnglish NowGerman Jetzt
viewEnglish ViewGerman Ansicht
minutesEnglish {n} minGerman {n} Min.
pickDayEnglish Pick a dayGerman Tag wählen
pickTimeEnglish Pick a timeGerman Uhrzeit wählen
noSlotsEnglish No free times on this day.German An diesem Tag ist nichts mehr frei.
confirmEnglish ConfirmGerman Bestätigen
backEnglish BackGerman Zurück
bookedEnglish You are bookedGerman Dein Termin steht
bookedTextEnglish A calendar invite is on its way to your inbox.German Eine Kalendereinladung ist unterwegs in dein Postfach.
timezoneEnglish Time zoneGerman Zeitzone
withEnglish withGerman mit
applyEnglish ApplyGerman Übernehmen
clearEnglish ClearGerman Leeren
presetsEnglish Quick picksGerman Schnellauswahl
thisWeekEnglish This weekGerman Diese Woche
next7English Next 7 daysGerman Nächste 7 Tage
thisMonthEnglish This monthGerman Dieser Monat
next30English Next 30 daysGerman Nächste 30 Tage
selectedEnglish SelectedGerman Ausgewählt
nightsEnglish {n} daysGerman {n} Tage
pickEndEnglish Now pick the end dateGerman Jetzt das Enddatum wählen
unavailableEnglish unavailableGerman nicht verfügbar
hasEventsEnglish has eventsGerman mit Terminen

Accessibility

Read from the source of the component.

  • Calendar handles the keys Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Page up, Page down and Space itself.
  • Sets aria-checked, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles columnheader, grid, gridcell, group, radio, radiogroup, row, status, tab and tablist.
  • Announces changes through a live region without moving focus.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 6 places in the code switch motion off then.

Frequent questions

How do I install Calendar?

With aiw add @ai-website/calendar. The command puts components/ui/calendar.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Calendar have?

5 variants, Month, Week schedule, Day agenda, Booking slots and Mini calendar and range. You pick one with the variant prop, for example variant="week".

Can I translate the texts of Calendar?

Yes. Calendar carries 37 texts of its own in English and German, such as “Previous”, “Next” and “Today”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Calendar?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Calendar with aiw_components and install it with aiw_add @ai-website/calendar. Name the variant in your prompt, for example variant="month", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Calendar on a page.

Often searched

Jump to

Copied to the clipboard