nzoom

Bubble Plugin: Date and Time Range Generator

If you’re building anything to do with a calendar or booking service, then this is the plugin for you.

Leverage the power of date ranges! The generation of the date ranges happens on page load, or as an input updates – nothing is stored in the database. You can then use Bubble’s powerful operators & comparisons feature to see which of the date ranges overlap with current appointments stored in the database. This means you can change your available/busy schedule on the fly and offer multiple meeting durations and the unavailable date ranges are seamlessly updated.

There are ZERO external dependencies. It doesn’t rely on moment.js – everything is self-contained to reduce risk and deliver the best performance.

It also support’s Bubble’s inbuilt time zone and time/date formatting functionality.

Demo of Date and Time Range Generator Plugin

Visit: https://nzoom.com/demo/date-time-generator-bubble-io

What does the Date and Time Range Generator Plugin do?

For a specified date, this plugin will generate a list of time ranges at a given interval, allowing you to use the built-in Bubble date range operations to power your booking app.

As a bonus, it will also generate a list of date ranges for each day in the month of the selected date.

How does the Date and Time Range Generator Plugin work?

Install the Time & Date Range Generator plugin, then add the element to the page.

In the plugin set the current date and time and the interval (in minutes) you’d like to generate ranges for. These can be static values, or linked to inputs or search outputs.

The element will generate the following:

  • List of date ranges with a start date and end date for the specified date.
  • List of date ranges for each day in the month of the specified date.
  • First date of the month for the specified date
  • Last date of the month for the specified date

Here’s an example:
For a given day, example March 15, 2023, it will generate three lists of date ranges:

  1. A list of time/date ranges for the specific day, starting at a specified time, at the interval you choose
    e.g. 90 minute intervals, starting at 7pm.
  • 2023-03-15 7:00pm – 2023-03-15 8:29pm
  • 2023-03-15 8:30pm – 2023-03-15 9:59pm
  • 2023-03-15 10:00pm – 2023-03-15 11:29pm
  • 2023-03-15 11:30pm – 2023-03-16 12:59am
  1. A list of date/time ranges by day for the month of that date.
  • 2023-03-01 12:00am – 2023-03-01 11:59pm
  • 2023-03-02 12:00am – 2023-03-02 11:59pm
  • 2023-03-03 12:00am – 2023-03-03 11:59pm
  • 2023-03-04 12:00am – 2023-03-04 11:59pm
  • …
  1. A list of date/time ranges by month for the year of that date
  • 2023-01-01 12:00am – 2023-01-31 11:59pm
  • 2023-02-01 12:00am – 2023-02-28 11:59pm
  • 2023-03-01 12:00am – 2023-03-31 11:59pm
  • 2023-04-01 12:00am – 2023-04-30 11:59pm

In this example above, you can create a repeating group of times, using the start and end time of each range.

Or you can get creative using filters to control the output of the ranges.

Use Bubble’s Operators & Comparisons feature to check for availability

You’ll want to get familiar with these concepts to get the most out of the plugin:

contains range

Takes a first range and a second range. Returns yes if the first range contains the second range. “Contains” means that the start of the second range is greater than or equal to the start of the first range, and the end of the second range is less than or equal to the end of the first range. So, if the two ranges are the same, then this will return yes.

contains

Takes a range and a single date. Returns yes if the date is contained by the range. It is contained if it is greater than or equal to the start of the range and less than or equal to the end of the range.

is contained by

Takes a first range and a second range. Returns yes if the first range is contained by the second range. “Contains” means that the start of the first range is greater than or equal to the start of the second range, and the end of the first range is less than or equal to the end of the second range. So, if the two ranges are the same, then this will return yes.

overlaps with

Takes a first range and a second range. Returns yes if there are any dates contained by both ranges. So, if the end of the first range is the start of the second range or vice versa, then this will return yes.

is after

Takes a first range and a second range. Returns yes if the start of the first range is strictly greater than the end of the second range.

is after (point)

Takes a range and a date. Returns yes if the start of the first range is strictly greater than the date.

is before

Takes a first range and a second range. Returns yes if the end of the first range is strictly less than the start of the second range.

is before (point)

Takes a range and a date. Returns yes if the end of the first range is strictly less than the date.

Official Bubble Date and Time Range Generator Plugin Page

https://bubble.io/plugin/date-and-time-range-generator-1676136322019×603901259390124000

Need something more?

If you need something else, let us know!
plugins [at] nzoom.com