{% extends 'base.html' %}
{% block content %}
    <div id="calendar"></div>
    <br/><br/>
{% endblock %}
{% block postscript %}
    <script>
        $(function () {
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {% for e in engagements %}
                        {
                            title: '{{e.product.name}}',
                            start: '{{e.target_start|date:"c"}}',
                            end: '{{e.target_end|date:"c"}}',
                            url: '{% url 'view_engagement' e.id %}',
                            color: '#337ab7',
                            overlap: true
                        },
                    {%  endfor %}
                ]
            });


        });
    </script>
{% endblock %}