How to Build a Event Calendar App with Lovable

1Create a Supabase schema for a multi-calendar event app.
2
3Tables:
4- calendars: id (uuid pk), user_id (references auth.users), name (text), color (text, hex code), is_default (bool default false), created_at
5- events: id (uuid pk), calendar_id (references calendars), title (text), description (text), location (text), start_at (timestamptz), end_at (timestamptz), is_all_day (bool default false), created_by (references auth.users), created_at
6- event_attendees: id (uuid pk), event_id (references events), user_id (references auth.users), email (text, for inviting non-users), rsvp_status (text check: pending|accepted|declined|tentative, default 'pending'), responded_at, invited_at
7
8RLS policies:
9- calendars: SELECT/INSERT/UPDATE/DELETE where user_id = auth.uid()
10- events: SELECT where calendar_id IN (SELECT id FROM calendars WHERE user_id = auth.uid()) OR id IN (SELECT event_id FROM event_attendees WHERE user_id = auth.uid())
11- events: INSERT/UPDATE/DELETE where calendar_id IN (SELECT id FROM calendars WHERE user_id = auth.uid())
12- event_attendees: SELECT where event_id IN (SELECT id from events visible to user via events RLS); UPDATE where user_id = auth.uid() (for RSVP updates)
13
14Create a trigger function that runs after a new user signs up (auth.users INSERT) and creates two default calendars for them: 'Personal' (color #3b82f6) and 'Work' (color #10b981), with 'Personal' set as is_default = true.

1Build the main calendar page at src/pages/Calendar.tsx.
2
3Requirements:
41. Fetch all events for the current month where the user has access (uses events RLS automatically)
52. Group events by date: Map<string, Event[]> where the key is 'YYYY-MM-DD'
63. Render a shadcn/ui Calendar component in month mode
74. Use the 'components' prop on Calendar to override the DayContent renderer. For each day, render the day number plus a row of colored dots below it. Each dot color maps to the calendar's color. Show max 3 dots and a '+N' text if more.
85. On day click, open a Popover listing that day's events as clickable rows (title + time range)
96. On event row click, close the Popover and open the EventDetailSheet component
107. Add a month navigation header with left/right arrows and the current month/year
118. Add a 'New Event' Button in the top right that opens the EventCreateDialog
129. Add a sidebar showing the user's calendars as a list with colored circle indicators and checkboxes to toggle calendar visibility

1// src/components/EventCreateDialog.tsx
2// Build a shadcn/ui Dialog for creating events.
3// Props: open, onOpenChange, defaultDate?: Date
4//
5// Form fields (react-hook-form + zod):
6// - title: required string
7// - calendarId: Select populated from user's calendars, defaults to default calendar
8// - startDate + startTime: combined into start_at timestamptz
9// - endDate + endTime: combined into end_at, must be after start_at
10// - isAllDay: Switch — when true, hide time pickers
11// - description: Textarea (optional)
12// - location: Input (optional)
13// - attendeeEmails: multi-value Input — user types an email and presses Enter to add it
14//   Render added emails as dismissible Badges below the input
15//
16// On submit:
17// 1. Insert into events table
18// 2. For each attendee email, look up the user by email in a Supabase RPC function
19//    get_user_id_by_email(email) that queries auth.users (SECURITY DEFINER)
20// 3. Insert rows into event_attendees for found users (status: pending)
21// 4. Close dialog, show a toast 'Event created', refresh calendar grid
22//
23// Add a DatePicker using shadcn/ui Popover + Calendar for date selection
24// Add time pickers as Select components with 30-minute intervals

1Build EventDetailSheet at src/components/EventDetailSheet.tsx.
2
3Props: eventId: string | null, open, onOpenChange
4
5When open and eventId is set:
61. Fetch event + calendar name/color + attendees list with user email and rsvp_status
72. Display in a shadcn/ui Sheet (side='right', width 480px):
8   - Calendar color bar at the top of the sheet header
9   - Event title (large), calendar name with colored dot
10   - Start/end time formatted: 'Monday, June 9 · 2:00 PM – 3:30 PM'
11   - Location if present (with map pin icon)
12   - Description if present
13   - Attendees section:
14     - AvatarGroup showing first 5 attendees
15     - Full list below showing each attendee's email, rsvp_status as Badge
16   - If current user is an attendee with pending/tentative/declined status, show RSVP buttons:
17     - 'Accept' (green), 'Decline' (destructive), 'Tentative' (outline)
18   - If current user is the event owner (created_by = auth.uid()):
19     - 'Edit' button opens EventCreateDialog pre-filled
20     - 'Delete' button with AlertDialog confirmation
21
22RSVP button click:
23- Update event_attendees SET rsvp_status = 'accepted' WHERE event_id = ? AND user_id = auth.uid()
24- Show toast confirmation
25- Re-fetch attendees to reflect updated statuses

1Update the calendar sidebar component.
2
3Requirements:
4- List all user calendars from the calendars table
5- Each row: colored checkbox (checked = visible on grid), calendar name, three-dot menu
6- Three-dot menu options: Rename, Change Color (opens a color picker Popover with 8 preset hex colors), Delete (with AlertDialog: deleting a calendar deletes all its events)
7- At the bottom: 'Add Calendar' button that opens a small inline form: name input + color picker + Save
8- The checkbox state is stored in React state as a Set<string> of hidden calendar IDs
9- Pass the hidden calendar IDs to the calendar grid, which filters events before rendering dots
10- Default calendars (is_default = true) show a 'Default' Badge and cannot be deleted
11
12Color options: #3b82f6 (blue), #10b981 (green), #f59e0b (amber), #ef4444 (red), #8b5cf6 (purple), #ec4899 (pink), #14b8a6 (teal), #f97316 (orange)