Within my django template, there is a list of Event items displayed using a for loop. Each event includes a date_of_occurrence attribute that holds a python DateTime value. My goal is to highlight events with a red background if the date is in the past relative to the current datetime.
This is what I initially envisioned:
In the template
<ul>
{% for event in events %}
<div id="event_div"
<li>
event.name<br>
event.date_of_occurrence
</li>
</div>
{% endfor %}
</ul>
In the CSS
.pastevent{
background-color:red;
}
I am seeking a JavaScript function that will assign the class 'pastevent' to the element with the id event_div. How can this function be implemented?
My understanding is that the function should not be triggered by a click event but rather when the page loads. How can the datetime value of each event passed from the template be used for comparison with the current JavaScript date?