INSTRUCTIONS 1. Add the element
Open your Bubble mobile app editor and place the Native Time Slot Picker Pro element on the page.
The element is designed to work with Bubble’s fit-to-content behavior. Give it enough width to display the calendar and time-slot buttons correctly.
2. Add the basic content
Configure the following optional text fields:

[]Title: Main heading displayed above the picker. []Subtitle: Supporting text displayed below the title. []Event name: Name of the appointment or event. []Host name: Name of the person or business providing the appointment. []Event duration text: A readable duration such as “30 minutes”. []Event location text: Location such as “Google Meet” or “Office appointment”. []Timezone label: Timezone information displayed to the user. []Date section title: Heading displayed above the date picker. []Slots section title: Heading displayed above the available time slots. []Selected booking label: Heading displayed in the booking summary.
• Confirm button text: Text displayed on the confirmation button.
  

All content fields are optional. Empty fields remain hidden instead of displaying sample or fallback content.
3. Configure date selection
Use Selection mode to control how customers select dates:

[]Single day: Allows one selected date at a time. []Multiple days: Allows users to select several booking dates.

Use Max selected days to limit the number of dates that can be selected in multiple-day mode.
Use Allow unselect to determine whether users can tap an active date or time slot again to clear it.
When a selected date is removed, the time slot associated with that date is also removed.
4. Choose the date picker layout
The plugin supports two date picker styles:

[]Grid: Displays a monthly calendar with navigation controls. []Strip: Displays upcoming dates in a horizontally scrollable row.

Use Days to show to control how many dates appear in the strip layout.
The plugin does not select a date automatically unless an initial selected date is supplied.
5. Add manual time slots
To provide your own time slots, enter matching values in the slot fields.
Example:
Slot labels
09:00 AM
10:30 AM
12:00 PM
01:30 PM
03:00 PM
Slot values
09:00
10:30
12:00
13:30
15:00
Slot capacities
5
3
2
4
1
Each item should be placed on a separate line. The label is shown to the user, while the value is published through the plugin’s states and workflows.
6. Generate time slots automatically
If manual slot labels and values are empty, the plugin can generate time slots using:

[]Start time: Beginning of the available booking period, such as “09:00”. []End time: End of the booking period, such as “18:00”.
• Interval minutes: Number of minutes between slots, such as “30”.
  

Example:
Start time: 09:00
End time: 17:00
Interval minutes: 30
This creates slots at 09:00, 09:30, 10:00, and continues until the configured end time.
7. Configure the time-slot layout
Use Time slot layout to select how available times are displayed:

[]Two per row: Displays time slots in a two-column grid. []Horizontal scroll: Displays time slots in a horizontally scrollable row.
• Vertical list: Displays one full-width time slot per row.
  

Time slots remain hidden until the user selects a valid date.
8. Configure empty-state messages
Use Select date first text to display instructions before a date is selected.
Example:
Select a date to see available times.
Use Empty slots text when a selected date has no available times.
Example:
No available times for this date.
Leave either field empty if you do not want its message displayed.
9. Disable dates and weekdays
Use Disabled dates to prevent specific dates from being selected.
Enter each date on a separate line using the following format:
2026-08-05
2026-08-12
2026-08-19
Use Disabled weekdays to block recurring days such as Saturday or Sunday.
10. Disable time slots
Use Unavailable slots to prevent specific times from being selected on every date.
Example:
12:00
15:30
To disable a time only on a particular date, use:
2026-08-03|10:30
2026-08-04|15:00
The format is:
YYYY-MM-DD|SLOT_VALUE
The slot value must match the corresponding value supplied in Slot values or generated by the plugin.
11. Configure initial selections
Use Initial selected date to load the picker with one date already selected.
Use Initial selected dates for multiple-day mode. Enter the dates on separate lines using the YYYY-MM-DD format.
Leave these fields empty when the picker should start with no selection.
12. Use the exposed states
The plugin publishes states that can be used in Bubble workflows:

[]selected_date: Currently active selected date. []selected_date_text: Selected date formatted as YYYY-MM-DD. []selected_slot: Value of the selected time slot. []selected_slot_label: Visible label of the selected time slot. []selected_dates: All selected dates in multiple-day mode. []selected_slots_json: JSON map containing the slot selected for each date. []selected_count: Number of selected dates. []is_slot_available: Indicates whether a valid available slot is selected. []booking_summary: Readable summary of the current selection. []last_error_message: Most recent validation or availability error.

13. Use plugin events
Create Bubble workflows using the plugin’s events, including:

[]Date selected []Slot selected []Selection cleared []Invalid slot pressed []Booking confirmed []Error occurred

For example, use Booking confirmed to create an appointment in your database, navigate to a confirmation page, or display a success message.
14. Use plugin actions
The plugin provides actions for controlling the picker through workflows:

[]Set date: Select or focus a date programmatically. []Set slot: Select a time slot programmatically. []Set selected dates: Provide multiple selected dates. []Clear selection: Remove all selected dates and slots. []Refresh availability: Refresh the displayed slot availability. []Confirm booking: Trigger booking confirmation through a workflow.

15. Customize the design
Use the Appearance fields to customize:

[]Background and surface colors []Selected date and time-slot colors []Text and muted-text colors []Borders and disabled-item colors []Today’s date styling []Summary card and confirmation button colors []Padding and spacing []Border radius
• Regular and title font sizes
  

Always check the plugin in Bubble’s mobile preview after changing its layout or dimensions. The editor preview may not reproduce every native scrolling and sizing behavior exactly.