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…