+ {/* Sticky header: month/day labels */}
+
+ {/* Corner */}
+
+ 予約一覧
+
+ {/* Day columns */}
+ {days.map((date) => {
+ const ds = dateToStr(date);
+ const isToday = ds === todayStr;
+ const dow = format(date, 'E', { locale: ja });
+ const isWeekend = dow === '土' || dow === '日';
+ const isSun = dow === '日';
+ const isSat = dow === '土';
+ return (
+
+ {format(date, 'd')}
+ {dow}
+
+ );
+ })}
+
+
+ {/* Reservation rows */}
+ {visibleReservations.map((r) => {
+ const car = cars.find((c) => c.id === r.car_id);
+ const color = carColorMap[r.car_id] || COLORS[0];
+ const { left, width } = getBarLayout(r);
+
+ return (
+
+ {/* Label: car + customer */}
+
+
+
+ {car?.name ?? '—'}
+ {r.customer_name || '(名前なし)'}
+
+
+
+ {/* Day cells (background) */}
+
+ {days.map((date) => {
+ const ds = dateToStr(date);
+ const isToday = ds === todayStr;
+ const dow = format(date, 'E', { locale: ja });
+ const isWeekend = dow === '土' || dow === '日';
+ return (
+
+ );
+ })}
+
+ {/* Bar */}
+
setModal({ mode: 'edit', reservation: r })}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setContextMenu({ x: e.clientX, y: e.clientY, reservation: r });
+ }}
+ title={`${r.customer_name || '予約'}\n${r.start_date} 〜 ${r.end_date}${r.notes ? '\n' + r.notes : ''}`}
+ >
+
+ {r.customer_name || '予約'}
+
+ {width > 80 && (
+
+ {r.start_date.slice(5)} 〜 {r.end_date.slice(5)}
+
+ )}
+
+
+
+ );
+ })}
+
+ {visibleReservations.length === 0 && !loading && (
+
+ この月には予約がありません。
+
+ )}
+