MARKETPLACE
PLUGINS
WEB CALENDAR FREE
Web Calendar Free logo

Web Calendar Free

Published May 2026
   •    Updated today

Plugin details

Web Calendar Free is a lightweight and customizable calendar element built for Bubble.io applications.
It supports single date selection and date range selection with a clean and modern interface designed for web applications.

Perfect for booking systems, CRMs, scheduling pages, reservation forms, dashboards and SaaS applications.

Features included:
- Single date selection
- Date range selection
- Custom selection colors
- Calendar roundness customization
- Typography customization
- Disabled dates
- Minimum and maximum selectable dates
- Responsive web layout
- Bubble workflow events
- Exposed states for workflows
- Smooth month navigation animation
- Multi-language support

Upgrade to Web Calendar Pro for:
- Dark Mode
- Time Picker
- Popup Mode
- Week Picker
- Multiple Date Selection
- Swipe Navigation
- Event Dots
- Advanced Mobile Features
- Advanced Styling

🚀 Demo:
https://plugins-testes-rincao.bubbleapps.io/version-test/web_calendar_free

📘 Editor:
https://bubble.io/page?id=plugins-testes-rincao&tab=Design&name=web_calendar_free&type=page&elements=bTHMy3

Free

For everyone

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web & Native mobile

Contributor details

Rincão Informática Academy logo
Rincão Informática Academy
Joined 2023   •   9 Plugins
View contributor profile

Instructions

1. Add the Web Calendar Free element to your Bubble page.
2. Adjust the element width and height to fit your layout.

3. Choose the Selection Mode:
- single = selects one date
- range = selects a start and end date

4. Use Visible Date to define which month should appear when the calendar loads.

5. Use Default Date for preselected dates in single mode.

6. Use Default Start Date and Default End Date for preselected ranges.

7. Use Minimum Date and Maximum Date to limit selectable dates.

8. Use Disabled Dates to prevent users from selecting specific dates.

9. Customize the appearance using:
- Selection Color
- Selection Roundness
- Calendar Background
- Calendar Roundness
- Calendar Padding
- Date Font Color
- Date Font Size
- Date Font Weight
- Header Color
- Header Font Size
- Header Font Weight
- Weekday Font Color
- Weekday Font Size
- Weekday Font Weight

10. Use Language to localize the calendar.

11. Use Week Starts On to define the first weekday:
- 0 = Sunday
- 1 = Monday

12. Available states:
- selected_date
- selected_start_date
- selected_end_date

13. Available workflow events:
- date_selected
- range_selected

14. Use selected_date for single mode workflows.

15. Use selected_start_date and selected_end_date for booking and reservation workflows.

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Mobile   •   Productivity   •   Technical   •   Small Business   •   Calendar   •   Visual Elements

Resources

Support contact
Documentation

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble