Daybook — Free Appointment Scheduling Template
Daybook puts the calendar, the available hours and the booking form in the same small application. Filter the studio calendar by advisor, choose a service, and book one of the slots that fits the advisor’s working day. The same checks run when an appointment is moved, so a one-hour review cannot slip into a half-hour gap or a lunch break. Staff can cancel appointments and edit availability without hiding conflicting existing bookings. This Bootstrap 5 template uses fictional records and browser-local storage; it sends no invitations and has no scheduling backend.
Key features
- Five-day resource calendar with advisor filters and week navigation
- Searchable booking list with status and advisor filters
- 30- and 60-minute services with interval-based availability checks
- Per-advisor working days, daily hours and lunch break settings
- Booking form with available slot radios and required client details
- Rescheduling that excludes the original appointment from conflict checks
- Cancellation confirmation that releases the occupied time slot
- Availability updates rejected when they conflict with confirmed appointments
- CSV booking export, light/dark mode and browser-local reset
Best for
- Consultation and studio scheduling prototypes
- Developers building appointment apps or booking portals
- Product teams testing resource-calendar workflows
At a glance
- Bootstrap 5.3.8 and vanilla JavaScript; no jQuery
- 4 pages: index.html, bookings.html, availability.html, book.html
- Browser-local demo records; no backend, authentication or server writes
- Responsive layouts, keyboard controls, light and dark modes
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip daybook and open index.html in a browser. Edit the HTML copy, the demo arrays in js/main.js and the palette in css/style.css. The supplied Bootstrap files are self-hosted, so there is no build step or external script dependency. Changes are stored only in this browser; connect your own authenticated API before using real records. Deploy the folder to any static host.
Frequently asked questions
Is Daybook free for commercial use?
Yes. Free for personal and commercial use, including client work. Attribution is optional but always welcome. Full terms: uicookies.com/license
What does the download include?
4 HTML pages (index.html, bookings.html, availability.html, book.html), Bootstrap 5.3.8, one design stylesheet and one vanilla JavaScript file. No npm installation or build command is required.
Does it connect to a backend?
No. All people and records are fictional, and changes are saved in localStorage in this browser only. No emails, payments or real bookings are sent. Replace the data and persistence helpers with your own authenticated API for production.
How do I customize the template?
Change colors and typography using the custom properties at the top of css/style.css. Edit content in the HTML pages and the initial data arrays in js/main.js. Reset demo clears only this template’s saved demo records.
Does Daybook prevent double bookings?
The browser demo rejects overlapping confirmed appointments for the same advisor, including 60-minute appointments and lunch breaks. For real concurrent users, your server must repeat those checks and save the booking atomically. This front end alone cannot protect a shared calendar.
