Display a list of date range according to their timezone on a calendar

Hi everyone,

I have seen plenty of Topics created regarding this topic but didn’t get the best way to do the following:

Display in a calendar a list of Calendar Dates according to their timezone. Each Calendar Dates contains the following fields:

  • Date start
  • Date end
  • Date range
  • Timezone (fixed time zone collected when the user create a new calendar date)

What I can do at the moment, is to display this list according to the current user time zone. However, I want the calendar to display the same exact dates and times from anywhere in the world.
Exemple:
Let’s say user1 enters his availability in his current time zone:
12 septembre 7pm - 13 september 2pm
And
15 september 5pm - 17 september 4pm

I want User2 ,who is in a different timezone to see on her calendar the exact same dates and times:
12 septembre 7pm - 13 september 2pm
And
15 september 5pm - 17 september 4pm

Could you please advise on which method/API to use to implement that in the fastest and cheapest way?
I am using the full calendar plug in but there is no such options.
I was thinking to maybe recalculate all the calendar dates before displaying them in the calendar dates but not sure if that is the most efficient way… That means using a custom formating to each dates with the time zone collected when the user create a new calendar date as parameter. The dates would then be converted into a text (with the desired time). Then I would need to reconverted the list of text to a list of date to use it in my full calendar as the input list.

I am sure there is a better way to do that out there.
Thanks a lot !

Yeah. My calendar plugin does that. If you’re interested, I can help you set this up!

Thanks @jared.gibb . Where can i find your plug in ?

https://jared-gibb.gitbook.io/fullcalendar-plugin-suite/install/installation

Do a plugin search for Full Calendar Scheduler Suite

As a side note. I’m finishing a project in the next couple days and will have full docs for the timeslot generator at the end of the week.

For the event viewing part, you’d simply enter your events and then set the timezone on the calendar to be that or their person who created the events!

Ok seems like a pretty versatile calendar!

I didnt had time to go through all the docs but I have this question:

Let’s say User1 has a bike that is NOT available on:
Date range1: 13 sept 8am - 14 sept 5pm (in timezone 1)

Date range1 is displayed on the calendar of user2 who is in timezone2. User2 didnt check the calendar properly and enter the following dates to book the bike:
Date range2: 12 sept 11am - 13 sept 9am (in timezone 2)

Will your plugin be able to trigger a workflow detecting that date range2 overlaps date range1?

In other words, is it possible to compare or apply calculations on two different date ranges in two different time zones? And extensively, will your plugin be able to do the same with lists of date ranges with different time zones?

I am not 100% sure if my question makes sense though as I dived in date range and timezone concepts recently…
Thanks in advance for your anwser

Hmm

So if I have a bike and you know when it’s generally available AND you know date ranges for when it’s unavailable,

The plugin can output a list of available time intervals of any duration, though you need to set that part up.

Would an element/action that can compare a single range against a lost be helpful for you? I’m sure this is already easy in bubble but I haven’t worked it out yet.

Compare, yes. Do calculations, I don’t think so. Maybe describe this a bit more.

Like say I have a bike for rent on an hourly basis between 9AM-5PM on the east coast of the us. I can show available time slots in any other relevant timezone.

So users on the west coast (3-hours behind) would see the bike as available between 6AM-2PM.

Then no matter what timezone it’s rented in, any bookings would not show up, only available rentable time slots.

So what the plugin does is make a list of date/time ranges based on your settings and then filters them agains any current bookings. Does that make sense?

The plugin will output the times slots in any timezone too. It’s handy

Yep comparing date ranges is fine as long as they are in the same time zone. What I quiet don’t understand yet is how to compare date ranges that are in different time zones.

If I am not mistaking, if user1 is using the app all the dates in the DB will be display in timezone1
And if user2 is using the app all the dates in the DB will be display in timezone2.

Now, if user2 is using the app with the calendar dates displayed in timezone1, and I want him to enter date ranges in his timezone2 and compare it with the dates in the calendar in timezone1. Will that be possible?

When I used the term calculation, it was in the sense of making operation between dates ranges (such as merge lists of date range, :add, :minus date range…)

No dates are stored with timezones. They are stored as a time stamp with an offset of 0 or UTC time.

Then, only when the browser recieves the time stamp from the dB is a timezone/time shift applied to the date/time stamp

Check out the demo app at poop123.bubbleapps.io

Sign up. Create an event. See the booking page and make appointments and play with the timezone settings.

Actually, I would like the user on the west coast to see the availability displayed as it is on the east coast.

It can do that too!

Look st this page.

Jaredgibb.bubbleapps.io/recurring_events

There’s two places to input a timezone

Set them both to the same, it will force times to show in whatever output timezone you want.

It’s been a long time so I don’t remember the configuration exactly but it’s definitely doable.

Typically you’d set viewing zone to be your users timezone who is booking the resource but here you’d set it to the resources timezone instead

Ok, displaying a date is customable according to the time zone. And if again I am not mistaking, by customizing it, the date becomes a text which make it not usable for comparison.

My question is more on comparing two date ranges that are in different timezones. Let me put it that way:

  1. When date range1 is extracted from the database, I want bubble to convert it to timezone1 (and keep it as a Date range not a text)
  2. When date range2 is extracted from the database, I want bubble to convert it to timezone2 (and keep it as a Date range not a text)
  3. Now that I have these 2 dates ranges as Date in 2 different timezone, I want bubble to compare: is date range1 overlapping date range2

Thanks for the links

It does this exact thing!

If you’re interested, I’d love to set you up on a free trial of the plug-in. I can give you two weeks for free and help you get things set up. To do this, you just need to share an app ID with me for the app you wish to install the plug-in to.

Thanks for the offer @jared.gibb for the moment I will move on with what I set up which works fine under certain limitation. But once I will feel like upgrading I will come back to you