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

VariableReplace 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.

Related prompts