[HOW-TO] Create a custom Calendar using repeating group

If you have two date objects (date1 and date2) that represent the start and end of an event, those define a date range (lets call it eventrange1). If you have a third date (let’s call it calendar_date), the following expression is true if calendar_date is within the event range:

eventrange1 contains point calendar_date

Date ranges are not a native JavaScript data type, they are specific to Bubble, but are conceptually used in other applications and libraries. In Bubble, a date range is constructed using the ← range → operator like so:

date1 <- range -> date2

This returns an object of date range type. You can either construct date ranges and store them in your database as that type, or you can (USUALLY) construct them on-the-fly as above. So we could also write the first expression as:

date1 <- range -> date2 contains point calendar_date

If you add a Range field (of type date range) to your “Event” data type, you can do range-based constraints and comparisons like this:

Of course this implies that when you construct your Event objects, you (somewhere along the way) set their Range field. As an example:

If you don’t have ranges pre-constructed, you can’t do rangewise comparisons server-side (in a constraint). However, you can do them client side using the “Advanced” :filtered condition. Like this:

^^^ Keep in mind that this is all done client side, so what’s happening is all Events are being downloaded to the browser and then being iterated over by the :filter.

2 Likes