Holiday Let Template
A complete one-page site for a single holiday cottage or cabin, built around a draggable date-range availability calendar that refuses to span nights already taken and prices every night on its own season.
About This Template
A production-ready site for one owner-run holiday let, laid out as an almanac rather than a brochure.
Read the full template overview
The availability calendar sits directly under the hero, because the only question a visitor actually has is whether their weekend is free, and everything about the property unfolds beneath the answer.
The signature is that calendar: a real month grid you drag a date range across, where nights already booked are walls the drag will not cross, and where the nightly rate, the number of nights, the minimum-stay and changeover-day rules and a running total all update while you are still holding the mouse down. Rates are read per night from a season table, so a stay that crosses a month boundary is genuinely a sum rather than a multiplication. The whole thing is driven by two editable arrays at the top of the script.
The art direction runs on a mid-tone moss ground with oat paper and one rust accent, set in Petrona and Roboto Mono, and the photography is bundled as art-directed WebP derivatives baked to a muted warm grade.
What's Included
- Complete deployable one-page site: nav, hero, availability almanac, the property, a month-by-month year table, a full-bleed landscape band, practical details and footer
- Signature availability calendar: drag from the first night to the last and the range paints live, with prev and next month navigation across a rolling twelve months
- Booked nights are structurally impossible to span - the range walks out from your first night and stops at the wall, rather than being validated and rejected afterwards
- Per-night pricing from a season table, so a stay crossing a month boundary is charged correctly and the quote shows the range of rates it spans
- Live quote panel: arrival, departure, nights, rate band, nights total, cleaning fee and grand total, all updating during the drag
- Minimum-stay and changeover-day rules validated live, with a plain-English explanation and the enquiry button disabled until the dates are valid
- Full keyboard mirror of the drag: arrow keys move focus and repaint the same range, Enter sets the first and last night, Escape clears, and the clamp against a booked night is announced through a live region
- Touch support by design rather than by accident: tap the first night then the last, with vertical page scrolling left to the browser
- Availability and rates are two plainly commented arrays at the top of the script - no backend, no booking platform, no build step
- Degrades to a readable static month table with the taken nights marked when JavaScript is unavailable, and stays fully interactive under reduced motion
- Bundled cabin and landscape photography baked to a muted warm grade, around 675KB total
- Three-colour token block: change moss, oat and rust and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
Perfect For
- Single-property holiday lets, cabins, cottages and shepherd's huts
- Owner-run bed and breakfasts and guest annexes taking direct bookings
- Glamping pitches, lodges and treehouses that want to escape platform commission
- Studio, workshop, darkroom or rehearsal-room hire booked by the night or the day
- Any small business that needs to show what is free and what a stay would cost before a visitor gets in touch
How It Works
Structure and dates
One script initialises each section with a single setup and teardown path and one motion branch, keyed only on reduced motion so exactly one branch runs on every device, and every section is guarded so a buyer can delete any of them. The calendar's booked ranges are expanded once into a Set of date keys, and every date in the module is a Date anchored at local noon, which puts twelve hours of slack either side of every clock change so adding a day across a DST boundary can never land back on the same date.
Blocked nights
The refusal to span a booked night is not a validation step: reachFrom walks out from the anchor one night at a time and stops the moment the next night is taken, in the past or off the end of the diary, so an illegal range is never allowed to form in the first place. Pointer and keyboard both drive the same three functions - beginAt, previewTo and commitTo - so a mouse drag, a tap and a tap, and arrow keys with Enter cannot drift apart in behaviour; the keyboard additionally narrates the running range through a polite live region, and calls out the blocking night only the first time it is reached.
Data attributes, not classes
Cells are keyed entirely by data attributes rather than class names, because the demo build's class mangler can only rewrite a single plain class per quoted string and a calendar built from concatenated class names would ship dead.
Without JavaScript
The markup already contains the first two months as a plain table, so the page is a readable calendar with JavaScript off, and the script re-renders that same container rather than creating it. Under reduced motion the calendar stays fully interactive and only the movement around it is dropped, because it is a control and not decoration.
Questions about this template
Is this a real booking system?
No, and it is honest about that. Availability and rates are two commented arrays at the top of the script, with no backend and no platform behind them. It shows what is free and what a stay would cost, then hands the visitor to an enquiry. Keeping those arrays current is a manual job you need to be willing to do.
Can someone accidentally select nights that are already booked?
No, and not because it validates afterwards. The range walks out from your first night and stops dead at the first taken night, so an invalid range is structurally impossible to draw rather than being rejected once made. The clamp is announced through a live region for screen-reader users.
Does it price a stay that crosses a month or a season correctly?
Yes. Every night is priced on its own season from the rate table, so a stay spanning a boundary charges each night properly and the quote shows the range of rates it covers, plus nights, cleaning fee and grand total. It updates live as the range is dragged.
How does it work on a phone, where dragging fights the page scroll?
You tap the first night then the last rather than dragging, and vertical page scrolling is left entirely to the browser. That is a deliberate design choice rather than a fallback: a drag gesture on a calendar is exactly the interaction that hijacks scroll on touch.
Can I use it for something other than a holiday cottage?
Yes, anything hired by the night or the day. Studios, workshops, darkrooms, rehearsal rooms, glamping pitches and guest annexes all use the same shape. It is built for a single property though; a portfolio of several would need the calendar duplicating per unit.
