How to Build a Personal Calendar in Bubble

In the Data tab, create 'CalendarEvent' with fields: 'title' (text), 'start_date' (date), 'end_date' (date), 'description' (text), 'category' (text — work, personal, health, etc.), 'color' (text — hex color code), 'owner' (User), 'is_recurring' (yes/no), 'recurrence_pattern' (text — daily, weekly, monthly), 'recurrence_end' (date). Also create an Option Set 'EventCategory' with options and a 'color' attribute for consistent color coding.

Create a calendar page with a custom state 'view_month' (date, default Current date/time). Display the month name and year using the state's ':formatted as MMMM YYYY'. Add left/right arrow buttons to change the month (subtract/add 1 month to the state). For the calendar grid, use a Repeating Group with 42 cells (6 weeks x 7 days) or use the Full Calendar plugin from the marketplace. Each cell shows the day number and a nested Repeating Group of events for that day, filtered by start_date matching the cell's date and owner = Current User.

Add a Popup element called 'popup_event'. Inside, place inputs for title, date picker for start and end, a dropdown for category (sourced from the EventCategory Option Set), a text area for description, and a checkbox for recurring. Add a 'Save Event' button. The workflow: Create a new CalendarEvent with all field values and owner = Current User. To trigger the popup, add a workflow on the calendar cell click: 'Show popup_event' and set a custom state 'selected_date' to the clicked cell's date.

Add a view switcher (tabs or buttons) for Monthly, Weekly, Daily. Use a custom state 'current_view' (text). For the weekly view, show 7 columns (one per day) with hour rows from 8 AM to 8 PM. Search events where start_date falls within the current week and owner = Current User. Position events vertically based on their start time. For the daily view, show a single day with hourly slots and events positioned by time. Use conditional visibility to show only the active view.

When is_recurring is checked and the user saves an event, create a backend workflow that generates individual CalendarEvent records for each recurrence. For weekly recurrence: schedule a backend workflow that creates events every 7 days from start_date until recurrence_end. Link all instances to a 'recurrence_group' ID so editing one can optionally update all. Display a dialog asking 'Edit this event only or all recurring events?' when modifying.

Each EventCategory in the Option Set has a 'color' attribute (hex code like #3B82F6 for blue). When displaying events in the calendar, set the event cell or dot background color dynamically: 'Current cell's CalendarEvent's category's color'. This makes it easy to visually distinguish work events (blue), personal (green), health (red), etc. Add a legend below the calendar showing each category with its color.