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 %}

            {% for field in form %}
                <div class="mb-3">
                    {{ field.label_tag }}
                    {{ field }}
                    {% for error in field.errors %}
                        <div class="text-danger">{{ error }}</div>
                    {% endfor %}
                </div>
            {% endfor %}

            <button class="btn btn-primary">Save</button>
            <a class="btn btn-secondary" href="{% url 'events:event_list' %}">Cancel</a>
        </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 %}