[plugin] Mobile Calendar Bubble Mobile

nocodeventure · January 12, 2026, 9:54am

We just updated our mobile calendar for Bubble Mobile, with support for timezone dates.

Doc link: Timezone | React Native Plugins | No-Code Venture

Demo page: https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=calendar

Plugin link: Calendar by NCV Plugin | Bubble

Custom Calendar Component — Full Documentation

A powerful, customizable calendar component with month and week views, timezone support, dynamic data binding, and extensive styling options.

Overview

This calendar component supports:

Month View — Traditional calendar grid with appointment indicators
Week View — Time-based schedule view with positioned appointments
Timezone Conversion — Automatic time conversion between timezones
Dynamic Data Binding — Connect directly to your database
RTL Support — Right-to-left language support
Extensive Customization — Colors, fonts, sizes, and more

View Modes

Month View

The default calendar grid showing days of the month. Click a day to see appointments in the legend below.

showMode: month

Week View

A detailed schedule view showing appointments positioned by time throughout the day.

showMode: week

Prop	Type	Default	Description
`showMode`	string	`month`	Set to `week` for week view
`limitNumDays`	number	`7`	Number of days to show in week view (1-7)
`startOnMonday`	boolean	`false`	Start week on Monday instead of Sunday

Data Input

Option 1: JSON Appointments

Pass appointments as a JSON list:

[
  {
    "id": "unique-id-123",
    "date": "2026-01-12",
    "title": "Team Meeting",
    "time": "2:00 PM",
    "duration": 60,
    "location": "Conference Room A",
    "color": "#3b82f6",
    "timezone": "Europe/Amsterdam"
  }
]

Field	Type	Description
`id`	string	Unique identifier
`date`	string	Date in `YYYY-MM-DD` or `YYYY-M-D` format
`title`	string	Appointment title
`time`	string	Time in `H:MM AM/PM` or `HH:MM` format
`duration`	number	Duration in minutes
`location`	string	Location text
`color`	string	Hex color for the appointment
`timezone`	string	IANA timezone (for conversion)
`allDay`	boolean	Set to `true` for all-day events

Option 2: Dynamic Data Binding (thing_list)

Connect directly to your database by binding a list of things:

Prop	Type	Description
`thing_list`	list	Your data source
`field_id`	string	Field name for ID
`field_date`	string	Field name for date
`field_title`	string	Field name for title
`field_duration`	string	Field name for duration
`field_location`	string	Field name for location
`field_color`	string	Field name for color
`field_timezone`	string	Field name for timezone

Timezone Support

The calendar supports full timezone conversion between event timezones and display timezones.

Display Timezone

Prop	Type	Description
`timezone`	string	Display timezone (dropdown)
`timezone_custom`	string	Display timezone (text input, takes priority)

If neither is set, the user’s device timezone is auto-detected.

Flexible Format

Both spaces and underscores are accepted:

✅ America/New_York
✅ America/New York
✅ Europe/Amsterdam

Event Timezone Conversion

Add timezone to your appointment JSON to enable automatic conversion:

{
  "date": "2026-01-12",
  "time": "2:00 PM",
  "timezone": "Europe/Amsterdam"
}

If the calendar is set to Europe/London, this displays at 1:00 PM.

ISO 8601 Format

Alternatively, use ISO format with timezone offset:

{
  "date": "2026-01-12T14:00:00+01:00",
  "title": "Meeting"
}

Styling Props

General Appearance

Prop	Type	Default	Description
`backgroundColor`	color	`#f9fafb`	Calendar background color
`borderRadius`	number	`0`	Corner radius of calendar container
`fontColorOverride`	color	—	Override default font color

Day Cells

Prop	Type	Default	Description
`daySize`	number	`36`	Size of day circles
`dayFontSize`	number	`14`	Font size for day numbers
`dayPadding`	number	`4`	Padding inside day cells
`daySpacing`	number	`2`	Spacing between day cells
`defaultDayColor`	color	`transparent`	Default background for days

Selection & Today

Prop	Type	Default	Description
`selectedColor`	color	`#2563eb`	Background color for selected day
`selectedFontColor`	color	`#ffffff`	Font color for selected day
`todayColor`	color	—	Background color for today
`todayFontColor`	color	`#ffffff`	Font color for today

Appointments

Prop	Type	Default	Description
`appointmentColor`	color	—	Default appointment color
`appointmentPadding`	number	`4`	Padding inside appointments
`appointmentFontWeight`	string	`bold`	Font weight for appointment text
`weekAppointmentOpacity`	number	`1`	Opacity for week view appointments (0-1)
`weekAppointmentBorderRadius`	number	`4`	Corner radius for week appointments
`borderLeftSize`	number	`0`	Left border width on appointments
`disableAppointmentBorder`	boolean	`false`	Disable appointment left border

Week View Specific

Prop	Type	Default	Description
`weekViewHeight`	number	`800`	Height of week view container
`limitWeekViewHeight`	boolean	`false`	Enable fixed height with scroll
`hourHeight`	number	`150`	Height per hour in pixels
`timeColumnWidth`	number	`45`	Width of time labels column
`startHour`	number	`7`	First hour to display (0-23)
`endHour`	number	`20`	Last hour to display (0-23)
`intervalMinutes`	number	`60`	Time grid interval
`sideMargin`	number	`1`	Margin on appointment sides
`hideWeekTitles`	boolean	`false`	Hide appointment titles in week view
`timeGridTextColor`	color	`#6b7280`	Color for time labels

Font Sizes

Prop	Type	Default	Description
`weekdayFontSize`	number	`12`	Font size for weekday headers
`weekFontSize`	number	`14`	Font size for week view appointments
`titleSize`	number	`16`	Title font size in legend
`timeSize`	number	`14`	Time font size in legend
`locationSize`	number	`13`	Location font size in legend
`durationSize`	number	`13`	Duration font size in legend
`lineHeight`	number	`20`	Line height in legend

Time Format

Prop	Type	Default	Description
`use24HourFormat`	boolean	`true`	Use 24-hour time format

Weekday Labels

Customize the weekday header labels:

Prop	Default	Description
`sundayPrefix`	`S`	Sunday label
`mondayPrefix`	`M`	Monday label
`tuesdayPrefix`	`T`	Tuesday label
`wednesdayPrefix`	`W`	Wednesday label
`thursdayPrefix`	`R`	Thursday label
`fridayPrefix`	`F`	Friday label
`saturdayPrefix`	`S`	Saturday label

Navigation Icons

Prop	Type	Description
`backIcon`	string	Previous button text/emoji (default: )
`nextIcon`	string	Next button text/emoji (default: )
`backIconSvg`	string	SVG markup for previous button
`nextIconSvg`	string	SVG markup for next button
`iconColor`	color	Color for SVG icons

RTL Support

Enable right-to-left layout for languages like Arabic and Hebrew:

isRTL: true

Legend (Month View)

When a day is clicked in month view, a legend shows appointment details below the calendar.

Prop	Type	Default	Description
`showLegend`	boolean	`true`	Show/hide the legend

Events & States

Triggered Events

Event	Description
`day_clicked`	Fired when a day is clicked
`appointment_clicked`	Fired when an appointment is clicked
`go_to_today`	Fired when goToToday is called
`go_to_next`	Fired when navigating forward
`go_to_previous`	Fired when navigating backward

Published States

State	Type	Description
`selected_day`	string	Selected date (YYYY-MM-DD)
`selected_day_appointment_ids`	list	IDs of appointments on selected day
`selected_day_things`	list	Things on selected day (dynamic data)
`selected_appointment_id`	string	Clicked appointment ID
`selected_appointment_title`	string	Clicked appointment title
`selected_appointment_date`	string	Clicked appointment date
`selected_appointment_time`	string	Clicked appointment time (converted)
`selected_appointment_duration`	number	Clicked appointment duration
`selected_appointment_location`	string	Clicked appointment location
`selected_appointment_color`	string	Clicked appointment color
`selected_appointment_thing`	thing	Clicked appointment thing (dynamic data)

Instance Methods

Control the calendar programmatically:

Method	Description
`goToToday()`	Navigate to current date
`goToNext()`	Navigate to next month/week
`goToPrevious()`	Navigate to previous month/week

Debug Mode

Enable debug mode to see appointment timing information:

debug: true

Complete Example

{
  "appointments": [
    {
      "id": "1",
      "date": "2026-01-12",
      "title": "Morning Standup",
      "time": "9:00 AM",
      "duration": 30,
      "location": "Zoom",
      "color": "#10b981",
      "timezone": "America/New_York"
    },
    {
      "id": "2",
      "date": "2026-01-12",
      "title": "Client Meeting",
      "time": "2:00 PM",
      "duration": 60,
      "location": "Conference Room B",
      "color": "#f59e0b",
      "timezone": "Europe/London"
    },
    {
      "id": "3",
      "date": "2026-01-15",
      "title": "Company Holiday",
      "allDay": true,
      "color": "#8b5cf6"
    }
  ]
}

Tips

Use thing_list for dynamic data — Keeps your calendar in sync with your database
Set timezone on events — Ensures correct display regardless of viewer’s location
Customize startHour and endHour — Show only relevant hours for your use case
Use limitWeekViewHeight — Prevents the week view from taking too much space
Test with debug: true — Helps troubleshoot appointment positioning issues

Questions or issues? Let us know below!

Topic		Replies	Views
[HOW-TO] Create a custom Calendar using repeating group Tips	150	57669	March 12, 2022
[NEW PLUGIN] PlanFlow - Beautiful Calendar with Native Logic (Free & Pro) 📅 Plugins	0	21	December 23, 2025
{Plugin} - Full Calendar Scheduler Suite Showcase	290	25918	December 27, 2024
ZQ Drag-n-Drop Calendar - New Plugin from Zeroqode Showcase	84	6255	November 15, 2023
[NEW PLUGIN] Modern Calendar (Notion-Calendar-like) Plugins	29	810	January 27, 2026