Python HTML Calendar + Django Templating

Using Django Templates & Frontend
1

Hi,

I’ve come across an interesting problem, which where I am generating a python HTML calendar and adding objects from my DB based upon created dates. However when generating this in my Django template, its appearing at the bottom of the template block, not in the

{{Calendar}}

Seems to be loading into the bottom of the DOM but before the footer.
However in the templating language

Here is the view, which calls the calendar function

class IncidentCalendarView(LoginRequiredMixin, TemplateView):
    """
    Calendar list view, displaying when incidents occured.
    """

    login_url = "/accounts/login"
    template_name = "compliance_calendar.html"
    model_atrribute = "compliance_list"
    objects = [
        Incident,
    ]

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)

        # use today's date for the calendar
        d = get_date(self.request.GET.get("month", None))

        # Instantiate our calendar class with today's year and date
        cal = Calendar(d.year, d.month)

        # Call the formatmonth method, which returns our calendar as a table
        html_cal = cal.formatmonth(self.objects, self.model_atrribute, withyear=True)
        context["calendar"] = html_cal

        # Buttons context
        context["prev_month"] = prev_month(d)
        context["next_month"] = next_month(d)

        return context

Here is the template

{% extends 'base.html' %}
{% load tz %}
{% load static %}
{% load custom_tags %}

{% block main %}

<h3 class="text-dark mb-4">Compliance/Incident Calendar</h3>

<div class="card shadow">

	<div class="card-header">
		<div class="monthbuttons">
			<a class="btn btn-info left" href="{% url 'report_views:compliance-calendar' %}?{{ prev_month }}">
				<i class="fa-solid fa-chevron-left"></i> Previous Month
			</a>
			<a class="btn btn-info right" href="{% url 'report_views:compliance-calendar' %}?{{ next_month }}">
				Next Month <i class="fa-solid fa-chevron-right"></i>
			</a>
		</div>
	</div>

	<div class="card-body py-0">
		<div class="calendar">
		    {{ calendar}}
		</div>
	</div>
	<br>
	<div class="card-footer">
		<div class="bottom_buttons">
			<a class="btn btn-secondary" href="{% url 'report_views:report-home' %}">
				<i class="fa-solid fa-chevron-left"></i> Back
			</a>
		</div>
	</div>

</div>

{% endblock %}

if I load a different variable into the Calendar context in the view, it renders find. However when using the calendar function it appears after the last closed div in this template.

2

I’d start with the basics here.

Verify that the HTML being generated by cal.formatmonth is “clean” for being added into your template.

You might also want to verify that the final HTML being rendered in your template is correct before it gets sent to the browser. (Browsers can do funny things with invalid html…)

Also, since you’re adding HTML into your template through a variable, see the safe filter.

3

Thanks Ken!

Turns out the old forgot to close the table tag.

However in regards to safe filter, if I am already using the format_html function from the django.utils.html, do I still need to do the safe filter in the template? My understanding is that format_html already performs that function and cleans the string for html input? Or should I still call the safe filter?

4

Yes, I believe you’re correct, the filter is not needed in that case. The output of format_html is a SafeString.
(I didn’t see a use of format_html in the original post, which is why I commented on it.)