golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rental calendar cells cap at 3 bookings + show +N overflow

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-21 23:08:25 +03:00
parent db05898c08
commit f21c5d5054
1 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/calendar/BookingCalendar.tsx
View File

@@ -694,24 +694,31 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
Весь день Весь день
</div> </div>
) : dayBookings.length > 0 ? ( ) : dayBookings.length > 0 ? (
/* Hourly bookings — squares + times */ /* Timed bookings — dot + compact time, max 3 visible */
<div className="absolute inset-x-1 top-1.5 flex flex-col gap-0.5"> (() => {
{/* One colored dot per booking + its time */}
{dayBookings.map(b => {
const fmtT = (min: number) => { const fmtT = (min: number) => {
const h = Math.floor(min / 60), m = min % 60 const h = Math.floor(min / 60), m = min % 60
return m === 0 ? `${h}` : `${h}:${String(m).padStart(2, '0')}` return m === 0 ? `${h}` : `${h}:${String(m).padStart(2, '0')}`
} }
const visible = dayBookings.slice(0, 3)
const extra = dayBookings.length - visible.length
return ( return (
<div key={b.id} className="flex items-center gap-0.5"> <div className="absolute inset-x-1 top-1 flex flex-col gap-px overflow-hidden" style={{ maxHeight: rentalRowH - 6 }}>
<div className={cn('w-2.5 h-2.5 rounded-[3px] shrink-0', obj.color)} /> {visible.map(b => (
<div key={b.id} className="flex items-center gap-0.5 min-w-0"
title={`${b.guestName} · ${fmtT(b.startHour)}–${fmtT(b.endHour)}`}>
<div className={cn('w-2 h-2 rounded-[2px] shrink-0', obj.color)} />
<span className="text-[9px] text-slate-700 dark:text-slate-200 font-medium leading-none truncate"> <span className="text-[9px] text-slate-700 dark:text-slate-200 font-medium leading-none truncate">
{fmtT(b.startHour)}–{fmtT(b.endHour)} {fmtT(b.startHour)}–{fmtT(b.endHour)}
</span> </span>
</div> </div>
) ))}
})} {extra > 0 && (
<span className="text-[9px] text-slate-400 leading-none pl-2.5">+{extra}</span>
)}
</div> </div>
)
})()
) : ( ) : (
/* Empty — show "+" hint on hover */ /* Empty — show "+" hint on hover */
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity"> <div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">