Better Calendar Time Slots

Better Calendar Time Slots helps you build custom calendar and scheduling interfaces in Bubble. Use it to generate month grids, week rows, appointment time slots, year lists, and age values from dates.

Quick start

1. Install the plugin in your Bubble app.

2. Add the Calendar month element to the page.

3. Create a repeating group with type of content date.

4. Set the repeating group's data source to Calendar month's List of days.

5. Use seven columns and six rows when you want a standard 42-day month grid.

6. Add text elements inside the repeating group cells to display each cell's date.

7. Add workflows that run the Next, Previous, or Reset element actions when users navigate the calendar.

For a weekly calendar, use the Calendar week element instead, set the repeating group's data source to Calendar week's List of days, and use seven columns with one row.

For scheduling slots, add the Calendar time slots element, set the start time, end time, and interval, then display Calendar time slots's Time slots in a repeating group.

Calendar month element

Use Calendar month when you need a complete month grid for a custom calendar UI.

Fields

• Week starts on: Choose whether the month grid starts on Sunday or Monday. Default: Sunday.

• Date to show: Optional date. The calendar opens to the month that contains this date. Leave it empty to use the current month.

• Language: Text locale for month and weekday names. Use locale for the browser/default locale, or enter a locale code such as fr-FR. Default: locale.

States

• List of days: A list of 42 dates for the month grid, including leading and trailing dates from adjacent months.

• Months long: Localized full month names, such as December.

• Months short: Localized short month names, such as Dec.

• Weekdays short: Localized short weekday names, such as Sun.

• Weekdays long: Localized full weekday names, such as Sunday.

• Current date and time: The current date and time, refreshed every second.

• Current month: The last date of the currently displayed month.

• Month numbers: Numbers 1 through 12.

Actions

• Next: Moves the calendar to the next month. This action has no properties.

• Previous: Moves the calendar to the previous month. This action has no properties.

• Reset: Resets the calendar to the month that contains the selected date, or to the current month when no date is set.

Reset fields:

• Week starts on: Choose whether the month grid starts on Sunday or Monday. Default: Sunday.

• Date to show: Optional date. The calendar resets to the month that contains this date. Leave it empty to use the current month.

• Language: Text locale for month and weekday names. Use locale for the browser/default locale, or enter a locale code such as fr-FR. Default: locale.

Calendar week element

Use Calendar week when you need the seven dates in the displayed week.

Fields

• Week starts on: Choose whether the week starts on Sunday or Monday. Default: Monday.

• Date to show: Optional date. The calendar opens to the week that contains this date. Leave it empty to use the current week.

• Language: Text locale for month and weekday names. Use locale for the browser/default locale, or enter a locale code such as fr-FR. Default: locale.

States

• List of days: The seven dates in the currently displayed week.

• First day: The first date in the currently displayed week.

• Last day: The last date in the currently displayed week.

• Months long: Localized full month names, such as December.

• Months short: Localized short month names, such as Dec.

• Weekdays short: Localized short weekday names, such as Sun.

• Weekdays long: Localized full weekday names, such as Sunday.

• Current date and time: The current date and time, refreshed every second.

• Month numbers: Numbers 1 through 12.

• Current week: The date used as the anchor for the currently displayed week.

Actions

• Next: Moves the calendar to the next week. This action has no properties.

• Previous: Moves the calendar to the previous week. This action has no properties.

• Reset: Resets the calendar to the week that contains the selected date, or to the current week when no date is set.

Reset fields:

• Week starts on: Choose whether the week starts on Sunday or Monday. Default: Monday.

• Date to show: Optional date. The calendar resets to the week that contains this date. Leave it empty to use the current week.

• Language: Text locale for month and weekday names. Use locale for the browser/default locale, or enter a locale code such as fr-FR. Default: locale.

Calendar time slots element

Use Calendar time slots to generate a list of dates between a start and end date/time. It can also generate a simple list of years for dropdowns or filters.

Fields

• Start date and time: Optional date. The first date and time to include in the generated time slots.

• End date and time: Optional date. The last date and time for the generated time slot range.

• Interval (minutes): Optional number. The number of minutes between generated slots. Default: 15. This must be greater than 0.

• Start year: Optional number. The first year to include, such as 2018.

• End year: Optional number. The last year to include, such as 2030. It must be the same as or later than Start year.

States

• Time slots: Generated date/time values between Start date and time and End date and time, spaced by Interval (minutes).

• Years: Generated numbers between Start year and End year, inclusive.

Notes

• If the end date/time does not land exactly on the interval, the plugin still includes the end date/time as the final slot.

• If the start date/time or end date/time is missing, invalid, or the end is earlier than the start, Time slots is empty.

• If Interval (minutes) is 0, negative, blank, or invalid, Time slots is empty.

• If either year is missing or End year is earlier than Start year, Years is empty.

Calculate age from date of birth element

Use Calculate age from date of birth when you need a person's age in full years from a date input.

Field

• Date of birth: Required date. The date used to calculate age in full years.

State

• Age: The calculated age in full years.

Notes

• The age updates when the Date of birth value changes.

• If the date is missing, invalid, or in the future, Age is empty.

Example workflows

Build a monthly booking calendar

1. Add Calendar month to the page.

2. Set Week starts on to match your app's calendar convention.

3. Create a repeating group with type of content date.

4. Set the data source to Calendar month's List of days.

5. Add a cell condition or text format for dates that are not in Calendar month's Current month.

6. Add buttons or icons for previous and next navigation.

7. In the previous button workflow, run Previous on the Calendar month element.

8. In the next button workflow, run Next on the Calendar month element.

9. To jump back to the current month, run Reset and leave Date to show empty.

Generate appointment times

1. Add Calendar time slots to the page.

2. Set Start date and time to the opening date/time.

3. Set End date and time to the closing date/time.

4. Set Interval (minutes) to the booking duration, such as 30.

5. Create a repeating group with type of content date.

6. Set the data source to Calendar time slots's Time slots.

7. Format each date as a time, such as 08:30.

Troubleshooting

The repeating group is empty:

• Check that the repeating group's type of content is date.

• Check that the data source uses the plugin element's exposed state.

• For time slots, make sure Start date and time, End date and time, and Interval (minutes) are valid.

• For time slots, make sure the end date/time is not earlier than the start date/time.

The calendar starts on the wrong weekday:

• Check Week starts on on the element.

• If you run Reset, check Week starts on on the action too.

Month or weekday names are in the wrong language:

• Check Language.

• Use locale for the user's browser/default locale.

• Use a valid locale code, such as en-US, en-GB, or fr-FR, when you need a specific language.

• If the browser does not support the locale code, it falls back to the default locale.

The age is empty:

• Make sure Date of birth is set.

• Make sure the value is a date, not text.

• Future dates return an empty value.

Limits

• This plugin is web-only.

• The calendar elements publish date lists and labels. You still design the visible calendar UI with Bubble repeating groups, text, styles, and workflows.

• The plugin does not store bookings, check availability, handle time zones across users, or prevent double bookings by itself.

• Time slots are generated in the user's browser from the dates you provide.

• Use Bubble privacy rules and workflow validation for any real booking or scheduling data.