Timezone in ui calendar

[Jaaichandran]

I am using the ui-calendar for displaying the events in my project. My calendar events contains only "Add" and "Edit" events, those days contains events shows the Edit event on it and those which don't have one shows Add. I have issues with the timezone, when I click on a particular day, the dayClick event fires and shows a popup. Now when I change my system timezone, and click on a day then the previous date is selected by the dayCick event.

How can I fix this ?

[rdeslonde-eichleay]

Why would you change your system timezone? What use case would a user who is using the calendar decide to change their timezone?

[Jaaichandran]

@rdeslonde-eichleay I don't know what I am doing wrong, my client is in some other timezone, so I need to make the calendar work in his timezone. So I just tried out several timezones, but in some timezones the calendar dayClick event is returning the previous day. I am really stuck with this.

[rdeslonde-eichleay]

You need to close the browser completely, then change your system timezone, then open your app again. Try that and see if it works correctly. I know this works because I've done it many times (changing my timezone so I can see if events move on the calendar correctly).

[franklindner]

A use case would be to make / show reservations from a different timezone. Lets say I am on New York but want to make a reservation for a Massage in Los Angeles for after I land there later today. Ideally the calendar would show blocked / open time slots for the Los Angeles local time not my New York time. I usually mitigate that problem by adapting event times prior to adding them to the calendar but it would be easier to just specify the timezone for the whole calendar.

[patgauvingeek]

When I save in UTC in my database, I have to convert it back to the local timezone to see the events on the proper day. It's full day event so I use local midnight in my database which is different depending on day-night saving and timezone. Until now everything is perfect. I then registered the dayClick event do add full day even in my database. The moment I receive is the day I clicked, so I tried to convert it in UTC using moment-timezone and find out that the moment was already in UTC. I think this is the part that is wrong. The moment should be in the local timezone at midnight the day I clicked which in my case will give 5 AM in UTC after using date.tz("UTC").

EDIT:

I found a workaround.

$scope.uiConfig = {
      calendar:{
        dayClick: function( date, jsEvent, view ) {
          // The date is good but in the wrong timezone (UTC). This convert the timezone to the local timezone.
          var dateFixedTimezone = moment(date.format("YYYY-MM-DD HH:mm:SS"));
          // ...
        }
      }
    };