Sp-dev-fx-webparts: SharePoint Event List and React Calendar Webpart hour difference

[schao2020]

react-calendar

@joaojmendes @derhallim @hugoabernier @nanddeepn @Abderahman88

I am completely new to GitHub and unfamiliar with SharePoint Framework webpart development, so I apologize in advance for my lack of knowledge in this area or using incorrect terms in the explanation of the issue. A colleague helped downloaded and packaged the React Calendar Webpart (as is ex. didn't make any changes to the code) from GitHub and uploaded the package into the App Catalog of our organization tenant. This was in late October 2020.

Mid Nov 2020, after adding the app to a site collection (Communication site) and adding the Calendar webpart to a SharePoint Modern page, I used the UI to connect it to the corresponding Event list on the same site collection. So far so good. However, when I review the details displayed in the Calendar webpart vs. the actual time entered in the event list, I noticed that there seems to be an 1 hour difference between items displayed in Calendar webpart and the corresponding item viewed in the SharePoint Event list directly. The same is seen when using the Calendar webpart to create a new item, the new item is an hour behind when viewed in the SharePoint. Below is the screenshot for clarification.

I checked the time zone configuration of the site collection and the Calendar webpart, and both are reflecting the same to be:(UTC-08:00) Pacific Time (US and Canada). Although without looking at the original uploaded App package, whether the code is indicating the correct time zone.

Is this related to the Daylight Saving TIme that happened on Nov. 1? Or what else I should be checking to troubleshoot thru this? I look forward to any tips the community can suggest. Thanks!

Question

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Abderahman88]

Hi @schao2020 ,

No need to apologize, every question is welcome. 😄

I'll check it out.

@hugoabernier Can you assign to me, please?

[Abderahman88]

Bug confirmed. I'll work on it.

[schao2020]

Thank you so much for the reply and identifying the issue I've explained so quickly! I will wait for more updates once I see the bug has been fixed :)

[Abderahman88]

From my findings, it has to do with that specific timezone (UTC-08:00) Pacific Time (US and Canada).)
I tested it with another timezone ((utc+01:00) Brussel, Kopenhagen, Madrid, Parijs)) and I get the correct times.

I think, it's an issue with this calculation (DST change?):

public async getSiteTimeZoneHours(siteUrl: string): Promise<number> {
    let numberHours: number = 0;
    let siteTimeZoneBias: number;
    let siteTimeZoneDaylightBias: number;
    let currentDateTimeOffSet: number = new Date().getTimezoneOffset() / 60;

    try {
      const siteRegionalSettings: any = await this.getSiteRegionalSettingsTimeZone(siteUrl);
      // Calculate  hour to current site
      siteTimeZoneBias = siteRegionalSettings.Information.Bias;
      siteTimeZoneDaylightBias = siteRegionalSettings.Information.DaylightBias;

      // Formula to calculate the number of  hours need to get UTC Date.
      // numberHours = (siteTimeZoneBias / 60) + (siteTimeZoneDaylightBias / 60) - currentDateTimeOffSet;
      if (siteTimeZoneBias >= 0) {
        numberHours = ((siteTimeZoneBias / 60) - currentDateTimeOffSet) + siteTimeZoneDaylightBias / 60;
      } else {
        numberHours = ((siteTimeZoneBias / 60) - currentDateTimeOffSet);
      }
    }
    catch (error) {
      return Promise.reject(error);
    }
    return numberHours;
  }

Can someone take a further look at it? (not so familiar how SP does the datetime-calculations 😃 )

[PathToSharePoint]

Having done some work with time calculations, I see one issue with this code: it calculates the time difference between UTC and the site for today (new Date()). All times in the same DST will have the same time difference, but times in a different DST will be off by one hour.

I don't know if this answers the current thread, but that would be a concern anyway. I'll try to run a test this week.

[schao2020]

Not sure if it's related or could be of help to this time offset issue when daytime saving is involved in the selected timezone, but came across this article (slightly outdated) but seems to address something similar?
https://www.sharepointwidgets.com/2017/11/time-based-query-issue-in-sharepoint.html

[PathToSharePoint]

I did some testing and looked at the code.

First, I can confirm the offset I was talking about due to DST. So 8am Pacific in December will be stored as T16:00:00Z, while 8am Pacific in August will be stored as T15:00:00Z. Nothing surprising here, it just means that the time adjustment should be different depending on the date of the year.

I am not familiar with Full Calendar (the library used to render the calendar), I just know that it is powerful and I suspect that it knows how to handle DST.

So at this point the parts I am not clear about are all the lines that use the site URL. For example at line 466 of spservices.ts:

      // Get Regional Settings TimeZone Hours to UTC
      const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);

What I don't understand is why we care about the site. We are dealing with a client side solution, the dates in UTC are directly retrieved by the page via the REST API, so the site should not matter.

@Abderahman88 I know that you made changes to the code recently, do you understand the purpose of that line?

[joaojmendes]

Hello,

Each site has own regional settings , different date and time of your local (PC), and you must have to have this in consideration,

I can have a site with timezone of Portugal and other from Japan and the date and time is different and it is has impacto on list events created in each site.

The first thing is to get regional settings of site.

  // Get Regional Settings TimeZone Hours to UTC

  const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);

Thanks!

From: PathToSharePoint [e-mail]
Sent: Thursday, December 17, 2020 6:35 AM
To: pnp/sp-dev-fx-webparts [e-mail]
Cc: João Mendes [e-mail]; Mention [e-mail]
Subject: Re: [pnp/sp-dev-fx-webparts] SharePoint Event List and React Calendar Webpart hour difference (#1646)

I did some testing and looked at the code.

First, I can confirm the offset I was talking about due to DST. So 8am Pacific in December will be stored as T16:00:00Z, while 8am Pacific in August will be stored as T15:00:00Z. Nothing surprising here, it just means that the time adjustment is different depending on the date of the year.

I am not familiar with Full Calendar (the library used to render the calendar), I just know that it is powerful and I suspect that it knows how to handle DST.

So at this point the parts I am not clear about are all the lines that use the site URL. For example at line 466 of spservices.ts:

  // Get Regional Settings TimeZone Hours to UTC

  const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl);

What I don't understand is why we care about the site. We are dealing with a client side solution, the dates in UTC are directly retrieved by the page via the REST API, so the site should not matter.

@Abderahman88https://github.com/Abderahman88 I know that you made changes to the code recently, do you understand the purpose of that line?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/pnp/sp-dev-fx-webparts/issues/1646#issuecomment-747241910, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AC7YHVN4ZH36PC7SUVNXQBTSVGRBZANCNFSM4UXP6WZA.

[PathToSharePoint]

@joaojmendes sorry I must be missing something. I understand that sites can be on different timezones, but why does it matter? The times are stored in UTC anyway regardless of the timezone (and regardless of daylight saving).

IfI remove const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl); from my test, I get the correct dates on the calendar.

[joaojmendes]

The events date and time is showing in calendar is based on the current Date and time of site, not local date and time ….
Try to change the regional settings to Portugal, create an event and see the date and time is showing in calendar…

From: PathToSharePoint [e-mail]
Sent: Thursday, December 17, 2020 3:38 PM
To: pnp/sp-dev-fx-webparts [e-mail]
Cc: João Mendes [e-mail]; Mention [e-mail]
Subject: Re: [pnp/sp-dev-fx-webparts] SharePoint Event List and React Calendar Webpart hour difference (#1646)

@joaojmendeshttps://github.com/joaojmendes sorry I must be missing something. I understand that sites can be on different timezones, but why does it matter? The dates are stored in UTC anyway regardless of the timezone (and regardless of daylight saving).

IfI remove const siteTimeZoneHours: number = await this.getSiteTimeZoneHours(siteUrl); from my test, I get the correct dates on the calendar.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/pnp/sp-dev-fx-webparts/issues/1646#issuecomment-747515515, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AC7YHVOMN3NTNGP6HBM5IE3SVIQVDANCNFSM4UXP6WZA.

[PathToSharePoint]

@joaojmendes sorry, my mistake! The time is stored in UTC, but indeed the conversion from the form and the display in calendar view are done using the site's timezone.

Are you seeing the issue with the Pacific timezone, just like we do?

[PathToSharePoint]

I did a test with EST and the calendar is also off by one hour.

I suspect the issue is with the way DaylightBias is handled. The only reference I could find is this post where DaylightBias is only counted during the DST period:
https://github.com/SharePoint/PnP-JS-Core/issues/659#issuecomment-350201514

The post goes on to suggest another method for web date conversion, I haven't had a chance to test it yet:
/_api/web/RegionalSettings/TimeZone/utcToLocalTime

[schao2020]

Thank you so much everyone for the troubleshooting so far! I look forward to hearing further to see whether the findings from @PathToSharePoint can resolve the DST issue.