eventify_backend/templates/events/event_form.html

{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
    <h3>{% if object %}Edit{% else %}Add{% endif %} Event</h3>

    <form method="post" novalidate>
        {% csrf_token %}
        {{ form.media }}

        {% for field in form %}
        <div class="mb-3">
            {{ field.label_tag }}
            {% if field.name == 'source' %}
            <div class="mt-2">
                {% for radio in field %}
                <div class="form-check">
                    {{ radio.tag }}
                    <label class="form-check-label" for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
                </div>
                {% endfor %}
            </div>
            {% else %}
            {{ field }}
            {% endif %}
            {% for error in field.errors %}
            <div class="text-danger">{{ error }}</div>
            {% endfor %}
        </div>
        {% endfor %}

        <div class="mb-3 mt-4">
            <button class="btn btn-primary">Save</button>
            <a class="btn btn-secondary" href="{% url 'events:event_list' %}">Cancel</a>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const allYearEventCheckbox = document.getElementById('id_all_year_event');
        const startDateField = document.getElementById('id_start_date');
        const endDateField = document.getElementById('id_end_date');
        const startTimeField = document.getElementById('id_start_time');
        const endTimeField = document.getElementById('id_end_time');

        function toggleDateTimeFields() {
            const isDisabled = allYearEventCheckbox.checked;
            startDateField.disabled = isDisabled;
            endDateField.disabled = isDisabled;
            startTimeField.disabled = isDisabled;
            endTimeField.disabled = isDisabled;
        }

        // Set initial state
        toggleDateTimeFields();

        // Listen for checkbox changes
        if (allYearEventCheckbox) {
            allYearEventCheckbox.addEventListener('change', toggleDateTimeFields);
        }
    });
</script>
{% endblock %}