Event CMS and displaying localized dates in the collection

I’m trying to build a page for a digital summer school in august. Many of the attendees are from around the world, so I think it makes sense to display the times of the talks/sessions in the right timezone. I found some code on here, but i can’t make it work properly.

It works for the first item, then the consts are redeclared on the second element of the collection and that obviously doesn’t work. I might be injecting the code (in the) wrong (place). Any ideas what I need to change?

I’d appreciate your help a lot. :slight_smile:

Code

Things I found
https://github.com/zeshhaan/code-snippets/blob/main/date-time.md


Here is the published link: https://theoretical-perspectives-east-and-west.webflow.io/agenda

I think i solved it. Declared the variables outside the collection and inside this code:

<script>

// CREATE TEMP STRUCTURE
tempDiv = document.createElement('div');
tempDiv.setAttribute("id", "div_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");

tempPara1 = document.createElement('paragraphSmall');
tempPara1.setAttribute("id", "startH3_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");
tempPara2 = document.createElement('h3');
tempPara2.setAttribute("id", "startP_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");

tempPara3 = document.createElement('paragraphSmall');
tempPara3.setAttribute("id", "endH3_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");
tempPara4 = document.createElement('h3');
tempPara4.setAttribute("id", "endP_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");

// GET DATA
startDate = new Date('{{wf{&quot;path&quot;:&quot;start-date-time&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD hh:mm a&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }} GMT'.replace(/-/g, "/"));
endDate = new Date('{{wf{&quot;path&quot;:&quot;end-date-time&quot;,&quot;transformers&quot;:[{&quot;name&quot;:&quot;date&quot;,&quot;arguments&quot;:[&quot;YYYY-MM-DD hh:mm a&quot;]\}],&quot;type&quot;:&quot;Date&quot;\} }} GMT'.replace(/-/g, "/"));

// LOCALE TIME STING & LOCAL DATE STRING
localizedStartTime = startDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
localizedStartDate = startDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
localizedEndTime = endDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
localizedEndDate = endDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });

// APPEND TO P-ELEMENTS
tempPara1.append(localizedStartDate);
tempPara2.append(localizedStartTime);
tempPara3.append(localizedEndDate);
tempPara4.append(localizedEndTime);

// THE TRICK: GET STATIC ID AND OVERWRITE WITH DYNAMIC ID
p1 = document.getElementById("timeContainer");
p1.setAttribute("id", "p1_{{wf {&quot;path&quot;:&quot;item-id-2&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");

// APPEND STUFF
p1.append(tempDiv);
tempDiv.append(tempPara1);
tempDiv.append(tempPara2);
tempDiv.append(tempPara3);
tempDiv.append(tempPara4);
    
</script>