Reservation Detail

Reservation card with a status pill, confirmation code, check-in/out split, party size, and total price.

Casa Mariposa · LisbonBooking #A-7812-55

Confirmed

Check-inJun 14 · After 16:00

Check-outJun 18 · Before 11:00

2 guests€736 · 4 nights

Import & use

import { Calendar21 } from "@/components/beste/piece/calendar21";

<Calendar21
  title="Casa Mariposa · Lisbon"
  confirmation="Booking #A-7812-55"
  partySize="2 guests"
  checkIn="Jun 14 · After 16:00"
  checkOut="Jun 18 · Before 11:00"
  total="€736 · 4 nights"
  status="confirmed"
/>

More Calendar pieces

View all Calendar

Meeting booked

Discovery call with Kestrel Labs

Thu, Apr 30 · 14:00 – 14:30Google Meet · meet.beste.co/kestrel3 invited

Booking Confirmed

Meeting-booked card with an emerald check header, when/where/guests rows, and add to calendar plus reschedule.

TodayThuApr 2314:00

Date Pill

Horizontal pill combining a relative label, weekday, mono date, and an optional time separated by thin rules.

12May· Monday

Month Pill

Compact month summary pill with today tile on the left, a dotted event indicator, and a plus button.

Today

Tue, 12 May

09:00New member intake

11:30Care plan review

14:00Billing sync

16:15Follow-up call

Daily Agenda Card

A day view listing time-stamped agenda rows, each with a colored marker and a truncating title.

Today · Thu 23 Apr

09:30

Design reviewFigma

11:00

1:1 with MiraMeet

14:30

Ship roomOffice · 4F

Day Agenda

Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.

Book a 30-minute callThursday, Apr 23 · Europe/Istanbul (UTC+3)

Booking Slots

Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.