3

I am using this calendar https://github.com/mattlewis92/angular-bootstrap-calendar for showing events and time slots for people all over the world. During sign up, every user has to set his timezone and then my application uses this timezone for further date computation rather than client machine timezone.

The problem is that when I make user timezone default using moment.tz.setDefault(timezone) and change the machine's timezone, the calendar calculates dates wrongly.

Here is my excerpt of my code:

moment.tz.setDefault($rootScope.timezone)
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate(); 
vm.cellIsOpen = true;

Attached is the screenshot:

[Screenshot]

enter image description here

You can see that user's timezone is currently Asia/Karachi +5 and my machine's timezone is Beijing +8. Today's date is 8 September and the day is Friday, but on the calendar 8 September is showing as a Saturday instead of Friday.

FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
Muhammad Imran
  • 58
  • 8

2 Answers2

1

It would appear that this particular UI control does not support selecting a time zone. Simply using moment.tz.setDefault is not good enough, because everything the control is doing both internally and in its external API is using Date objects, which cannot represent arbitrary time zones. In other words, the author of that control would have to remove all .toDate() calls and use Moment objects as the primitive in the control instead of Date objects. That would be a breaking change for them.

I suggest filing an issue in that project's GitHub repository, and reference this page.

Matt Johnson-Pint
  • 230,703
  • 74
  • 448
  • 575
1

mwl-calander did not provide support for timezone, you can use full calander

https://fullcalendar.io/ Demo https://fullcalendar.io/js/fullcalendar-2.9.1/demos/timezones.html

Its angular directive can be found at https://github.com/angular-ui/ui-calendar

saad
  • 1,354
  • 1
  • 14
  • 21