MARKETPLACE
PLUGINS
BOOKING CALENDAR & TIME SLOT
Booking Calendar & Time Slot logo

Booking Calendar & Time Slot

Published August 2026
   •    Updated August 2026

Plugin details

[bold]Native Booking Calendar Pro[/bold] is a mobile-first booking and scheduling component for Bubble mobile apps. It lets users select a service, choose a provider, pick one or multiple booking dates, view available time slots, and confirm a booking from one native element. The plugin is designed for appointment booking flows like consultations, coaching calls, clinic appointments, beauty services, demos, reservations, and service-based scheduling apps. It supports generated time slots, manually supplied slots, provider cards with optional images, disabled dates, unavailable slots, multi-day selection, unselect behavior, and customizable mobile layouts.

[bold]Editor Page:[/bold] https://bubble.io/page?id=codara&test_plugin=1781745805530x449132388868161540_current&tab=Design&name=Booking+Calendar&type=page&elements=bTIja
[bold]Demo Page:[/bold] https://codara.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Booking%20Calendar

[bold]Main Features[/bold]
    [][bold]Service selection:[/bold] Add a list of services such as consultations, strategy calls, product demos, or support sessions. [][bold]Provider selection:[/bold] Add providers, staff members, consultants, or team members with subtitles, prices, and optional image URLs. [][bold]Date selection:[/bold] Let users select a booking date using a horizontal date strip or calendar grid. [][bold]Multiple-day selection:[/bold] Allow users to select more than one booking date when your workflow requires multiple appointments. [][bold]Time slot selection:[/bold] Display available time slots only after a date has been selected. [][bold]Generated time slots:[/bold] Automatically generate slots using start time, end time, and interval minutes. [][bold]Manual time slots:[/bold] Provide your own slot labels, values, and capacities if you want full control. [][bold]Unavailable dates and slots:[/bold] Disable specific dates, weekdays, global slots, or date-specific slots. [][bold]Provider image controls:[/bold] Control image fit and image height for provider cards. [][bold]Custom layouts:[/bold] Arrange services, providers, and time slots horizontally, vertically, or in two-column rows.
  • [bold]Workflow states and events:[/bold] Use selected date, selected slot, selected provider, selected service, booking summary, and booking confirmation events in Bubble workflows.

$5

One time  •  Or  $30/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Native mobile

Contributor details

CoDara logo
CoDara
Joined 2025   •   15 Plugins
View contributor profile

Instructions

[bold]How To Use[/bold]
    []Add the [bold]Native Booking Calendar Pro[/bold] element to your Bubble mobile page. []Set the element height to [bold]Fit content[/bold] if you want the booking flow to grow naturally with the content. []Add your page title, subtitle, event name, host name, duration text, location text, and timezone label. []Enter your service names, one per line or as a Bubble list. []Enter your provider names, subtitles, prices, and optional provider image URLs. Make sure each provider image matches the provider order. []Choose the service layout and provider layout that best fits your design. []Choose your date picker style: [bold]Strip[/bold] or [bold]Grid[/bold]. []Choose whether the user can select a single day or multiple days. []Set [bold]Allow unselect[/bold] to [bold]yes[/bold] if users should be able to tap an active service, provider, date, or slot again to clear it. []Add time slots manually, or generate them using start time, end time, and interval minutes. []Use disabled dates, disabled weekdays, and unavailable slots to block unavailable booking options. []Create Bubble workflows from the plugin events, such as date selected, slot selected, booking confirmed, and selection cleared.
[bold]Time Slot Setup[/bold]
You can configure time slots in two ways:
[bold]Option 1: Generated Slots[/bold]
Use this when your slots follow a regular schedule.
    [][bold]Start time:[/bold] Example: 09:00 [][bold]End time:[/bold] Example: 18:00
  • [bold]Interval minutes:[/bold] Example: 30
This will automatically create slots like 09:00, 09:30, 10:00, 10:30, and so on.
[bold]Option 2: Manual Slots[/bold]
Use this when you want full control over the exact slots.
    [][bold]Slot labels:[/bold] The text shown to the user, such as 9:00 AM or Morning Session. [][bold]Slot values:[/bold] The internal value published to Bubble workflows.
  • [bold]Slot capacities:[/bold] Optional number of available spots for each slot.
[bold]Unavailable Dates And Slots[/bold]
Use these fields to control availability:
    [][bold]Disabled dates:[/bold] Add dates that should not be selectable. Example: 2026-08-05 [][bold]Disabled weekdays:[/bold] Add weekdays that should always be disabled. Example: Sunday or Saturday [][bold]Unavailable slots:[/bold] Add slot values that should be disabled globally. Example: 12:00 [][bold]Date-specific unavailable slots:[/bold] Use the format YYYY-MM-DD|slot. Example: 2026-08-03|10:30
[bold]Layout Options[/bold]
    [][bold]Service layout:[/bold] Horizontal scroll, Vertical list, or Two per row. [][bold]Provider layout:[/bold] Horizontal scroll, Vertical list, Two per row, or Swipe cards. [][bold]Time slot layout:[/bold] Two per row, Horizontal scroll, or Vertical list. [][bold]Provider image fit:[/bold] Cover, Contain, or Stretch.
  • [bold]Provider image height:[/bold] Controls the image height inside provider cards.
[bold]Important Notes[/bold]
    []The plugin does not auto-select services, providers, dates, or slots on first load. []Time slots stay hidden until the user selects a date. []If a date is unselected, its selected time slot is also cleared. []If [bold]Allow unselect[/bold] is enabled, users can fully clear their service, provider, date, and slot selections.
  • If all plugin data fields are empty, the live mobile preview stays empty instead of showing default sample content.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Calendar   •   Productivity   •   Technical   •   Customer Support   •   Small Business   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales