schedule_form.html

{% extends "base.html" %}
{% load static i18n bootstrap4 %}

{% block title %}
    {% if object %}
        {% translate "Edit" %}
    {% else %}
        {% translate "Create new schedule" %}
    {% endif %}
    · {{ block.super }}
{% endblock %}

{% block content %}
    <form id="add_date"></form>
    <form id="add_time"></form>

    <form method="post">
        {% csrf_token %}
        {% bootstrap_form_errors form type='non_fields' %}
        {% bootstrap_field form.title %}

        <fieldset>
            <legend>{% translate 'Timeslots' %}</legend>

            <div class="form-row">
                <div class="form-group col col-sm-4">
                    <input type="date" form="add_date" name="input" class="form-control" required>
                </div>
                <div class="col">
                    <button form="add_date" class="btn btn-secondary">{% translate 'Add date' %}</button>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col col-sm-4">
                    <input type="time" form="add_time" name="input" class="form-control" required>
                </div>
                <div class="col">
                    <button form="add_time" class="btn btn-secondary">{% translate 'Add time' %}</button>
                </div>
            </div>

            <div class="full-width my-2">
                <table class="table table-hover" data-js="multi-datetime">
                    <thead>
                        <tr>
                            <th></th>
                            {% for time in form.timeslots.value.times %}
                                <th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for date, row in form.timeslots.value.timeslots.items %}
                            <tr data-value="{{ date|date:'Y-m-d' }}">
                                <th>{{ date }}</th>
                                {% for time, checked in row.items %}
                                    <td>
                                        <input type="checkbox" name="timeslots" value="{{ date|date:'Y-m-d' }} {{ time|date:'H:i' }}" {% if checked %}checked{% endif %}>
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </fieldset>

        <div class="d-print-none mb-3">
            <button class="btn btn-primary" >{% translate 'Save' %}</button>
            {% if object %}
                <a href="{% url 'schedule-delete' object.pk %}" class="btn btn-danger">{% translate 'Delete' %}</a>
            {% endif %}
        </div>
    </form>
{% endblock %}

{% block extra_scripts %}
    <script src="{% static 'scheduler.js' %}"></script>
{% endblock %}