Lovablefeatureintermediate
Add Booking Calendar to Lovable App
Add an availability-based booking calendar with time slots, date selection, and Supabase storage.
What you'll get
A booking calendar with date/time selection, availability management, and confirmation system.
The Prompt
Add a booking calendar to my Lovable app. REQUIREMENTS: 1. Create a calendar view showing available dates for the current month. Unavailable dates are grayed out. 2. When a date is selected, show available time slots for that day in a grid (e.g., 9:00 AM, 9:30 AM, 10:00 AM, etc.). 3. Store availability rules in a Supabase "availability" table: day of week, start time, end time, slot duration (in minutes). 4. Store booked appointments in a "bookings" table. Booked slots are removed from available options. 5. When a time slot is selected, show a booking form: name, email, phone, and notes. On submit, create a booking and mark the slot as taken. 6. Send confirmation details after booking (display on screen; optionally email via Resend). 7. Allow cancellation via a link with a unique booking ID. 8. Support timezone detection using Intl.DateTimeFormat().resolvedOptions().timeZone. DATABASE: - "availability" table: id, day_of_week (0-6), start_time, end_time, slot_duration_minutes, is_active - "bookings" table: id, date, time, name, email, phone, notes, status (confirmed/cancelled), booking_code, created_at - RLS: Anyone can create bookings. Only authenticated users/admins can manage availability. SECURITY: - Prevent double-booking with a unique constraint on (date, time) in the bookings table. - Rate limit booking creation to prevent abuse.
Replace these variables
| Variable | Replace with |
|---|---|
| [SLOT_DURATION] | Duration of each time slot in minutes (e.g., 30, 60) |
| [BUSINESS_HOURS] | Business hours (e.g., 9 AM - 5 PM) |
Tips for best results
Add a unique constraint on date+time in the bookings table to prevent race-condition double bookings.
Show times in the visitor's local timezone to avoid confusion.
Follow-up prompts
Add Google Calendar sync
Sync bookings to Google Calendar so they appear on the business owner's calendar. Use the Google Calendar API to create events.