1. Add the Web Calendar Pro element to your Bubble page.
2. Set the element width and height according to your layout.

3. Choose the Selection Mode:
single = selects one date
range = selects a start and end date
multiple = allows multiple individual dates
week = selects an entire week

4. Set Visible Date to define which month should be displayed when the calendar loads.

5. Optionally set Minimum Date and Maximum Date to restrict selectable dates.

6. Use Disabled Dates to pass a list of dates that cannot be selected.

7. Use Disabled Weekdays to block specific weekdays:
0 = Sunday
1 = Monday
2 = Tuesday
3 = Wednesday
4 = Thursday
5 = Friday
6 = Saturday

8. Use Event Dates to pass a list of dates that should display event indicators.

9. Use Event Dot Color to customize the event indicator color.

10. Enable Dark Mode by setting Dark Mode to yes.

11. Customize Dark Mode colors using:
Dark Background Color
Dark Date Font Color
Dark Header Color
Dark Weekday Color
Dark Border Color

12. Enable Time Picker by setting Enable Time to yes.

13. Configure the Time Picker using:
Time Label
Default Time
Minute Step
Time Alignment
Time Width

14. Use Time Alignment to position the Time Picker:
left
center
right

15. Use Time Width to control the width of the time input in pixels.

16. Enable Popup Mode by setting Enable Popup to yes.

17. Set Popup Button Text to customize the button that opens the calendar.

18. Use Popup Close On Select to automatically close the popup after the user selects a date.

19. Enable Swipe by setting Enable Swipe to yes.

20. Use Swipe Threshold to control how far the user must swipe to change months.

21. Customize the visual style using:
Selection Color
Selection Roundness
Calendar Background
Calendar Roundness
Calendar Padding
Calendar Border Color
Calendar Border Width
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

22. Use the exposed states in your workflows:
selected_date
selected_start_date
selected_end_date
selected_dates
selected_week_start
selected_week_end
selected_time
selected_datetime

23. Use the available workflow events:
date_selected
range_selected
multiple_dates_selected
week_selected
time_selected

24. Use selected_datetime when you need the final selected date combined with the selected time.

25. For booking or scheduling systems, connect Event Dates, Disabled Dates, Minimum Date, and Maximum Date dynamically from your Bubble database.