> ## Documentation Index > Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt > Use this file to discover all available pages before exploring further. # Calendar overview > Rent items between two dates, at a price you set for each rental period export const CalendarRentalPdp = () => { const PERIODS = [{ days: 4, price: 63.99 }, { days: 7, price: 83.99 }, { days: 14, price: 117.99 }, { days: 30, price: 161.99 }]; const ADDONS = [{ id: "damage", title: "Damage protection", desc: "Covers accidental damage during your rental", price: 9 }, { id: "cleaning", title: "Cleaning", desc: "", price: 12, required: true }]; const START = new Date(2025, 0, 10); const [period, setPeriod] = useState(0); const [addons, setAddons] = useState({ damage: false, cleaning: true }); const money = n => "$" + n.toFixed(2); const fmt = d => d.getDate() + " " + d.toLocaleString("en", { month: "short" }) + " " + String(d.getFullYear()).slice(2); const endDate = new Date(START); endDate.setDate(START.getDate() + PERIODS[period].days); const perDay = PERIODS[period].price / PERIODS[period].days; const addonTotal = ADDONS.reduce((s, a) => s + (addons[a.id] ? a.price : 0), 0); const total = PERIODS[period].price + addonTotal; const toggleAddon = a => { if (a.required) return; setAddons({ ...addons, [a.id]: !addons[a.id] }); }; const t = { border: "#cccccc", text: "#000000", subdued: "#656565", accent: "#000000", radius: 8 }; const chip = selected => ({ border: "1px solid " + (selected ? t.accent : t.border), background: selected ? t.accent : "#ffffff", color: selected ? "#ffffff" : t.text, borderRadius: t.radius, padding: 6, minHeight: 28, display: "flex", alignItems: "center", lineHeight: 1, fontSize: 11, cursor: "pointer", transition: "background-color 150ms ease, border-color 150ms ease, color 150ms ease" }); const label = { display: "block", fontSize: 11, color: t.subdued, marginBottom: 3 }; const line = { display: "flex", justifyContent: "space-between", fontSize: 11 }; const windowRef = useRef(null); const [zoom, setZoom] = useState(0.4); useEffect(() => { const el = windowRef.current; if (!el || typeof ResizeObserver === "undefined") return undefined; const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / 853))); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); return
yourstore.com/products/all-mountain-ski-set
{} {}
All-mountain ski set
From $5.40 per day
Rent From $5.40 per day Yours for 4 to 30 days
{}
Rental period
{PERIODS.map((p, i) => { const on = i === period; return ; })}
{}
Arrive by {fmt(START)}
Return by {fmt(endDate)}
{}
Add-ons
{ADDONS.map((a, i) => { const on = !!addons[a.id]; return ; })}
{}
{money(perDay)}/day x {PERIODS[period].days} days {money(PERIODS[period].price)} {ADDONS.filter(a => addons[a.id]).map(a => {a.title} {money(a.price)} )}
Total {money(total)}
; }; Calendar rental, also known as one-off or event rental, is the most recognizable method: you might have rented skis, a suit for a wedding, or a dress for an event this way. *** ## How it works The customer books an item between two dates, which Supercycle calls the **Arrive by** and **Return by** dates. You set the rental periods, the number of days a product can be rented for, and a price for each. The customer picks a period and a start date, and the return date follows. The customer pays the full rental price at checkout. Fixed fees such as cleaning or insurance are added on top of the period price and shown as their own lines, so the customer sees what makes up the total. Logistics buffers keep the item off the calendar while it's prepared, shipped, and restocked, so two rentals can't be booked too close together. To charge a customer later for damage or an extension, turn on [card vaulting](/documentation/configuration/risk/card-vaulting) first. *** ## Configurations Set up calendar rental on a product, then add the extras your business needs. Turn on calendar rental for a product and add its rental periods and prices. Charge set fees on top of the rental period, such as a cleaning fee. Let customers extend an active cycle from their account and pay the difference. Add preparation, delivery, and restock time around rentals. Let customers filter a collection by the dates they need.