Zum Inhalt springen
UI Kit
Accent

Calendar

Monat, Woche und Tag, Buchung mit Zeitfenstern und eine Datumsauswahl. Wochen beginnen auf Deutsch am Montag.

5 Variants
Kategorie wechseln

Kalender

Monat

Termine in den Zellen mit Zeit und Farbe. Telefone bekommen einen kompakten Monat mit Punkten und den Tag als Liste.

Wochenplan

Ein Zeitraster mit Ganztagszeile und Jetzt-Linie. Telefone wählen den Tag aus einer Leiste.

Tagesagenda

Ein Tag als Liste mit freien Lücken, Jetzt-Markierung und einem kleinen Monat zum Springen.

Terminbuchung

Termindetails, freie Tage und Zeitfenster, danach eine Bestätigung. Telefone gehen Schritt für Schritt.

Mini-Kalender und Zeitraum

Zwei Monate mit Zeitraum-Vorschau beim Überfahren, Schnellauswahl und Zusammenfassung. Pfeiltasten wandern durch die Tage.

Details

Was Kalender mitbringt, aus Registry und Quellcode gelesen.

Bereich
App
Variants
5
Version
1.0.2 · seit 1.0.0
Datei
components/ui/calendar.tsx
Bringt mit
utilskitbuttonicon
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 37 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle CalendarProps aus components/ui/calendar.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    CalendarVariant

    monthweekday-agendabooking-slotsmini-calendar

  • todayPflicht
    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

Eingebaute Texte

Diese Texte schreibt Kalender selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 37 Texte anzeigen
prevEnglisch PreviousDeutsch Zurück
spanEnglisch {a} to {b}Deutsch {a} bis {b}
nextEnglisch NextDeutsch Weiter
todayEnglisch TodayDeutsch Heute
monthEnglisch MonthDeutsch Monat
weekEnglisch WeekDeutsch Woche
dayEnglisch DayDeutsch Tag
newEventEnglisch New eventDeutsch Neuer Termin
moreEnglisch +{n} moreDeutsch +{n} weitere
allDayEnglisch All dayDeutsch Ganztägig
noEventsEnglisch Nothing planned. A good day for deep work.Deutsch Nichts geplant. Ein guter Tag für konzentrierte Arbeit.
eventsEnglisch {n} eventsDeutsch {n} Termine
freeEnglisch FreeDeutsch Frei
nowEnglisch NowDeutsch Jetzt
viewEnglisch ViewDeutsch Ansicht
minutesEnglisch {n} minDeutsch {n} Min.
pickDayEnglisch Pick a dayDeutsch Tag wählen
pickTimeEnglisch Pick a timeDeutsch Uhrzeit wählen
noSlotsEnglisch No free times on this day.Deutsch An diesem Tag ist nichts mehr frei.
confirmEnglisch ConfirmDeutsch Bestätigen
backEnglisch BackDeutsch Zurück
bookedEnglisch You are bookedDeutsch Dein Termin steht
bookedTextEnglisch A calendar invite is on its way to your inbox.Deutsch Eine Kalendereinladung ist unterwegs in dein Postfach.
timezoneEnglisch Time zoneDeutsch Zeitzone
withEnglisch withDeutsch mit
applyEnglisch ApplyDeutsch Übernehmen
clearEnglisch ClearDeutsch Leeren
presetsEnglisch Quick picksDeutsch Schnellauswahl
thisWeekEnglisch This weekDeutsch Diese Woche
next7Englisch Next 7 daysDeutsch Nächste 7 Tage
thisMonthEnglisch This monthDeutsch Dieser Monat
next30Englisch Next 30 daysDeutsch Nächste 30 Tage
selectedEnglisch SelectedDeutsch Ausgewählt
nightsEnglisch {n} daysDeutsch {n} Tage
pickEndEnglisch Now pick the end dateDeutsch Jetzt das Enddatum wählen
unavailableEnglisch unavailableDeutsch nicht verfügbar
hasEventsEnglisch has eventsDeutsch mit Terminen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Kalender reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende, Bild hoch, Bild runter und Leertaste.
  • Setzt aria-checked, aria-current, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen columnheader, grid, gridcell, group, radio, radiogroup, row, status, tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 6 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kalender?

Mit aiw add @ai-website/calendar. Der Befehl legt die Datei components/ui/calendar.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Kalender?

5 Varianten, Monat, Wochenplan, Tagesagenda, Terminbuchung und Mini-Kalender und Zeitraum. Du wählst sie mit der Prop variant, zum Beispiel variant="week".

Kann ich die Texte von Kalender übersetzen?

Ja. Kalender bringt 37 eigene Texte auf Deutsch und Englisch mit, etwa „Zurück“, „Weiter“ und „Heute“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kalender einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kalender mit aiw_components und installieren sie mit aiw_add @ai-website/calendar. Nenn im Prompt die Variante, etwa variant="month", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus App, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Calendar stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert