+
+ {/* 6-row × 7-col date grid — clamp keeps rows between 100px and 175px based on viewport */}
+
+ {cells.map((day, idx) => {
+ const dateKey = day.format("YYYY-MM-DD");
+ const dayBookings = bookingsByDate.get(dateKey) ?? [];
+ const isCurrentMonth = day.month() === currentMonth.month();
+ const isToday = day.isSame(today, "day");
+ const isLastRow = idx >= 35;
+
+ return (
+
+ {/* Date number */}
+
+
+ {day.date()}
+
+
+
+ {/* Booking chips */}
+
+ {dayBookings.slice(0, MAX_VISIBLE_CHIPS).map((booking) => {
+ const status = booking.status as BookingStatus;
+ const dotColor = STATUS_COLOR_CLASSES[status] ?? "bg-emphasis";
+ const chipClass = STATUS_CHIP_CLASSES[status] ?? "text-emphasis hover:opacity-80";
+
+ return (
+
+ );
+ })}
+
+ {dayBookings.length > MAX_VISIBLE_CHIPS && (
+
+ +{dayBookings.length - MAX_VISIBLE_CHIPS} {t("more")}
+
+ )}
+
+
+ );
+ })}
+