Calendar for Bubble Mobile

✅

Link to plugin page: will be late

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-06.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=calendar-mobile

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-06&plugin=1753974765460x606500393111519200_current&tab=Design&name=calendar-mobile&type=page&version=live&elements=bTHbx1

Introduction

The Calendar for Bubble Mobile plugin provides a comprehensive calendar component specifically designed for mobile applications built on the Bubble platform. This plugin allows you to display events in multiple view formats (month, week, day) with full customization options for styling, event management, and user interactions. The calendar supports event creation, editing, recurring events, and provides rich styling options to match your app's design.

Prerequisites

This plugin requires your app to have a data type that contains event information with at least the following fields:

Event ID (unique identifier)

Event title

Start date

End date

Additional optional fields for enhanced functionality:

Event color

Event repeat pattern

Event notes

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/njge8JcQ

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Install the Calendar for Bubble Mobile plugin in your Bubble app.

Create your Event data type in Bubble with the required fields (ID, title, start date, end date).

Add the Calendar element to your mobile page.

Configure the data source by selecting your Event type and providing a list of events.

Map the required fields to your data type fields:

Event type: Select your custom event data type.

Event list: Provide the list of events to display.

Event ID field: Map to your unique identifier field.

Event title field: Map to your event title field.

Event start date field: Map to your start date field.

Event end date field: Map to your end date field.

Optional: Configure additional fields like color, repeat pattern, and notes.

Customize styling according to your app's design requirements.

Plugin Element Properties

The plugin contains a Calendar visual element that should be used on mobile views.

Calendar

Element fields

Title	Description	Type
Event type	The data type that contains your event information.	Custom Type
Event list	List of events to display in the calendar.	List of “Event type”
Event ID field	Field containing unique event identifier.	Text
Event title field	Field containing event title/name.	Text
Event start date field	Field containing event start date and time.	Date
Event end date field	Field containing event end date and time.	Date
Event color field	Field containing event color.	Text (optional)
Event repeat field	Field containing repeat pattern. NOTE: Use 'weekly', 'monthly', 'yearly' to mention the repeat pattern. If empty, the event will be displayed only once.	Text (optional)
Event note field	Field containing additional event notes.	Text (optional)
—————-	View	—————-
View	Calendar view mode.	Dropdown
Default view date	Initial date to display when calendar loads. NOTE: If empty, the default date is 'today' date.	Date (optional)
—————-	Style (default cell)	—————-
Default cell label color	Text color for default calendar cells.	Color
Default cell label font size	Font size for default cell labels.	Number
Default cell label font weight	Font weight for default cell labels (100-900).	Dropdown
Default cell background color	Background color for default cells.	Color
Default cell border width	Border thickness for default cells.	Number
Default cell border color	Border color for default cells.	Color
Default cell border radius	Border radius for default cells.	Number
—————-	Style (event cell)	—————-
Event cell label color	Text color for cells containing events.	Color
Event cell label font size	Font size for event cell labels.	Number
Event cell label font weight	Font weight for event cell labels (100-900).	Dropdown
Event cell background color	Background color for event cells.	Color
Event cell border width	Border thickness for event cells.	Number
Event cell border color	Border color for event cells.	Color
Event cell border radius	Border radius for event cells.	Number
—————-	Style (selected cell)	—————-
Selected cell label color	Text color for selected calendar cell.	Color
Selected cell label font size	Font size for selected cell label.	Number
Selected cell label font weight	Font weight for selected cell label (100-900).	Dropdown
Selected cell background color	Background color for selected cell.	Color
Selected cell border width	Border thickness for selected cell.	Number
Selected cell border color	Border color for selected cell.	Color
Selected cell border radius	Border radius for selected cell.	Number
—————-	Style (today cell)	—————-
Today cell label color	Text color for today's date cell.	Color
Today cell label font size	Font size for today cell label.	Number
Today cell label font weight	Font weight for today cell label (100-900).	Dropdown
Today cell background color	Background color for today's cell.	Color
Today cell border width	Border thickness for today's cell.	Number
Today cell border color	Border color for today's cell.	Color
Today cell border radius	Border radius for today's cell.	Number
—————-	Style (blocked cell)	—————-
Blocked cell label color	Text color for blocked/disabled cells.	Color
Blocked cell label font size	Font size for blocked cell labels.	Number
Blocked cell label font weight	Font weight for blocked cell labels (100-900).	Dropdown
Blocked cell background color	Background color for blocked cells.	Color
Blocked cell border width	Border thickness for blocked cells.	Number
Blocked cell border color	Border color for blocked cells.	Color
Blocked cell border radius	Border radius for blocked cells.	Number
—————-	Limitations	—————-
Minimal month	Earliest month that can be navigated to.	Date (optional)
Maximal month	Latest month that can be navigated to.	Date (optional)
Blocked weekdays	List of weekdays to disable. NOTE: Accepted values: Sunday, sat, we, 5.	List of texts (optional)
—————-	Weekdays	—————-
Enable weekdays	Show/hide weekday labels.	Checkbox
Monday label	Custom label for Monday.	Text
Tuesday label	Custom label for Tuesday.	Text
Wednesday label	Custom label for Wednesday.	Text
Thursday label	Custom label for Thursday.	Text
Friday label	Custom label for Friday.	Text
Saturday label	Custom label for Saturday.	Text
Sunday label	Custom label for Sunday.	Text
Start week on Sunday	Start calendar week on Sunday instead of Monday.	Checkbox
Weekdays label color	Color of weekday labels.	Color
Weekdays label font size	Font size for weekday labels.	Number
Weekdays label font weight	Font weight for weekday labels (100-900).	Dropdown
—————-	Events list	—————-
Enable events list	Show/hide events list below calendar.	Checkbox
Events list max height	Maximum height for events list container.	Number
Title event font size	Font size for event titles in list.	Number
Title event font weight	Font weight for event titles (100-900).	Dropdown
Time event font size	Font size for event times in list.	Number
Time event font weight	Font weight for event times (100-900).	Dropdown
Note event font size	Font size for event notes in list.	Number
Note event font weight	Font weight for event notes (100-900).	Dropdown
Repeat event font size	Font size for repeat information in list.	Number
Repeat event font weight	Font weight for repeat information (100-900).	Dropdown
Sorting by	Field to sort events by.	Dropdown
Sorting order	Sort order for events.	Dropdown

Element actions

Element states

Element events

Workflow example

Here are some setups that will help to understand the plugin better.

Name	Description	Type
is loaded	Indicates whether the calendar has finished loading.	Yes/No
selected date	The currently selected date.	Date
selected date's events	List of events for the selected date.	List of “Event type”
selected event	The currently selected event.	“Event type”
current view	Current calendar view mode (month, week, day).	Text
current view date	The date currently being viewed.	Date
can go previous	Whether navigation to previous period is possible.	Yes/No
can go next	Whether navigation to next period is possible.	Yes/No
error message	Error message if any error occurs.	Text
warning message	Warning message for user notifications.	Text

Name	Description
was loaded	Triggered when the calendar finishes loading.
date tapped	Triggered when a user taps on a date.
event tapped	Triggered when a user taps on an event.
error occurred	Triggered when an error occurs.
warning occurred	Triggered when a warning occurs.