No. 001
Drag-to-book time picker
Drag a job-length window along the day. It snaps to 15 minutes, presses softly against booked slots and hops past them. Book this week or months ahead.
- Category
- Booking
- Added
- Nov 4, 2026
- Good for
- Detailers, salons, repair shops, anyone who books by the hour
- Built with
- HTML, CSS and JavaScript, no libraries.
What it does
- The window is as long as the job, so people see how long they'll be without their car.
- Booked time pushes back with a soft rubber-band feel. Pull past the middle and it hops over.
- Changing the service resizes the window with a spring and finds the nearest gap that fits.
- Page week by week, open a month view to book up to six months out, or jump to the earliest day the job fits.
- Days with no gap long enough grey out, and each day shows a tiny map of its bookings. Sundays and holidays show as closed.
- Hover previews where a click will land. Arrow keys move it, Shift moves an hour.
Use this element
Copy it into your website builder. It keeps the exact design and behavior, and your site's styles can't change it.
A short snippet that loads the element from finerui.com. Fixes and updates made here show up everywhere it's used.
Paste it into an HTML or embed block:
- Wix: Add, then Embed code, then Embed HTML
- Squarespace: a Code block
- Webflow: an Embed element
- WordPress: a Custom HTML block
- GoHighLevel: a Custom JS/HTML element
It sizes its own height and has a clear background, so it sits on your page like it belongs there.
Preparing the code…