tml
May 17, 2021, 6:45pm
1
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.
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
tml
May 19, 2021, 2:05pm
2
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 {"path":"item-id-2","type":"PlainText"\} }}");
tempPara1 = document.createElement('paragraphSmall');
tempPara1.setAttribute("id", "startH3_{{wf {"path":"item-id-2","type":"PlainText"\} }}");
tempPara2 = document.createElement('h3');
tempPara2.setAttribute("id", "startP_{{wf {"path":"item-id-2","type":"PlainText"\} }}");
tempPara3 = document.createElement('paragraphSmall');
tempPara3.setAttribute("id", "endH3_{{wf {"path":"item-id-2","type":"PlainText"\} }}");
tempPara4 = document.createElement('h3');
tempPara4.setAttribute("id", "endP_{{wf {"path":"item-id-2","type":"PlainText"\} }}");
// GET DATA
startDate = new Date('{{wf{"path":"start-date-time","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\}],"type":"Date"\} }} GMT'.replace(/-/g, "/"));
endDate = new Date('{{wf{"path":"end-date-time","transformers":[{"name":"date","arguments":["YYYY-MM-DD hh:mm a"]\}],"type":"Date"\} }} 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 {"path":"item-id-2","type":"PlainText"\} }}");
// APPEND STUFF
p1.append(tempDiv);
tempDiv.append(tempPara1);
tempDiv.append(tempPara2);
tempDiv.append(tempPara3);
tempDiv.append(tempPara4);
</script>
