🐛 Bug: Incorrect Times/Timezones when fetching events from the Community calendar

[benjagm]

Describe the bug

We are fetching events from the JSON Schema's Google Calendar using the ical file and events are in different timezones. To present it on the Landing page and the Community page we are converting all to UTC timezone but it seems that the conversion is not working as expected. Specifically the APAC/Americas bi-monthly office hours. We need to review the logic of Timezone conversion to make sure it works.

Steps To Reproduce

Access the landing page or the community page and check the events list. The time/timezone should be consistent with the event present in the calendar:
https://calendar.google.com/calendar/embed?src=json.schema.community%40gmail.com&ctz=Europe%2FLondon

Expected Behavior

Correct times are presented converting to UTC

Screenshots

No response

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

No

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

[rishabhknowss]

Let me try fixing this

[techmannih]

@benjagm May I work on this issue ,,,
able to fetch all timing according to timezone and fixed all APAC/Americas bi-monthly office hours.

[benjagm]

Thanks, @techmannih. please go ahead. The only comments is we need the meetings to be shown in the website converted to UTC for all visitors.

[techmannih]

@benjagm please check this, this is not depend on localtime,

function printEventsForNextWeeks(icalData: { [x: string]: any }) {
  const arrayDates = [];
  if (!icalData) {
    console.error('iCal data is empty or invalid.');
    return;
  }

  // Calculate the range of dates for the next 12 weeks from today
  const today = moment.utc().startOf('day'); // Use UTC for today
  const nextFourWeeksEnd = moment.utc().add(12, 'weeks').endOf('day'); // Use UTC for the end date

  // Loop through the events in the iCal data
  for (const k in icalData) {
    const event = icalData[k];

    if (event.type === 'VEVENT') {
      const title = event.summary;

      // Parse the start date in UTC
      const startDate = moment.utc(event.start);
      console.log('startDate', startDate);

      // Complicated case - if an RRULE exists, handle multiple recurrences of the event
      if (event.rrule) {
        const dates = event.rrule.between(today.toDate(), nextFourWeeksEnd.toDate(), true);

        // Loop through the set of date entries
        for (const date of dates) {
          const startDate = moment.utc(date); // Use UTC directly

          // Check if the event falls within the next 12 weeks
          if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) {
            const utcDate = startDate.utc(); // Already in UTC

            const time = utcDate.format('MMMM Do YYYY, h:mm a');
            const day = utcDate.format('D');
            const parsedStartDate = utcDate.format('YYYY-MM-DD HH:mm:ss');
            arrayDates.push({
              title,
              time,
              day,
              timezone: 'UTC',
              parsedStartDate,
            });
          }
        }
      } else {
        // Simple case - no recurrences
        if (startDate.isBetween(today, nextFourWeeksEnd, undefined, '[]')) {
          const utcDate = startDate; // Already in UTC

          const time = utcDate.format('MMMM Do YYYY, h:mm a');
          const day = utcDate.format('D');
          const parsedStartDate = utcDate.format('YYYY-MM-DD HH:mm:ss');
          arrayDates.push({
            title,
            time,
            day,
            timezone: 'UTC',
            parsedStartDate,
          });
        }
      }
    }
  }

  // Sort the array based on parsedStartDate
  arrayDates.sort((x, y) => new Date(x.parsedStartDate).getTime() - new Date(y.parsedStartDate).getTime());

  return arrayDates;
}