Zum Inhalt springen
UI Kit
Accent

Appointments

Buchung in Schritten, Leistungen mit Dauer und Preis, Team mit freien Zeiten, Wochenansicht, Öffnungszeiten mit Notfall und Bestätigung.

6 Variants
Kategorie wechseln

Termine

Buchung in Schritten

Leistung, Person, Tag und Uhrzeit, Daten. Die Zusammenfassung wächst daneben mit.

Leistungen

Behandlungen in Gruppen mit Dauer und Preis. Mehrere wählen, eine Leiste rechnet mit.

Team mit freien Zeiten

Jede Person mit ihren Stärken und den nächsten freien Zeiten, mit einem Tipp gebucht.

Wochenansicht

Freie und belegte Zeiten einer ganzen Woche, auf dem Telefon Tag für Tag.

Öffnungszeiten und Notfall

Die Woche mit heute und Pausen, auf dem Telefon die Notfallkarte zuerst, Schließtage darunter.

Bestätigung

Der gebuchte Termin mit Kalenderdatei, Verschieben, Absagen und was mitzubringen ist.

Details

Was Termine mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
6
Version
1.0.0 · seit 1.0.0
Datei
components/ui/appointments.tsx
Bringt mit
utilskitbuttoniconsectionrevealinput
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 59 eigene Texte
Studio
Im Code anpassen
In Sammlungen
Arztpraxis
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    AppointmentsVariant

    stepperservicesteamweekhoursconfirmation

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • servicesoptional
    AppointmentService[]
  • peopleoptional
    AppointmentPerson[]
  • daysoptional
    AppointmentDay[]

    stepper and week: free times per day

  • hoursoptional
    AppointmentHours[]
  • emergencyoptional
    AppointmentEmergency
  • closuresoptional
    { label: string; text: string }[]

    hours: closed days ahead, e.g. [{ label: "24 to 31 Dec", text: "Holidays" }]

  • bookingoptional
    AppointmentBooking
  • mediaoptional
    React.ReactNode

    confirmation: a map or a picture of the place

  • currencyoptional
    string
  • onBookoptional
    (booking: { services: string[]; person?: string; date?: string; time?: string }) => void

Eingebaute Texte

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

Alle 59 Texte anzeigen
stepsEnglisch Service,Person,Date and time,Your detailsDeutsch Leistung,Person,Tag und Uhrzeit,Deine Daten
stepEnglisch Step {n} of {total}Deutsch Schritt {n} von {total}
backEnglisch BackDeutsch Zurück
nextEnglisch ContinueDeutsch Weiter
bookEnglisch Book appointmentDeutsch Termin buchen
anyoneEnglisch No preferenceDeutsch Egal wer
anyoneTextEnglisch The first free personDeutsch Die erste freie Person
pickDayEnglisch DayDeutsch Tag
pickTimeEnglisch TimeDeutsch Uhrzeit
noSlotsEnglisch Fully bookedDeutsch Ausgebucht
nameEnglisch NameDeutsch Name
phoneEnglisch PhoneDeutsch Telefon
emailEnglisch EmailDeutsch E-Mail
requiredEnglisch Please fill in this field.Deutsch Bitte fülle dieses Feld aus.
invalidEmailEnglisch Please enter a valid email address.Deutsch Bitte gib eine gültige E-Mail-Adresse ein.
summaryEnglisch Your appointmentDeutsch Dein Termin
nothingYetEnglisch Nothing chosen yetDeutsch Noch nichts gewählt
openEnglisch OpenDeutsch Offen
sureEnglisch Cancel this appointment? The time goes back to the calendar.Deutsch Diesen Termin absagen? Die Zeit geht zurück in den Kalender.
keepEnglisch Keep itDeutsch Behalten
confirmCancelEnglisch Yes, cancelDeutsch Ja, absagen
totalEnglisch TotalDeutsch Gesamt
bookedEnglisch See you soonDeutsch Bis bald
bookedTextEnglisch We sent the details to {email}. You can change the appointment up to 24 hours before.Deutsch Wir haben die Details an {email} geschickt. Ändern kannst du den Termin bis 24 Stunden vorher.
againEnglisch Book anotherDeutsch Weiteren Termin buchen
fromEnglisch fromDeutsch ab
popularEnglisch PopularDeutsch Beliebt
addEnglisch AddDeutsch Hinzufügen
addedEnglisch AddedDeutsch Gewählt
selectedEnglisch {n} selectedDeutsch {n} gewählt
chooseTimeEnglisch Choose a timeDeutsch Termin wählen
servicesEnglisch ServicesDeutsch Leistungen
nextFreeEnglisch Next freeDeutsch Nächster freier Termin
todayEnglisch TodayDeutsch Heute
tomorrowEnglisch TomorrowDeutsch Morgen
bookAtEnglisch Book at {time}Deutsch Für {time} buchen
fullEnglisch No free timesDeutsch Keine freien Zeiten
takenEnglisch takenDeutsch belegt
freeEnglisch {n} freeDeutsch {n} frei
weekEnglisch WeekDeutsch Woche
openNowEnglisch Open nowDeutsch Jetzt geöffnet
closedNowEnglisch Closed nowDeutsch Gerade geschlossen
closedEnglisch ClosedDeutsch Geschlossen
pauseEnglisch Break {from} to {to}Deutsch Pause {from} bis {to}
hoursEnglisch Opening hoursDeutsch Öffnungszeiten
callEnglisch Call {phone}Deutsch {phone} anrufen
referenceEnglisch Booking {ref}Deutsch Buchung {ref}
serviceEnglisch ServiceDeutsch Leistung
withEnglisch WithDeutsch Bei
whenEnglisch WhenDeutsch Wann
durationEnglisch DurationDeutsch Dauer
priceEnglisch PriceDeutsch Preis
whereEnglisch WhereDeutsch Wo
addCalendarEnglisch Add to calendarDeutsch Zum Kalender hinzufügen
rescheduleEnglisch Change timeDeutsch Termin verschieben
cancelEnglisch Cancel appointmentDeutsch Termin absagen
cancelledEnglisch The appointment is cancelled. We have let the team know.Deutsch Der Termin ist abgesagt. Das Team weiß Bescheid.
prepareEnglisch Before you comeDeutsch Bevor du kommst
payOnSiteEnglisch Pay on siteDeutsch Zahlung vor Ort

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Termine reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-controls, aria-current, aria-label, aria-labelledby, aria-live, aria-orientation, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen alertdialog, radio, radiogroup, status, tab, tablist und tabpanel.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • 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).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 9 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Termine?

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

Welche Varianten hat Termine?

6 Varianten, Buchung in Schritten, Leistungen, Team mit freien Zeiten, Wochenansicht, Öffnungszeiten und Notfall und Bestätigung. Du wählst sie mit der Prop variant, zum Beispiel variant="services".

Kann ich die Texte von Termine übersetzen?

Ja. Termine bringt 59 eigene Texte auf Deutsch und Englisch mit, etwa „Leistung,Person,Tag und Uhrzeit,Deine Daten“, „Zurück“ und „Weiter“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Termine einbauen?

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

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Appointments stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert