➡️➡️➡️ The Ultimate Native Mobile Calendar for Bubble 🗓️✨
A powerful, beautiful, fully customizable calendar element for native mobile apps. Month, week, day and year views. Single date, range, multi-date and week selection. Live availability rules with min/max nights and blocked date ranges. Price and event labels fed straight from your own database. Full RTL and multi-language support.
✅ 4 gorgeous design presets
✅ Light & dark mode, automatic or forced
✅ 26 states, 12 events, 22 actions for full workflow control
✅ Zero external dependencies in the core — fast and reliable
────────────────────────────────TRY IT────────────────────────────────DEMO: https://plugins-testing-46093.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=calendarEDITOR: https://bubble.io/page?id=plugins-testing-46093&tab=Design&name=calendar&type=page&elements=bTGqm────────────────────────────────FEATURES────────────────────────────────
- Tabular numbers. The grid never shifts when the month changes, because every digit takes the same width.
- Zero borders, zero grid lines. Separation by whitespace alone.
- Fixed-width cells. Columns stay perfectly aligned on every screen size, no rounding drift.
- Spring selection. The circle scales in with a soft overshoot instead of snapping.
- Continuous range pill. Rounded caps at the real endpoints, and it bleeds to the screen edge when the range continues on the next row — where most implementations look broken.
- Animated height. Months with 5 or 6 rows transition smoothly instead of jumping.
- "Today" as a thin ring, not a filled block, so it never competes with the selection.
- Swipe between months
────────────────────────────────FOUR DESIGN PRESETS────────────────────────────────Pick a preset and you are done — each one changes density, tap target, corner radius and type hierarchy, not just colors:
- Minimal — monochrome ink on paper. Quiet and expensive-looking.
- Soft — indigo, squircle selection, roomier spacing.
- Lagoon — deep turquoise, the only preset that colors the title.
- iOS — mirrors Apple Calendar, red accent included.
Want your own brand colors instead? You can customize the calendar colors to match your brand.
────────────────────────────────FOUR VIEWS IN ONE ELEMENT────────────────────────────────
- Month — the full grid, swipeable.
- Week — a compact 7-day strip, perfect as a screen header.
- Day — week strip plus an agenda list of that day's events.
- Year — 12 miniature months to jump around fast. Very few calendars offer this, and habit and fitness apps live on it.
Switch views from a workflow, or let your users do it.
────────────────────────────────BUILT FOR BOOKING────────────────────────────────
- Four selection modes: single date, date range, multiple loose dates, or a whole week with one tap.
- Block entire ranges (seasons, holidays) without listing every single day. Other calendars force you to list them one by one.
- Minimum and maximum nights. After the guest picks check-in, invalid check-outs are disabled instantly — no error messages needed.
- Availability stops at the first blocked night. A booking range cannot jump over an occupied date, exactly like the booking sites your users already know.
- Price labels under each day. Show "235 $", "3 spots left" or "Sold out" right in the grid. This is what turns a calendar into a booking screen.
- Minimum date, maximum date, disabled dates, disabled weekdays — block every Sunday with one property.
────────────────────────────────EVENTS AND MARKERS────────────────────────────────
- Colored dots fed from your own database, not hardcoded. Up to three per day, each a different color, so three event types read at a glance.
- Create events from the calendar. Tap a day, an hour sheet opens, pick a free slot, name it, done. The plugin hands your workflow the date, the exact datetime, the hour and the title, ready to save.
- Instant feedback. The new event is painted immediately, without waiting for the database round trip.
- Show saved events back in the day agenda and as dots in the month grid.
- Event count per day exposed as a state, so you can build your own UI around it.
────────────────────────────────LANGUAGE AND REGION────────────────────────────────
- Automatic language detection.
- Force any locale when you need to: es-ES, en-US, it-IT, fr-FR, pt-BR, de-DE, ar-EG and more.
- Right-to-left support for Arabic and Hebrew markets, mirrored properly — grid, range pill and arrows included.
- Force the first day of the week to Monday or Sunday, independently of the locale.
────────────────────────────────TWO ELEMENTS, ONE PLUGIN────────────────────────────────
- Calendar — everything described above.
- Date & Time Picker — the real native system picker (the iOS wheel, the Android dialog) for when you need an exact time in a form. Date, time, or both.
────────────────────────────────FULL WORKFLOW CONTROL────────────────────────────────
- 26 states — selected date, start and end date, nights count, days count, ready-to-display formatted text, visible month, current view, focused day, events on that day, and more.
- 12 workflow events — including "Range completed" (fired only when the range closes, not on every partial change), "Day with events pressed" and "Blocked day pressed".
- 22 element actions — select, clear, navigate, change view, open the sheet, and even change preset, language or selection mode live, which makes building a demo page trivial.
────────────────────────────────FAST────────────────────────────────Built with the React Native core only: no external animation or gesture libraries in the calendar itself, so there is nothing to break. Rendering is measured and optimized — a full year of price labels redraws in under 2 ms.
────────────────────────────────Questions or a feature you need? Get in touch —
info@technocode.agency 
Built on Bubble
