How to Build Event calendar app with V0

1// Paste this prompt into V0's AI chat:
2// Build an event calendar app. Create a Supabase schema with:
3// 1. event_categories: id (uuid PK), name (text), color (text), slug (text unique)
4// 2. events: id (uuid PK), title (text), description (text), start_time (timestamptz), end_time (timestamptz), location (text), color (text default '#3b82f6'), is_all_day (boolean default false), recurrence_rule (text), organizer_id (uuid FK to auth.users), max_attendees (int), category_id (uuid FK to event_categories), created_at (timestamptz)
5// 3. rsvps: id (uuid PK), event_id (uuid FK to events), user_id (uuid FK to auth.users), status (text default 'going' check in 'going','maybe','declined'), created_at (timestamptz), unique(event_id, user_id)
6// Create a composite index on events(start_time, end_time) for fast range queries.
7// Add RLS: anyone can read events, authenticated users can RSVP and create events.

1'use client'
2
3import { useState, useEffect } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
6import { Button } from '@/components/ui/button'
7import { Badge } from '@/components/ui/badge'
8import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
9import { ChevronLeft, ChevronRight } from 'lucide-react'
10
11type Event = {
12  id: string
13  title: string
14  start_time: string
15  end_time: string
16  color: string
17  location: string
18}
19
20export function CalendarView() {
21  const [view, setView] = useState<'month' | 'week' | 'day'>('month')
22  const [currentDate, setCurrentDate] = useState(new Date())
23  const [events, setEvents] = useState<Event[]>([])
24  const supabase = createClient()
25
26  useEffect(() => {
27    const fetchEvents = async () => {
28      const start = getViewStart(currentDate, view)
29      const end = getViewEnd(currentDate, view)
30
31      const { data } = await supabase
32        .from('events')
33        .select('id, title, start_time, end_time, color, location')
34        .gte('start_time', start.toISOString())
35        .lte('start_time', end.toISOString())
36        .order('start_time')
37
38      setEvents(data ?? [])
39    }
40    fetchEvents()
41  }, [currentDate, view, supabase])
42
43  return (
44    <div className="container mx-auto py-4">
45      <div className="flex items-center justify-between mb-4">
46        <div className="flex items-center gap-2">
47          <Button variant="outline" size="icon" onClick={() => navigate(-1)}>
48            <ChevronLeft className="h-4 w-4" />
49          </Button>
50          <h2 className="text-xl font-semibold">
51            {currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
52          </h2>
53          <Button variant="outline" size="icon" onClick={() => navigate(1)}>
54            <ChevronRight className="h-4 w-4" />
55          </Button>
56        </div>
57        <Tabs value={view} onValueChange={(v) => setView(v as typeof view)}>
58          <TabsList>
59            <TabsTrigger value="month">Month</TabsTrigger>
60            <TabsTrigger value="week">Week</TabsTrigger>
61            <TabsTrigger value="day">Day</TabsTrigger>
62          </TabsList>
63        </Tabs>
64      </div>
65      <div className="grid grid-cols-7 gap-px bg-muted rounded-lg overflow-hidden">
66        {getDaysInView(currentDate, view).map((day) => (
67          <div key={day.toISOString()} className="bg-background p-2 min-h-[100px]">
68            <span className="text-sm text-muted-foreground">{day.getDate()}</span>
69            {events
70              .filter((e) => isSameDay(new Date(e.start_time), day))
71              .map((event) => (
72                <Popover key={event.id}>
73                  <PopoverTrigger asChild>
74                    <button
75                      className="w-full text-left text-xs p-1 rounded mt-1 text-white truncate"
76                      style={{ backgroundColor: event.color }}
77                    >
78                      {event.title}
79                    </button>
80                  </PopoverTrigger>
81                  <PopoverContent className="w-64">
82                    <p className="font-medium">{event.title}</p>
83                    <p className="text-sm text-muted-foreground">{event.location}</p>
84                  </PopoverContent>
85                </Popover>
86              ))}
87          </div>
88        ))}
89      </div>
90    </div>
91  )
92}
93
94function getViewStart(date: Date, view: string): Date { return new Date(date.getFullYear(), date.getMonth(), 1) }
95function getViewEnd(date: Date, view: string): Date { return new Date(date.getFullYear(), date.getMonth() + 1, 0) }
96function getDaysInView(date: Date, view: string): Date[] {
97  const days: Date[] = []
98  const start = getViewStart(date, view)
99  const end = getViewEnd(date, view)
100  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) days.push(new Date(d))
101  return days
102}
103function isSameDay(a: Date, b: Date) { return a.toDateString() === b.toDateString() }

1// Paste this prompt into V0's AI chat:
2// Build an event creation page at app/events/new/page.tsx as a 'use client' component.
3// Requirements:
4// - Input for event title (required)
5// - Textarea for description
6// - Calendar component from shadcn/ui for selecting the start date
7// - Two time Input fields for start time and end time (HH:MM format)
8// - Switch for "All day event" toggle that hides time inputs when enabled
9// - Select for event category (fetched from event_categories table)
10// - Input for location
11// - Input for max attendees (optional number)
12// - Color picker using a row of colored Button circles for quick color selection
13// - Submit Button that calls a Server Action with Zod validation:
14//   - title required, 3-100 chars
15//   - start_time required, must be in the future
16//   - end_time must be after start_time
17// - Show success toast and redirect to the calendar after creation
18// - Use Card to wrap the form with clear section headings

1// Paste this prompt into V0's AI chat:
2// Build RSVP functionality for the event detail page at app/events/[id]/page.tsx.
3// Requirements:
4// - Server Component that fetches the event with organizer info and RSVPs count
5// - Display event details: title as h1, description, date/time formatted, location with map pin icon, category Badge
6// - Show attendee count: "X going, Y maybe" with Avatar group showing first 5 attendee photos
7// - RSVP section with three Button variants:
8//   - "Going" (default/primary when selected)
9//   - "Maybe" (outline when selected)
10//   - "Declined" (ghost when selected)
11// - Use a 'use client' RSVPButtons component that calls a Server Action to upsert the RSVP
12// - Implement optimistic UI: update the button state immediately, revert on error
13// - Show max capacity with a Progress bar if max_attendees is set ("15 of 50 spots filled")
14// - Include a "Share Event" Button that copies the event URL to clipboard
15// - Use Card to wrap the event details and Separator between sections

1// Paste this prompt into V0's AI chat:
2// Add filtering capabilities to the calendar view component.
3// Requirements:
4// - A filter bar above the calendar with:
5//   - Select dropdown for event category ("All Categories" + each category from database)
6//   - Input for searching events by title
7//   - Button to toggle showing past events
8// - Category filter chips showing active filters with colored Badge components and X button to remove
9// - When a category is selected, only events in that category appear on the calendar
10// - Search filters events client-side by title (case-insensitive)
11// - Add a "Today" Button that jumps back to the current date
12// - Add a mini Calendar component in a sidebar (Popover) for quick date jumping
13// - Highlight today's date with a different background color on the calendar grid
14// - Show a "No events" message in empty calendar cells