Scrollable Calendar

ScrollableCalendar keeps the same booking rules as Calendar, but renders a virtualized multi-month timeline using react-window.

When to use it

This view is a better fit when users need to scan a longer planning window:

• long-stay or seasonal booking flows
• availability search results
• dashboards where scrolling through months is faster than paging

Scrollable calendar

Use the virtualized view for long availability timelines while keeping selection logic identical.

Live example

Loading interactive preview...

import { useState } from "react";
import { ScrollableCalendar } from "@demark-pro/react-booking-calendar";

export function AvailabilityTimeline() {
  const [selected, setSelected] = useState([null, null]);

  return (
    <div style={{ height: 360 }}>
      <ScrollableCalendar
        startMonth={new Date()}
        monthsCount={6}
        colHeight={56}
        initialScroll={new Date(Date.now() + 1000 * 60 * 60 * 24 * 28)}
        selected={selected}
        reserved={reserved}
        onChange={setSelected}
      />
    </div>
  );
}

Required layout rule

The component relies on an auto-sized grid, so the parent container needs a real height.

<div style={{ height: 360 }}>
  <ScrollableCalendar
    startMonth={new Date()}
    monthsCount={6}
    colHeight={56}
  />
</div>

Key props

• startMonth: first month in the virtualized list
• monthsCount: how many months to render into the timeline
• colHeight: row height in pixels
• initialScroll: date used for the initial scroll offset
• onScroll: low-level scroll callback from react-window

Notes

• Reservation protection still uses the same selected, reserved, range, and onOverbook behavior.
• monthsCount controls how long the virtualized range is, not how many months are visibly mounted at once.
• initialScroll is best for landing closer to the date the user cares about.