Calendar 23 block design & features
Calendar23 is a multi listing availability calendar built with shadcn/ui Avatar and Button. Each listing is a row with a name, size, and occupancy for the visible range, pinned to the left while four weeks of nights scroll horizontally. Stays appear as rounded bars that start and end mid cell, so a check-out and the next check-in can share a day, with the guest avatar, name, and night count inside.
Dragging across open nights selects a range and opens a footer with the night count, total before fees, and actions to block the dates or place a hold. Blocked nights are hatched and reopen with a click. Selecting a stay shows its dates and source, and either end of the bar can be dragged to change check-in or check-out, with overlapping changes rejected and flagged.
The look is airy and tactile, with pill shaped stays, small nightly rates in every open cell, and soft tints for each booking source. The mid cell bar placement and range selection make this a distinctive take on a resource timeline. Content-driven: it needs listing names, rates, and guest names.
On a narrow screen the listing column stays pinned while the nights scroll sideways.