Nightly Rate Calendar

Hotel5: Nightly Rate Calendar

An open rate calendar where every night shows its own price under the date, the cheapest nights of each month carry a small dot and full nights are struck through, with a footer that reads back the stay, sums the total and hands the dates to your booking engine.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/hotel5?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/hotel5?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hotel5.tsx plus the button22 sliding-marker pill used for the submit button, the text1 word stagger behind the heading, and the shadcn/ui calendar primitive whose day buttons are replaced to print each night's rate.

Quick start

The installed file exports hotel5Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Hotel5, hotel5Demo } from "@/components/beste/block/hotel5";

export default function Page() {
  return <Hotel5 {...hotel5Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hotel5 } from "@/components/beste/block/hotel5";

export default function Page() {
  return (
    <Hotel5
      eyebrow="Rates and dates"
      heading="Pick your nights. The price is the price."
      description="Every rate below is for the Sea Suite with breakfast. Choose an arrival, then a departure."
      months={[
        {
          month: "2027-06",
          rates: [440, 420, 400, 480, 480, null, null, 440, 460, 420, 520, 480, 420, 420, 400, 400, 420, 480, null, null, 400, 420, 460, 420, 480, 520, 420, 460, 460, 400],
        },
      ]}
      currency="€"
      minNights={2}
      booking={{
        action: "https://booking.example.com/ostria",
        params: { checkIn: "checkin", checkOut: "checkout" },
        submitLabel: "Continue to booking",
      }}
      labels={{
        arrive: "Arrive",
        leave: "Leave",
        pick: "Choose a date",
        pickLeave: "Now choose when you leave",
        nights: { one: "night", other: "nights" },
        total: "total with breakfast",
        lowest: "Lowest rate this month",
        soldOut: "Full",
        minStay: "Two nights at least",
      }}
    />
  );
}

Props

type RateMonth = {
  month: string; // "YYYY-MM"
  rates: (number | null)[]; // index 0 is the 1st; null is a full night
};

type Booking = {
  action: string;
  params?: { checkIn?: string; checkOut?: string };
  submitLabel: string;
};

type Labels = {
  arrive?: string;
  leave?: string;
  pick?: string;
  pickLeave?: string;
  nights?: { one: string; other: string };
  total?: string;
  lowest?: string;
  soldOut?: string;
  minStay?: string;
};

Behavior notes

• The calendar is bounded to the first and last entry in months. Days without an entry are disabled, a null rate marks a full night (struck through, showing labels.soldOut), and every night whose rate equals the lowest open rate of its month gets a dot, explained by labels.lowest above the grid.
• It shows two months side by side from the medium breakpoint and one below it, with larger day cells on wider screens.
• The first click sets the arrival (full nights cannot be an arrival). A second click later than it sets the departure only if every night in between has a rate; otherwise that day becomes the new arrival. Clicking again after a full range starts over.
• The total adds up each night's own rate, from the arrival up to the night before departure. A polite live region shows the arrival, departure, and the night count with the total, or labels.minStay while the stay is shorter than minNights.
• The form submits with GET to booking.action. Hidden inputs named by params.checkIn and params.checkOut (default checkin and checkout) carry local YYYY-MM-DD dates, and the submit button stays disabled until a departure is picked and the minimum is met.
• The heading block and calendar fade up as they enter the viewport (once). Reduced motion skips the entrances.