Timezone support for "current time" bar

[wolph]

It would be very useful to be able to display a different timezone for the "current time" feature.

As far as I can see it shouldn't be all that hard to implement. It would require changing these 2 sections to support an offset:

https://github.com/antoniandre/vue-cal/blob/79069f2f9e0991e9568d6a20318630377ed29692/src/vue-cal/index.vue#L289

https://github.com/antoniandre/vue-cal/blob/79069f2f9e0991e9568d6a20318630377ed29692/src/vue-cal/index.vue#L1098-L1107

Or alternatively only in the cell:

https://github.com/antoniandre/vue-cal/blob/79069f2f9e0991e9568d6a20318630377ed29692/src/vue-cal/cell.vue#L281-L283

[antoniandre]

Hi @WoLpH, Thanks for pointing out the pieces of code involved. But why do you want to have a different timezone for the current time line? The whole Calendar is already based on user's computer clock, do you want to display the calendar of another country not the user's one?

If so, changing the now line would not be sufficient as it is tied to today's date: the whole calendar internal time should be changed. For instance, when watch-real-time is on and the now line moves by itself, when crossing midnight the today's date should become the following day.

[wolph]

Hi @WoLpH, Thanks for pointing out the pieces of code involved. But why do you want to have a different timezone for the current time line? The whole Calendar is already based on user's computer clock, do you want to display the calendar of another country not the user's one?

Exactly, I'm trying to use it to schedule meetings across the globe. So it's very useful to see the time in that timezone.

If so, changing the now line would not be sufficient as it is tied to today's date: the whole calendar internal time should be changed. For instance, when watch-real-time is on and the now line moves by itself, when crossing midnight the today's date should become the following day.

I understand the issue. Would it be an option to have a single overridable function for the new Date() call so the offset could be added to that in all cases?

[lupanom]

I have the same need, because in our application we need to be able to change the calendar timezone based on user preferences.

[bertog]

Hi! We have the same problem for our application, we really need to be able to change calendar timezone. Please, let me know if the feature will be carried out.

[antoniandre]

Hi everybody, I understand the need and it's a valid candidate for a new feature. This involves big rework of the calendar, I'll have a closer look soon for feasibility.

[wollio]

Hi, I can offer some help if needed. Could need that feature too for a project. Is it an option to add a date utility library to help with the complexity of timezones? In my opinion chart.js handles this quite well.

[Twoody]

@antoniandre Isn't this doable with a slot and just letting the user have a computed/data on their component 🤔

[Twoody]

@wollio vuecal doesn't rely on any third party libs.

[antoniandre]

I @wollio, thanks for suggesting your help. As @Twoody said, Vue Cal is dependency-free, and handling timezone offsets natively is very easy. We would not need an extra library just for that, as all the date-time related stuffs is already done using the native Date class in Vue Cal.

If you would like to give a hand in building this feature you are more than welcome, that would be awesome. Please raise a PR in a branch and don't hesitate to contact me via email if you need (find my email in the package.json file).

It shouldn't be too bad to implement but I am lacking time at the moment.

Let me know if you start something, in case myself or somebody else want to help on that as well. Before submitting a PR please test your work in the different cases of the documentation, and comply to the project code style linting.

Cheers!

Thanks @Twoody for support! 👍 I don't think a slot is sufficient as all the pieces of the calendar must behave consistently and be aware of the same state variables, for this case for instance:

If so, changing the now line would not be sufficient as it is tied to today's date: the whole calendar internal time should be changed. For instance, when watch-real-time is on and the now line moves by itself, when crossing midnight the today's date should become the following day.

[CavalcanteLeo]

Hi @WoLpH, Thanks for pointing out the pieces of code involved. But why do you want to have a different timezone for the current time line? The whole Calendar is already based on user's computer clock, do you want to display the calendar of another country not the user's one?

If so, changing the now line would not be sufficient as it is tied to today's date: the whole calendar internal time should be changed. For instance, when watch-real-time is on and the now line moves by itself, when crossing midnight the today's date should become the following day.

i need that so bad, i can only use this lib if i can set the timezone as my needs..

Eg: The user(manager) is in one timezone, but he's handling a booking for his company that is located in another timezone.

would be even greater if there was 2 lines.. one for business timezone, another of the current user timezone...

If it's too complicated, then business timezone is the unique mandatory for me

[vesper8]

Hrm, so I appear to have figured out a solution. Thanks to @WoLpH for pointing out the places that need to be updated.

I'm simply extending vue-cal and overriding those two places with a hardcoded timezone.

So I created a new component which I called VueCalExtended.vue:

<script>
import VueCal from 'vue-cal';

export default {
  extends: VueCal,

  data() {
    return {
      now: new Date(new Date().toLocaleString('en-US', { timeZone: 'Europe/Sofia' })),
    };
  },

  methods: {
    /**
     * Only if watchRealTime is true.
     * Pull the current time from user machine every minute to keep vue-cal accurate even when idle.
     * This will redraw the now line every minute and ensure that Today's date is always accurate.
     */
    timeTick() {
      // Updating `now` will re-trigger the computed `todaysTimePosition` in cell.vue.
      this.now = new Date(new Date().toLocaleString('en-US', { timeZone: 'Europe/Sofia' }));
      this.timeTickerIds[1] = setTimeout(this.timeTick, 60 * 1000); // Every minute.
    },
  },
};
</script>

And then instead of importing the regular vue-cal in other places:

components: {
    VueCal: () => import('vue-cal'),
},

I instead import my extended component:

components: {
    VueCal: () => import('@/components/extended/VueCalExtended'),
},

And that's it, no matter what the user's timezone is, the scheduler shows everything in the hardcoded timezone

[green-pigeon]

Hi, @vesper8 Thank you a lot for the code. It works great if today is the same date in the desired timezone and the computer timezone. However if the two time zones have more than 12 hours difference there is a case that today is different date. And the "current time" line is shown in the today in the system timezone. Also the .today class of the calendar cell is in the system timezone.

Example: Computer timezone - Europe/Sofia +3 Desired timezone - America/New_York -4 Current time in Sofia - 5am 13th April. This is 10pm 12th April in New York. The "current time" bar is displayed at 10pm but on 13th April (it should be on 12th).

Can anyone help me with this, please?

[ceyhuncicek]

Hi, @vesper8 Thank you a lot for the code. It works great if today is the same date in the desired timezone and the computer timezone. However if the two time zones have more than 12 hours difference there is a case that today is different date. And the "current time" line is shown in the today in the system timezone. Also the .today class of the calendar cell is in the system timezone.

Example: Computer timezone - Europe/Sofia +3 Desired timezone - America/New_York -4 Current time in Sofia - 5am 13th April. This is 10pm 12th April in New York. The "current time" bar is displayed at 10pm but on 13th April (it should be on 12th).

Can anyone help me with this, please?

I actually had same issue. Using calendar in another timezone indeed requires a lot of changes. However, for this specific problem I made two new methods with extending @vesper8 solution.

todayFormatted() {
 const now = this.now;
 const todayF = ''
 .concat(now.getFullYear(), '-')
 .concat(now.getMonth(), '-')
 .concat(now.getDate());
 return todayF;
},
isToday(date) {
 return (
 ''
 .concat(date.getFullYear(), '-')
 .concat(date.getMonth(), '-')
 .concat(date.getDate()) === this.todayFormatted()
 );
},

After that I override viewCells() computed function which creates cells and controls today cell. In this computed function I replaced current ud.isToday function with my new isToday method. This fixed the wrong date issue.

This solution only fix this today cell problem. Using different timezones properly needs a lot of more overrides on functions.

[malay-medianv]

So it is not possible to show and behave the calendar as if it is operating in a different timezone?

E.g. Appointments person Jane is traveling to Florida for a month and will be working remotely for the office that is in California. When Jane signs in from browser in Florida, she has to see appointment times as if she is looking at it from California. Also when click on dates fire, those times as well should be as if they are being fired from California.

[Dharshan-J]

Implementing this feature is crucial as it addresses the challenge of displaying events accurately for our users across different time zones. Currently, the mismatch in time zones makes it difficult to present events in a meaningful and relevant way.