✅ How to use it (simple steps): Install Plugin:

Go to your Bubble app editor.

Navigate to Plugins → Click "Add plugin".

Find and install the Bubble React Native Calendar (or the similar name listed).

Add to your app:

Drag the calendar element onto your Bubble page from the element panel.

Customize:

Set properties in the plugin element’s settings:

Start on Monday: Yes or No.

RTL (Right-to-left) layout: Enable if required.

Customize font size, colors, and padding.

Provide Data (Appointments):

Prepare a list of appointments/events in JSON format:

json
Copy
Edit
[{"id":"1","date":"2024-04-10","title":"Meeting","color":"#ff0000","time":"10:00 AM","location":"Office"}]
Pass this list to the calendar via its input field for appointments.

Handle Events:

When a user clicks on a date:

The plugin publishes the selected date and related appointment IDs to states you can access in Bubble workflows.

You can then trigger workflows based on these events (e.g., displaying details).


📍 Appointments / Events

appointments (Bubble list of JSON strings or objects)
Expected format (each item):

json

{
 "id": "unique-id-123",
 "date": "2025-04-11",
 "title": "Team Sync",
 "time": "2:00 PM",
 "location": "Room B",
 "color": "#f43f5e",
 "spacingBetween": 4,
 "lineHeight": 20,
 "titleSize": 16,
 "timeSize": 14,
 "locationSize": 13
}


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

Editor: https://bubble.io/page?id=ncv-react-plugins&test_plugin=1744290940430x950179829294039000_current&tab=Design&name=calendar&type=page

Documentatio available at: https://docs.nocodeventure.com/react-native-plugins/mobile-calendar-react-native