mattlewis92/angular-bootstrap-calendar calculating Wrong Dates on different Timezone

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]

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.

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