Add to Google Calendar render link not showing user's local time

Question

I am able to create an event using this link to google calendar. but time is coming as UTC i think (its 5.30 hours ahead the time I wanted on event)

Example: This link will create an event but it shows time from 12.30pm to 4pm. This event supposed to be 6.30am to 10am.

According to this link, removing Z from time string should set user's local time in event.

to use the user's timezone: 20201231T193000/20201231T223000 (don't specify a timezone);

to use UTC timezone, convert datetime to UTC, then use Z suffix: 20201231T193000Z/20201231T223000Z;

I have also tried the same solution from this link but still event time is not coming as it. its getting converted in the link.

const startDateTimeFormattedGoogle = eventStartDateTime ? eventStartDateTime.format(
        "YYYYMMDDTHHmmss"
      ) : null;
      const endDateTimeFormattedGoogle = eventEndDateTime ? eventEndDateTime.format(
        "YYYYMMDDTHHmmss"
      ) : null;
      const addToGoogleLink = `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${startDateTimeFormattedGoogle}/${endDateTimeFormattedGoogle}&location=${data.location}&text=${data.title}`;

Update:

console.log(88888, moment(eventStartDateTime).format('YYYYMMDDTHHmmssZ'),
result: 88888 20210430T123000+00:00 20210430T160000+00:00

console.log(111111, moment(eventStartDateTime).format('YYYYMMDDTHHmmss'),
        moment(eventEndDateTime).format('YYYYMMDDTHHmmss'))
result : 111111 20210430T123000 20210430T160000

result url: https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20210430T123000+00:00/20210430T160000+00:00&location=Calgary, Downtown&text=The 2020 Festival

Answer 1

That's not how timezones work. When you remove "Zulu time" (+00:00 offset, i.e. UTC) suffix from the string, the time you provided is used by the locale-aware system. This results in the time being displayed to be the same as the one provided:

Offset	Raw Value	Locale-unaware	Locale-aware
+03:00	20210430T123000	2021-04-30 12:30:00	2021-04-30 12:30:00

If you keep the suffix, it means the time you provided is in the Universal Time Coordinated (or UTC) format. The time is then adjusted accordingly by the locale-aware system such as Google Calendar (provided the user did not disable timezone adjustment):

Offset	Raw Value	Locale-unaware	Locale-aware
+03:00	20210430T123000Z	2021-04-30 12:30:00	2021-04-30 15:30:00

Next, the YYYYMMDDTHHmmSSZ is a valid Moment.js format string, so should you plug it directly, the token semantics comes into play:

Token	Repetitions	Meaning	Example
Y	4	Long (4-digit) year format	2021
M	2	Short month format, padded to 2 digits if necessary	01..12
D	2	Day of Month format, padded to 2 digits if necessary	01..31
T	1	literal T, no special formatting meaning, so no need to escape	T
H	2	24-hour hour format, padded to 2 digits if necessary	00..23
m	2	Minutes format, padded to 2 digits if necessary	00..59
S	2	Fractional seconds format	00..99
Z	1	Time Zone, sign + 4 digits without colon	+0000, -0000

As you can guess, the YYYYMMDDTHHmmssZ format string avoids the "fractional seconds" caveat, but leaves Z unescaped and thus treated as a timezone designator. This is solved by proper escaping, as per docs:

To escape characters in format strings, you can wrap the characters in square brackets.

Try it for yourself (FYI, since you are using Moment.js, if you are not strictly forced to use it, don't, it is officially deprecated in favour of other libraries until the Temporal proposal is shipped):

(() => {
  const data = {
    location: "Calgary, Downtown",
    title: "The 2020 Festival"
  };

  const eventStartDateTime = new Date();
  const eventEndDateTime = new Date();

  const startDateTimeFormatted = moment(eventStartDateTime).format("YYYYMMDDTHHmmss[Z]");
  const endDateTimeFormatted = moment(eventEndDateTime).format("YYYYMMDDTHHmmss[Z]");

  const link = `https://calendar.google.com/calendar/render?action=TEMPLATE&dates=${startDateTimeFormatted}/${endDateTimeFormatted}&location=${data.location}&text=${data.title}`;

  const anchor = document.createElement("p");
  anchor.textContent = link;

  document.body.append(anchor);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>