Display Local Time Zone On Event Registration Form When Different To Event Time Zone

This post came out of a suggestion from Amey Holden, my good friend and fellow Microsoft MVP who focuses on and works a ton with Customer Insights – Journeys. We do monthly webinars to discuss new features and functionality in the product and use a CI-J event registration form for sign ups. Amey politely suggested that I add a link for people to be able to go to another site that would help someone see what date/time the sessions were in their own time zone. Nice idea! But what if we can do that directly on the form using a bit of JavaScript? So I figured I would try it out, and it works. Hooray! Thanks Amey, now people that are NOT in the BST time zone can easily see when it is and if it fits in their schedule and want to attend.

There are two types of Event Registration forms you might have, one with sessions and one without. Although you could potentially do one script for both, I have split them out as the date and times are found in different ways, so for clarity, pick the one that would work for you. First, here is what an Event might look like that shows the date and time, and no sessions are available.

In the HTML of the form, you will need to add two parts. The first is some CSS that will determine how the local time section looks. This should go within the <script> section near the top.

.local-time-display {  
            color: rgb(60, 36, 92);
            font-weight: 600;
            background: rgba(172, 137, 219, 0.25);
            max-width: 91%;
            font-size: 13px !important;
            padding: 10px !important;
            margin-top: 10px !important;
        }

The second is the script itself. This should go directly before the closing script tag </script> and does the following things:

• I want to show the times in 24 hour format so the first part does that
• Then it looks for the Time of the event on the form. Now this part will only work if you include the word Time somewhere on the form where you are pulling that in using the {{EventStartDateAndTime}} dynamic value. The way it is added to the form makes it pretty impossible to get otherwise. If you don’t include the word Time in front and use Date or something esle, make sure you set that in the line of the script here: .find(p => p.textContent.includes(“Time:”));
• The script then uses the time zone of the machine the person is viewing the page on.
• The users local time zone (looking at the date and time) is compared with the time zone set as the Event time zone in the script with this line: const eventTZ = “Europe/London”; – use this page to find the correct naming convention for the base event time zone you want to use. It would be more trouble than it is worth to try and pull it from the Event because D365 stores as a number in the database… so yeah, too much mapping involved!
• If the time zones are the same, the local time zone is hidden from the form
• If the time zones are different, the local date/time is displayed directly below the event date/time

<script>
  // -------------------------------
  // Convert AM/PM to 24-hour
  // -------------------------------
  function to24Hour(timeStr) {
      const match = timeStr.match(/(d{1,2}):(d{2})s?(AM|PM)?/i);
      if (!match) return timeStr;

      let [_, hours, minutes, meridian] = match;
      hours = parseInt(hours, 10);
      minutes = parseInt(minutes, 10);

      if (meridian) {
          if (meridian.toUpperCase() === "PM" && hours < 12) hours += 12;
          if (meridian.toUpperCase() === "AM" && hours === 12) hours = 0;
      }

      return `${String(hours).padStart(2,"0")}:${String(minutes).padStart(2,"0")}`;
  }

  // -------------------------------
  // Run after form has loaded
  // -------------------------------
  window.addEventListener("d365mkt-afterformload", function() {
      console.log("Form loaded, running timezone script...");

      const timePara = Array.from(document.querySelectorAll("div[data-editorblocktype="About"] p"))
  .find(p => p.textContent.includes("Time:"));

if (!timePara) {
    console.warn("No 'Time:' paragraph found.");
    return;
}

const dateSpan = timePara.querySelector("span.msdynmkt_personalization");
      console.log("Found date span:", dateSpan);

      if (!dateSpan) {
          console.warn("No date span found, exiting script.");
          return;
      }

      const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
      const eventTZ = "Europe/London";

      let text = dateSpan.textContent.trim();
      console.log("Date span text:", text);

      const dateMatch = text.match(/(d{1,2})/(d{1,2})/(d{4})/);
      const timeMatch = text.match(/(d{1,2}:d{2}s?(AM|PM)?)/i);

      console.log("Date match:", dateMatch);
      console.log("Time match:", timeMatch);

      if (!dateMatch || !timeMatch) {
          console.warn("Date or time format not recognized, exiting script.");
          return;
      }

      const [_, day, month, year] = dateMatch;
      const start24 = to24Hour(timeMatch[0]);
      console.log("Start time in 24-hour format:", start24);

      dateSpan.textContent = `${day}-${month}-${year} ${start24}`;

      const [hours, minutes] = start24.split(":").map(Number);
      const eventDateUTC = new Date(Date.UTC(year, month-1, day, hours, minutes));

      const localDate = eventDateUTC.toLocaleDateString("en-GB", { timeZone: userTZ }).replace(///g, "-");
      const localTime = eventDateUTC.toLocaleTimeString("en-GB", { timeZone: userTZ, hour12: false, hour: "2-digit", minute: "2-digit" });

      const eventStr = eventDateUTC.toLocaleString("en-GB", { timeZone: eventTZ, hour12: false, hour: "2-digit", minute: "2-digit" });
      const localStr = eventDateUTC.toLocaleString("en-GB", { timeZone: userTZ, hour12: false, hour: "2-digit", minute: "2-digit" });

      console.log("Event time string:", eventStr);
      console.log("Local time string:", localStr);

      const localDisplay = document.createElement("p");
      localDisplay.className = "local-time-display";
      localDisplay.innerHTML = `Your Timezone: ${localDate} ${localTime}`;

      if (eventStr === localStr) {
          console.log("Event time equals local time; hiding local display.");
          localDisplay.style.display = "none";
      }

      dateSpan.insertAdjacentElement("afterend", localDisplay);
      console.log("Local time paragraph added after date span.");
  });
</script>

If I change the time zone on my computer and refresh the form, I now see that it shows the date and time for me in my own time zone.

Now for the Event Registration with Sessions. For this, we need a script that can find all the sessions and go through each one to display it in the users time zone. This is what it might look like by default.

For this I used slightly different CSS for the part that displays the users local time zone, but play around with it so it looks how you want it to. Put this in the <style> section near the top of the form HTML.

    .local-time-display {
      color: #3c245c;
      font-weight: 600;
      font-size: 13px !important;
      background: #ac89db40;
      padding: 10px !important;
      max-width: 94%;
    }

Now for the script. It is doing pretty much the same as the one for the Event without sessions but in this it looks for the Sessions block and then checks each one before displaying the date and time to the user if it is different to the one on the session.

  <script>
    // -------------------------------
// Convert AM/PM to 24-hour
// -------------------------------
function to24Hour(timeStr) {
    const match = timeStr.match(/(d{1,2}):(d{2})s?(AM|PM)?/i);
    if (!match) return timeStr;

    let [_, hours, minutes, meridian] = match;
    hours = parseInt(hours, 10);
    minutes = parseInt(minutes, 10);

    if (meridian) {
        if (meridian.toUpperCase() === "PM" && hours < 12) hours += 12;
        if (meridian.toUpperCase() === "AM" && hours === 12) hours = 0;
    }

    return `${String(hours).padStart(2,"0")}:${String(minutes).padStart(2,"0")}`;
}

// -------------------------------
// Run after form has loaded
// -------------------------------
window.addEventListener("d365mkt-afterformload", function() {
    const sessions = document.querySelectorAll(".eventSession");
    if (!sessions.length) return;

    const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone; // viewer's timezone
    const eventTZ = "Europe/London"; // event timezone

    sessions.forEach(session => {
        const pList = session.querySelectorAll(".eventSessionDescription p");
        const timePara = Array.from(pList).find(p =>
            /d{1,2}/d{1,2}/d{4}/.test(p.textContent) &&
            /d{1,2}:d{2}/.test(p.textContent)
        );
        if (!timePara) return;

        const text = timePara.textContent.trim();
        const dateMatch = text.match(/d{1,2}/d{1,2}/d{4}/);
        if (!dateMatch) return;
        const date = dateMatch[0];

        const timeMatches = text.match(/d{1,2}:d{2}s?(AM|PM)?/gi) || [];
        if (!timeMatches.length) return;
        const startTime = timeMatches[0];
        const endTime = timeMatches[1] || startTime;

        // -------------------------------
        // Original session time (24-hour)
        // -------------------------------
        const [month, day, year] = date.split("/"); // MM/DD/YYYY
        const formattedDate = `${day}-${month}-${year}`;
        const start24 = to24Hour(startTime);
        const end24 = to24Hour(endTime);
        timePara.innerHTML = `${formattedDate} from ${start24} to ${end24}`;

        // -------------------------------
        // Convert to local time
        // -------------------------------
        const startParts = start24.split(":").map(Number);
        const endParts = end24.split(":").map(Number);

        // Create Date objects in UTC
        const startUTC = new Date(Date.UTC(year, month-1, day, startParts[0], startParts[1]));
        const endUTC = new Date(Date.UTC(year, month-1, day, endParts[0], endParts[1]));

 // Format for viewer's local timezone
const localDate = startUTC
    .toLocaleDateString("en-GB", { timeZone: userTZ })
    .replace(///g, "-");
const localStartTime = startUTC.toLocaleTimeString("en-GB", { timeZone: userTZ, hour12: false, hour: "2-digit", minute: "2-digit" });
const localEndTime = endUTC.toLocaleTimeString("en-GB", { timeZone: userTZ, hour12: false, hour: "2-digit", minute: "2-digit" });

// Check if local timezone differs from event timezone
// Compare the formatted strings in the event timezone vs user timezone
const eventStartStr = startUTC.toLocaleString("en-GB", { timeZone: eventTZ, hour12: false, hour: "2-digit", minute: "2-digit" });
const localStartStr = startUTC.toLocaleString("en-GB", { timeZone: userTZ, hour12: false, hour: "2-digit", minute: "2-digit" });

// Create local display paragraph
const localDisplay = document.createElement("p");
localDisplay.className = "local-time-display";
localDisplay.innerHTML = `Your Timezone: ${localDate} from ${localStartTime} to ${localEndTime}`;

// Only show background if local time differs from event time
if (eventStartStr === localStartStr) {
    localDisplay.style.display = "none";  // remove background if same timezone
}

timePara.insertAdjacentElement("afterend", localDisplay);

    });
});
  </script>

This person is in Hawaii so the first session is actually shown as the day before.

This person is Melbourne, Australia, so the second session is actually shown as the day after.

Hope this helps!

Original Post http://meganvwalker.com/display-local-time-zone-on-event-registration-form-when-different-to-event-time-zone/