WeWeb Events Calendar: Built-in Component and Custom Booking

This step happens entirely in the Supabase Dashboard, not in WeWeb. Open your Supabase project → Table Editor → New table. Create a table named 'bookings' with these columns: id (uuid, primary key, default: gen_random_uuid()), service_id (uuid, foreign key to a services table), provider_id (uuid, foreign key to users/providers), customer_id (uuid, nullable, foreign key to auth.users), start_time (timestamptz), end_time (timestamptz), status (text, default: 'available' — values: 'available', 'booked', 'cancelled', 'blocked'), customer_name (text, nullable), customer_email (text, nullable), stripe_payment_id (text, nullable), notes (text, nullable), created_at (timestamptz, default: now()). Add an RLS policy so customers can only read 'available' slots and their own bookings. Enable Row Level Security on the table.

1-- Injection point: Supabase Dashboard → SQL Editor
2-- Creates bookings table and RLS policies
3
4CREATE TABLE public.bookings (
5  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
6  service_id UUID,
7  provider_id UUID,
8  customer_id UUID REFERENCES auth.users(id),
9  start_time TIMESTAMPTZ NOT NULL,
10  end_time TIMESTAMPTZ NOT NULL,
11  status TEXT NOT NULL DEFAULT 'available'
12    CHECK (status IN ('available', 'booked', 'cancelled', 'blocked')),
13  customer_name TEXT,
14  customer_email TEXT,
15  stripe_payment_id TEXT,
16  notes TEXT,
17  created_at TIMESTAMPTZ DEFAULT NOW()
18);
19
20ALTER TABLE public.bookings ENABLE ROW LEVEL SECURITY;
21
22-- Anyone can view available slots
23CREATE POLICY "Public can view available bookings"
24ON public.bookings FOR SELECT
25USING (status = 'available');
26
27-- Authenticated users can view their own bookings
28CREATE POLICY "Customers can view own bookings"
29ON public.bookings FOR SELECT
30USING ((SELECT auth.uid()) = customer_id);
31
32-- Authenticated users can update their own available bookings to booked
33CREATE POLICY "Customers can book available slots"
34ON public.bookings FOR UPDATE
35USING (status = 'available')
36WITH CHECK (status = 'booked' AND (SELECT auth.uid()) = customer_id);

In the WeWeb editor, open the Data panel → click + New → select Supabase → choose your bookings table. Name the collection 'bookings'. In the Filter section, add a filter: status → equals → 'available'. This ensures only open slots are fetched by default (your Realtime subscription will also catch updates). Set the fetch mode to Dynamic. Add a second collection named 'myBookings' using the same bookings table but with a different filter: customer_id → equals → bind to the logged-in user's ID (if using Supabase Auth, this is: plugins['supabase-auth'].user.id). The Calendar component will use the 'bookings' collection for displaying available slots and 'myBookings' to show the current user's reservations in a different color.

Click the Add panel (+) in the left sidebar, search for 'Calendar', and drag it onto your page. Select the Calendar element and open its Settings panel. Under Data, click the plug icon (🔌) next to 'Events' and bind it to a formula that combines both collections and maps them to the Calendar's expected event format. The Calendar expects each event to have a 'start' (ISO datetime string), 'end' (ISO datetime string), 'title' (display text), and optionally 'class' (CSS class for color-coding). In the Settings panel, set the default view to 'month' or 'week'. Enable the display of all-day events if needed. Under Configuration, set 'min date' to today to prevent past slot selection. The Calendar component supports year, month, week, and day views — add view toggle buttons to the page that use a Change variable value action to update a 'calendarView' variable bound to the Calendar's active view property.

1// Injection point: Calendar element → Settings → Events property → Formula (plug icon)
2// Maps both collections to Calendar event format
3const available = map(collections['bookings'].data, slot => ({
4  start: slot.start_time,
5  end: slot.end_time,
6  title: 'Available',
7  class: 'slot-available',
8  id: slot.id
9}));
10
11const myBookings = map(collections['myBookings'].data, booking => ({
12  start: booking.start_time,
13  end: booking.end_time,
14  title: booking.notes || 'My Booking',
15  class: 'slot-booked',
16  id: booking.id
17}));
18
19return concat(available, myBookings);

The Calendar emits an event when a user clicks on a slot. In the Calendar's Settings panel, scroll to Events → On event click. Add a workflow here: Action 1 → Change variable value → set a page variable named 'selectedSlot' (Object type) to the formula: event (the clicked event object, which includes the slot id, start, end). Action 2 → Open popup → select a 'Booking Popup' that you create now. To create the popup: in the Add panel, add a Dialog element, name it 'Booking Popup', and set it to not open on load. Inside the popup, add a text element showing the selected date/time (bound to selectedSlot.start, formatted using a date formula), a Form Container with fields for customer name and email (if not logged in), and a Confirm Booking button. Set the Dialog's close trigger to a button with an On click workflow: Close popup.

In the Confirm Booking button's On click workflow, add these actions in sequence. Action 1 → Supabase Database Update → table: bookings → set status to 'booked', customer_id to the logged-in user ID (or null for guest), customer_name and customer_email to the form values, updated_at to now() → where: id equals selectedSlot.id. This atomically claims the slot. Action 2 → Fetch collection → 'bookings' (to remove the claimed slot from the available list). Action 3 → Fetch collection → 'myBookings' (to show the new booking in the calendar). Action 4 → Close popup. Action 5 → Change variable value → set a 'bookingConfirmed' boolean to true to show a success banner. Add error handling: use the On error trigger on the workflow to detect if the slot was already booked by another user (Supabase UPDATE will return 0 rows if status is no longer 'available') and show an error message.

If your booking requires payment, insert payment steps before the Supabase update. In the Confirm Booking workflow, restructure as: Action 1 → Stripe Checkout → redirect to a Stripe-hosted checkout page. Configure the Checkout action in the Plugins → Extensions → Stripe settings with your Price ID. After successful payment, Stripe redirects to a success URL — create a page named 'booking-success' in WeWeb and set it as the success URL. On that page's On page load workflow: read the URL query parameter 'session_id' (add a Query variable named 'session_id' in the Data panel → Variables → New → Query), then call a Supabase Edge Function to verify the payment and update the booking status. In Supabase Dashboard → Edge Functions → New Function: write a Deno function that calls Stripe's retrieve session API and updates the booking record server-side.

Add a Date Picker element (Add panel → search 'Date Picker') above your Calendar for users to jump to a specific date or filter by date range. In the Date Picker's Settings, set Mode to 'range' for date-range filtering. Create two page variables: 'filterStart' (Text) and 'filterEnd' (Text). Bind the Date Picker's On date select workflow to set both variables from the emitted date range object. Update your 'bookings' collection filter to add: start_time → is after → filterStart → Ignore if empty, and start_time → is before → filterEnd → Ignore if empty. Add a Fetch collection action in the On date select workflow to reload filtered data. The Calendar will automatically re-render with the filtered events.