Question

In my django template I have some Event items listed using a for loop.The event has an associated date_of_occurrence attribute which is a python DateTime.I need to make the background for the event red ,if the datetime is less than current datetime.

I thought of doing it like this

In template

<ul>
{% for  event in events %}
  <div id="event_div"
    <li>
       event.name<br>
       event.date_of_occurrence
    </li>
  </div>
{% endfor %}
</ul>

In css

.pastevent{
  background-color:red;
}

I need a javascript function to set the class of element with id event_div to pastevent.Can someone tell me how this function can be implemented?

As I understand the function is not fired by any click event ,but when page loads. How will the datetime value of event passed from the template to do the comparison to the current javascript date?

Answer 1

You wouldn’t necessarily have to use javascript to do this. There are a couple of different options using the template tags.

The simpler approach (and more crude) would be to render the current datetime to the template as eg. current_date then do a logic check in your template.

{% for  event in events %}
    {% if event.date_of_occurrence < current_date %}  
    <div id="pastevent">
    {% else %}
    <div id="event_div">
    {% endif %}
    <li>
       event.name<br>
       event.date_of_occurrence
    </li>
  </div>
{% endfor %}

The other option would be to create a custom template filter that returns whether the event was in the past or not and apply the same logic as above.