For Bubble native mobile apps (iOS and Android). This plugin does not work on web pages.

The plugin ships two elements:

• Calendar — the full calendar: four views, four selection modes, booking rules, markers, event creation.
• Date & Time Picker — the native system picker for capturing an exact time in a form.

1. Getting started

• Drag the Calendar element into a view.
• Give it a height. 420 px for the month view, 560 px if you use the Day or Year view. With no height the element renders blank — this is the most common problem by far.
• Preview. It works out of the box: tap a day, swipe sideways to change month.

Every property is optional. Anything you leave empty falls back to a sensible default, so you can configure only what you need.

2. Look and feel

Design preset — minimal, soft, lagoon, ios. Each one changes density, tap target, corner radius and type hierarchy, not only colors.

Color scheme — auto (follows the device), light, dark.

Custom colors. Eleven optional color properties: Accent, Background, Title, Day number, Muted text, Weekday header, Disabled day, Text over accent, Range fill, Today ring, Sheet background. Leave empty to use the preset.

How custom colors work with dark mode. Each color has a matching “(dark)” version that takes over in the dark theme. If you do not set the dark version:

• Brand colors (Accent, Text over accent, Today ring) are inherited into dark mode.
• Surface colors (background, texts, range fill, sheet) fall back to the preset’s dark palette.

This is deliberate: a white background set by hand and inherited into dark mode would leave you with white text on a white background. If you truly want your own background at night, set Background color (dark).

Geometry — Row height, Day circle size, Corner radius, Horizontal padding, Day font size, Title font size. All optional; empty means the preset’s value.