chore: bump version to v0.8.12

.release-version

@@ -1 +1 @@
-v0.8.8
+v0.8.12

Web/modules/database/termine.py

@@ -30,7 +30,7 @@ def _active_record_query(extra_query=None):
     return base_query
 
 
-def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght: int, user: str, mail: list=[], note:str=""):
+def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght: int, user: str, mail: list=[], note:str="", calendar_enabled: bool=False):
     try:
         client = MongoClient(cfg.MONGODB_HOST, cfg.MONGODB_PORT)
         db = client[cfg.MONGODB_DB]
@@ -45,6 +45,7 @@ def add(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght
             'user': user,
             'mail': mail,
             'note': note,
+            'calendar_enabled': bool(calendar_enabled),
             'slots_booked': [], # -> [(start_time, name), ...]the list gets there indexes as the slot 1-defined so is can be counted without an extra variable
             'Created': datetime.datetime.now(),
             'LastUpdated': datetime.datetime.now()

Web/modules/terminplaner/backend_server.py

@@ -2,6 +2,8 @@
 Class for all funktions of the executive -> Lehrer
 """
 import datetime
+from datetime import timedelta
+from flask import url_for
 import Web.modules.emailservice.email as mail_service
 import Web.modules.database.termine as termin
 import Web.modules.database.settings as cfg
@@ -32,7 +34,78 @@ def _normalize_mail_list(mail):
         return [entry.strip() for entry in mail.replace(';', ',').split(',') if entry.strip()]
     return []
 
-def new(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght: int, user: str, mail: list=[], note:str="") -> str:
+def _escape_ics_text(value):
+    return str(value or '').replace('\\', '\\\\').replace(';', '\\;').replace(',', '\\,').replace('\r\n', '\n').replace('\n', '\\n').replace('\r', '')
+
+
+def _format_ics_date(date_value):
+    if isinstance(date_value, datetime.datetime):
+        return date_value.strftime('%Y%m%dT%H%M%SZ')
+    if isinstance(date_value, datetime.date):
+        return date_value.strftime('%Y%m%d')
+    return ''
+
+
+def build_calendar_ics(appointment_id: str) -> str | None:
+    item = termin.get_item(appointment_id)
+    if not item:
+        return None
+
+    date_start = item.get('date_start')
+    date_end = item.get('date_end')
+    time_span = item.get('time_span', []) or []
+    creator = item.get('user', 'Terminplaner')
+    note = item.get('note', '') or ''
+    try:
+        link = url_for('terminplaner.client', appointment_id=str(appointment_id), _external=True)
+    except Exception:
+        tenant_context = get_tenant_context()
+        subdomain = ''
+        if tenant_context:
+            subdomain = getattr(tenant_context, 'subdomain', '') or getattr(tenant_context, 'tenant_id', '') or ''
+        host = f"https://{subdomain}.invario.eu" if subdomain else "https://invario.eu"
+        link = host + "/terminplaner/client/" + str(appointment_id)
+
+    try:
+        start_date = datetime.datetime.strptime(str(date_start), '%Y-%m-%d').date()
+        end_date = datetime.datetime.strptime(str(date_end), '%Y-%m-%d').date()
+    except Exception:
+        return None
+
+    uid = f"terminplaner-{appointment_id}@invario.eu"
+    created_at = datetime.datetime.utcnow().strftime('%Y%m%dT%H%M%SZ')
+    summary = f"Terminplan für {creator}"
+    description_lines = [
+        f"Buchungslink: {link}",
+        f"Zeitraum: {date_start} bis {date_end}",
+    ]
+    if time_span:
+        description_lines.append('Zeitfenster: ' + '; '.join(str(entry) for entry in time_span))
+    if note:
+        description_lines.append('Notiz: ' + str(note))
+
+    ics_lines = [
+        'BEGIN:VCALENDAR',
+        'VERSION:2.0',
+        'PRODID:-//Inventarsystem//Terminplaner//DE',
+        'CALSCALE:GREGORIAN',
+        'METHOD:PUBLISH',
+        'BEGIN:VEVENT',
+        f'UID:{uid}',
+        f'DTSTAMP:{created_at}',
+        f'SUMMARY:{_escape_ics_text(summary)}',
+        f'DESCRIPTION:{_escape_ics_text(chr(10).join(description_lines))}',
+        f'URL:{_escape_ics_text(link)}',
+        f'DTSTART;VALUE=DATE:{_format_ics_date(start_date)}',
+        f'DTEND;VALUE=DATE:{_format_ics_date(end_date + timedelta(days=1))}',
+        'END:VEVENT',
+        'END:VCALENDAR',
+        '',
+    ]
+    return '\r\n'.join(ics_lines)
+
+
+def new(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght: int, user: str, mail: list=[], note:str="", calendar_enabled: bool=False) -> dict:
     """
     Generates a link for the executive to send to his clients to book a time Slot
     
@@ -48,7 +121,7 @@ def new(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght
     """
     normalized_time_span = _normalize_time_span(time_span)
     normalized_mail = _normalize_mail_list(mail)
-    id = termin.add(date_start, date_end, normalized_time_span, slots, slot_lenght, user, normalized_mail, note)
+    id = termin.add(date_start, date_end, normalized_time_span, slots, slot_lenght, user, normalized_mail, note, calendar_enabled=calendar_enabled)
     id_str = str(id)
 
     tenant_context = get_tenant_context()
@@ -56,13 +129,37 @@ def new(date_start: str, date_end: str, time_span: list, slots: int, slot_lenght
     if tenant_context:
         subdomain = getattr(tenant_context, 'subdomain', '') or getattr(tenant_context, 'tenant_id', '') or ''
 
-    host = f"https://{subdomain}.invario.eu" if subdomain else "invario.eu"
-    link = host + "/terminplaner/client" + "?" + "client_id=" + id_str
+    try:
+        link = url_for('terminplaner.client', appointment_id=id_str, _external=True)
+    except Exception:
+        host = f"https://{subdomain}.invario.eu" if subdomain else "https://invario.eu"
+        link = host + "/terminplaner/client/" + id_str
     subject = f"Terminanfrage von {user}"
     note_link = note + f"Bitte klicken sie auf den folgenden Link um einen Termin zu vereinbaren: {link}"
-    if normalized_mail:
-        mail_service.send(normalized_mail, subject, note_link)
-    return link
+    calendar_link = None
+    if calendar_enabled:
+        try:
+            calendar_link = url_for('terminplaner.calendar_export', appointment_id=id_str, _external=True)
+        except Exception:
+            tenant_context = get_tenant_context()
+            subdomain = ''
+            if tenant_context:
+                subdomain = getattr(tenant_context, 'subdomain', '') or getattr(tenant_context, 'tenant_id', '') or ''
+            host = f"https://{subdomain}.invario.eu" if subdomain else "https://invario.eu"
+            calendar_link = host + "/terminplaner/calendar/" + id_str + ".ics"
+
+    email_body = note_link
+    if calendar_link:
+        email_body += f"\n\nKalendereintrag: {calendar_link}"
+
+    if normalized_mail and cfg.EMAIL_ENABLED:
+        mail_service.send(normalized_mail, subject, email_body)
+
+    return {
+        'appointment_id': id_str,
+        'link': link,
+        'calendar_link': calendar_link,
+    }
     
         
 def book_slot(id, date_start_time, name):

Web/modules/terminplaner/blueprint.py

@@ -1,4 +1,5 @@
 from flask import Blueprint, render_template, request, session, url_for, redirect, flash
+from flask import Response
 import Web.modules.terminplaner.backend_server as appointment_service
 import Web.modules.database.settings as cfg
 
@@ -72,16 +73,52 @@ def configure():
         slot_lenght = request.form.get('slot_lenght')
         mail = request.form.get('mail', '')
         note = request.form.get('note', '')
+        add_to_calendar = request.form.get('add_to_calendar') == 'on'
 
         if not start or not end or not time or not slots_amount or not slot_lenght:
             flash('Bitte alle Pflichtfelder ausfüllen.', 'error')
-            return render_template('termin_configure.html', school_periods=cfg.SCHOOL_PERIODS, generated_link=None)
+            return render_template(
+                'termin_configure.html',
+                school_periods=cfg.SCHOOL_PERIODS,
+                generated_link=None,
+                email_service_enabled=cfg.EMAIL_ENABLED,
+            )
 
-        link = appointment_service.new(start, end, time, slots_amount, slot_lenght, session["username"], mail, note)
+        result = appointment_service.new(start, end, time, slots_amount, slot_lenght, session["username"], mail, note, calendar_enabled=add_to_calendar)
         flash('Der Terminplan wurde angelegt.', 'success')
-        return render_template('termin_configure.html', school_periods=cfg.SCHOOL_PERIODS, generated_link=link)
+        return render_template(
+            'termin_configure.html',
+            school_periods=cfg.SCHOOL_PERIODS,
+            generated_link=result['link'],
+            calendar_link=result.get('calendar_link'),
+            add_to_calendar=add_to_calendar,
+            email_service_enabled=cfg.EMAIL_ENABLED,
+        )
     elif request.method == "GET":
-        return render_template('termin_configure.html', school_periods=cfg.SCHOOL_PERIODS, generated_link=None)
+        return render_template(
+            'termin_configure.html',
+            school_periods=cfg.SCHOOL_PERIODS,
+            generated_link=None,
+            calendar_link=None,
+            add_to_calendar=False,
+            email_service_enabled=cfg.EMAIL_ENABLED,
+        )
+
+
+@appoint_bp.route('/calendar/<appointment_id>.ics', methods=['GET'])
+def calendar_export(appointment_id):
+    guard = _require_module_enabled()
+    if guard:
+        return guard
+
+    ics_content = appointment_service.build_calendar_ics(appointment_id)
+    if not ics_content:
+        flash('Der Termin wurde nicht gefunden.', 'error')
+        return redirect(url_for('terminplaner.configure'))
+
+    response = Response(ics_content, mimetype='text/calendar; charset=utf-8')
+    response.headers['Content-Disposition'] = f'attachment; filename=terminplan-{appointment_id}.ics'
+    return response
 
 @appoint_bp.route('/')
 def main():

Web/templates/base.html

@@ -1279,7 +1279,6 @@
             </div>
         </nav>
     {% endif %}
-        {% endif %}
 
         {% if library_module_enabled and CURRENT_MODULE == 'library' %}
         <nav class="navbar navbar-expand-lg navbar-dark" id="libraryNavbar">
@@ -1391,7 +1390,6 @@
             </div>
         </nav>
         {% endif %}
-        {% endif %}
 
     {% else %}
     <nav class="navbar navbar-expand-lg navbar-dark" id="loginNavbar">

Web/templates/main.html

@@ -269,23 +269,6 @@
         line-height: 1;
     }
 
-    /* Compact appointment badge on cards */
-    .appointment-badge {
-        margin-top: 10px;
-        padding: 10px 12px;
-        background-color: #e1f5fe;
-        border-left: 4px solid #03a9f4;
-        border-radius: 4px;
-        font-size: 0.9rem;
-        line-height: 1.3;
-    }
-    .appointment-badge .appointment-time {
-        display: inline-block;
-        margin-top: 4px;
-        color: #01579b;
-        font-weight: 600;
-    }
-
     /* Search styles */
     .search-container {
         display: flex;
@@ -1006,23 +989,6 @@
                                 </div>`;
                         }
                         
-                        // Add appointment badge if item has upcoming appointments
-                        let appointmentBadge = '';
-                        if (item.appointments && Array.isArray(item.appointments) && item.appointments.length > 0) {
-                            const upcomingAppointment = getUpcomingAppointment(item.appointments);
-                            if (upcomingAppointment) {
-                                const formattedDate = formatAppointmentDate(upcomingAppointment.date);
-                                const startPeriod = formatAppointmentPeriod(upcomingAppointment.start_period);
-                                const endPeriod = formatAppointmentPeriod(upcomingAppointment.end_period);
-                                
-                                appointmentBadge = `
-                                    <div class="appointment-badge">
-                                        <strong>Geplant für:</strong> ${formattedDate}<br>
-                                        <span class="appointment-time">${startPeriod}${endPeriod && endPeriod !== startPeriod ? ' - ' + endPeriod : ''}</span>
-                                    </div>`;
-                            }
-                        }
-
                         card.innerHTML = `
                             <div class="card-content" data-item-id="${item._id}">
                                 <h3 class="item-col-name">${item.Name}</h3>
@@ -1037,7 +1003,6 @@
                                     ${imagesHtml}
                                 </div>
                                 ${borrowerBadge}
-                                ${appointmentBadge}
                             </div>
                             <div class="actions">
                                 ${isAvailableForBorrow && !item.BlockedNow ? 
@@ -1614,27 +1579,6 @@
             `;
         }
         
-        // Add appointment info panel if item has appointments
-        let appointmentInfoHtml = '';
-        if (item.appointments && Array.isArray(item.appointments) && item.appointments.length > 0) {
-            const upcomingAppointment = getUpcomingAppointment(item.appointments);
-            if (upcomingAppointment) {
-                const formattedDate = formatAppointmentDate(upcomingAppointment.date);
-                const startPeriod = formatAppointmentPeriod(upcomingAppointment.start_period);
-                const endPeriod = formatAppointmentPeriod(upcomingAppointment.end_period);
-                const timeDisplay = startPeriod + (endPeriod && endPeriod !== startPeriod ? ' - ' + endPeriod : '');
-                
-                appointmentInfoHtml = `
-                    <div class="appointment-info-panel">
-                        <h4>Geplanter Termin</h4>
-                        <p class="appointment-date">Datum: ${formattedDate}</p>
-                        <p class="appointment-time">Zeit: ${timeDisplay}</p>
-                        ${upcomingAppointment.notes ? `<p class="appointment-notes">Notizen: ${upcomingAppointment.notes}</p>` : ''}
-                    </div>
-                `;
-            }
-        }
-        
         // Build modal content HTML
         modalContent.innerHTML = `
             <h2>${item.Name}</h2>
@@ -1642,7 +1586,6 @@
                 <button type="button" class="bookmark-btn" id="modal-bookmark-btn" title="Merken">${(window.currentFavorites||new Set()).has(item._id) ? '★' : '☆'}</button>
             </div>
             ${borrowerInfoHtml}
-            ${appointmentInfoHtml}
             
             <div class="modal-image-container">
                 ${imagesHtml}
@@ -2804,66 +2747,6 @@
         }
     }
 
-    // Helper functions for appointment display
-    function formatAppointmentDate(dateString) {
-        if (!dateString) return '';
-        try {
-                       const date = new Date(dateString);
-            return date.toLocaleDateString('de-DE', {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric'
-            });
-        } catch (e) {
-            return dateString;
-        }
-    }
-
-    function formatAppointmentPeriod(period) {
-        if (!period) return '';
-        const periodMap = {
-            '1': '1. Stunde',
-            '2': '2. Stunde',
-            '3': '3. Stunde',
-            '4': '4. Stunde',
-            '5': '5. Stunde',
-            '6': '6. Stunde',
-            '7': '7. Stunde',
-            '8': '8. Stunde',
-            '9': '9. Stunde',
-            '10': '10. Stunde',
-            'pause1': '1. Pause',
-            'pause2': '2. Pause',
-            'mittagspause': 'Mittagspause'
-        };
-        return periodMap[period] || period;
-    }
-
-    function getUpcomingAppointment(appointments) {
-        if (!appointments || !Array.isArray(appointments) || appointments.length === 0) {
-            return null;
-        }
-        
-        const now = new Date();
-        const today = now.toDateString();
-        
-        // Filter appointments that are today or in the future
-        const futureAppointments = appointments.filter(apt => {
-            try {
-                const aptDate = new Date(apt.date);
-                return aptDate.toDateString() === today || aptDate >= now.setHours(0, 0, 0, 0);
-            } catch (e) {
-                return false;
-            }
-        });
-        
-        if (futureAppointments.length === 0) return null;
-        
-        // Sort by date and return the earliest
-        futureAppointments.sort((a, b) => new Date(a.date) - new Date(b.date));
-        return futureAppointments[0];
-    }
-
     function formatDateForInput(dateString) {
         const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
         const date = new Date(dateString);
@@ -3947,16 +3830,6 @@
     .borrower-info-panel h4 { color: #856404; margin: 0 0 10px 0; font-size: 1.1rem; }
     .borrower-name, .borrow-time { margin: 5px 0; color: #856404; font-weight: 500; }
 
-    .appointment-info-panel {
-        background-color: #e1f5fe;
-        border: 1px solid #81d4fa;
-        border-radius: 5px;
-        padding: 15px;
-        margin-bottom: 20px;
-    }
-    .appointment-info-panel h4 { color: #0277bd; margin: 0 0 10px 0; font-size: 1.1rem; }
-    .appointment-date, .appointment-time, .appointment-user { margin: 5px 0; color: #0277bd; font-weight: 500; }
-
     /* Modal Details Styling (text formatting) */
     .modal-details { margin: 20px 0; }
     .detail-group { display: flex; margin-bottom: 10px; align-items: flex-start; }

Web/templates/termin_configure.html

@@ -24,10 +24,33 @@
                             </div>
                         </div>
 
-                        <div>
-                            <label for="time_frame" class="form-label fw-semibold">Zeitfenster</label>
-                            <textarea id="time_frame" name="time_frame" class="form-control" rows="5" placeholder="Beispiele:\nMontag 08:00-12:00\nDienstag 08:00-12:00" required></textarea>
-                            <div class="form-text">Jede Zeile kann ein eigenes Zeitfenster enthalten.</div>
+                        <div class="border rounded-4 p-3 p-md-4 bg-light-subtle">
+                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 mb-2">
+                                <div>
+                                    <label class="form-label fw-semibold mb-0">Zeitfenster pro Tag</label>
+                                    <div class="form-text mb-0">Sobald Start- und Enddatum gesetzt sind, wird für jeden Tag automatisch ein eigener Eintrag erzeugt.</div>
+                                </div>
+                                <button type="button" class="btn btn-outline-primary btn-sm" id="build_time_frame">Tage aus Zeitraum erzeugen</button>
+                            </div>
+
+                            <div class="row g-3 mb-3">
+                                <div class="col-12 col-md-6 col-xl-4">
+                                    <label for="default_day_start" class="form-label fw-semibold">Standard-Startzeit</label>
+                                    <input type="time" id="default_day_start" class="form-control" value="08:00">
+                                </div>
+                                <div class="col-12 col-md-6 col-xl-4">
+                                    <label for="default_day_end" class="form-label fw-semibold">Standard-Endzeit</label>
+                                    <input type="time" id="default_day_end" class="form-control" value="12:00">
+                                </div>
+                            </div>
+
+                            <div id="time_frame_days" class="vstack gap-2"></div>
+
+                            <div class="mt-3">
+                                <label for="time_frame" class="form-label fw-semibold">Gespeichertes Zeitfenster</label>
+                                <textarea id="time_frame" name="time_frame" class="form-control font-monospace" rows="5" placeholder="Wird automatisch aus den Tagen erzeugt" required></textarea>
+                                <div class="form-text">Das Formular überträgt die erzeugten Tageszeilen an das Backend. Sie können die Liste hier bei Bedarf noch anpassen.</div>
+                            </div>
                         </div>
 
                         <div class="row g-3">
@@ -51,6 +74,12 @@
                             <textarea id="note" name="note" class="form-control" rows="4" placeholder="Optionaler Einführungstext für die Mail"></textarea>
                         </div>
 
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="add_to_calendar" name="add_to_calendar" {% if add_to_calendar %}checked{% endif %}>
+                            <label class="form-check-label fw-semibold" for="add_to_calendar">Kalendereintrag für den Nutzer erzeugen</label>
+                            <div class="form-text">Erzeugt zusätzlich eine .ics-Datei, die in gängige Kalender importiert werden kann.</div>
+                        </div>
+
                         <div class="d-flex flex-column flex-sm-row gap-2 pt-2">
                             <button type="submit" class="btn btn-primary btn-lg">Terminplan erzeugen</button>
                             <a class="btn btn-outline-secondary btn-lg" href="{{ url_for('terminplaner.main') }}">Zur Übersicht</a>
@@ -62,11 +91,168 @@
             {% if generated_link %}
             <div class="alert alert-success mt-4 shadow-sm rounded-4">
                 <div class="fw-bold mb-1">Buchungslink erstellt</div>
-                <div class="mb-2">Teilen Sie diesen Link mit den Teilnehmenden:</div>
+                <div class="mb-2">
+                    {% if email_service_enabled %}
+                        Teilen Sie diesen Link mit den Teilnehmenden oder versenden Sie ihn direkt per E-Mail.
+                    {% else %}
+                        Der E-Mail-Service ist deaktiviert. Teilen Sie diesen Link manuell mit den Teilnehmenden.
+                    {% endif %}
+                </div>
                 <a href="{{ generated_link }}" class="d-inline-block text-break">{{ generated_link }}</a>
+                {% if calendar_link %}
+                <div class="mt-3">
+                    <div class="fw-semibold mb-1">Kalendereintrag</div>
+                    <a href="{{ calendar_link }}" class="btn btn-outline-primary btn-sm">.ics herunterladen</a>
+                </div>
+                {% endif %}
             </div>
             {% endif %}
         </div>
     </div>
 </div>
+<script>
+(function () {
+    const startDateInput = document.getElementById('start_date');
+    const endDateInput = document.getElementById('end_date');
+    const buildButton = document.getElementById('build_time_frame');
+    const daysContainer = document.getElementById('time_frame_days');
+    const timeFrameTextarea = document.getElementById('time_frame');
+    const defaultStartInput = document.getElementById('default_day_start');
+    const defaultEndInput = document.getElementById('default_day_end');
+
+    if (!startDateInput || !endDateInput || !buildButton || !daysContainer || !timeFrameTextarea || !defaultStartInput || !defaultEndInput) {
+        return;
+    }
+
+    const weekdayFormatter = new Intl.DateTimeFormat('de-DE', {
+        weekday: 'long',
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    });
+
+    function parseDate(value) {
+        if (!value) {
+            return null;
+        }
+
+        const parts = value.split('-').map(Number);
+        if (parts.length !== 3 || parts.some(Number.isNaN)) {
+            return null;
+        }
+
+        return new Date(parts[0], parts[1] - 1, parts[2]);
+    }
+
+    function formatDateForRow(date) {
+        return weekdayFormatter.format(date);
+    }
+
+    function formatDateForValue(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    function addDays(date, days) {
+        const copy = new Date(date);
+        copy.setDate(copy.getDate() + days);
+        return copy;
+    }
+
+    function syncTextarea() {
+        const rows = Array.from(daysContainer.querySelectorAll('[data-day-row]'));
+        const lines = rows.map(function (row) {
+            const dayValue = row.getAttribute('data-day-value') || '';
+            const startTime = row.querySelector('[data-time-start]')?.value || '';
+            const endTime = row.querySelector('[data-time-end]')?.value || '';
+            return `${dayValue} ${startTime}-${endTime}`.trim();
+        }).filter(Boolean);
+
+        timeFrameTextarea.value = lines.join('\n');
+    }
+
+    function renderRows() {
+        const startDate = parseDate(startDateInput.value);
+        const endDate = parseDate(endDateInput.value);
+
+        if (!startDate || !endDate) {
+            daysContainer.innerHTML = '<div class="text-muted small">Bitte Start- und Enddatum auswählen, damit die Tageszeilen erzeugt werden.</div>';
+            timeFrameTextarea.value = '';
+            endDateInput.setCustomValidity('');
+            return;
+        }
+
+        if (endDate < startDate) {
+            daysContainer.innerHTML = '<div class="text-danger small">Das Enddatum muss nach dem Startdatum liegen.</div>';
+            timeFrameTextarea.value = '';
+            endDateInput.setCustomValidity('Das Enddatum muss nach dem Startdatum liegen.');
+            return;
+        }
+
+        endDateInput.setCustomValidity('');
+
+        const existingValues = new Map();
+        Array.from(daysContainer.querySelectorAll('[data-day-row]')).forEach(function (row) {
+            const dayValue = row.getAttribute('data-day-value');
+            const startTime = row.querySelector('[data-time-start]')?.value || '';
+            const endTime = row.querySelector('[data-time-end]')?.value || '';
+            if (dayValue) {
+                existingValues.set(dayValue, { startTime, endTime });
+            }
+        });
+
+        const defaultStart = defaultStartInput.value || '08:00';
+        const defaultEnd = defaultEndInput.value || '12:00';
+        const rows = [];
+
+        for (let current = startDate; current <= endDate; current = addDays(current, 1)) {
+            const dayValue = formatDateForValue(current);
+            const preserved = existingValues.get(dayValue) || {};
+            const rowStart = preserved.startTime || defaultStart;
+            const rowEnd = preserved.endTime || defaultEnd;
+
+            rows.push(`
+                <div class="border rounded-3 bg-white p-3" data-day-row data-day-value="${dayValue}">
+                    <div class="row g-2 align-items-end">
+                        <div class="col-12 col-lg-5">
+                            <label class="form-label fw-semibold mb-1">${formatDateForRow(current)}</label>
+                            <div class="text-muted small">${dayValue}</div>
+                        </div>
+                        <div class="col-6 col-lg-3">
+                            <label class="form-label mb-1">Von</label>
+                            <input type="time" class="form-control" value="${rowStart}" data-time-start>
+                        </div>
+                        <div class="col-6 col-lg-3">
+                            <label class="form-label mb-1">Bis</label>
+                            <input type="time" class="form-control" value="${rowEnd}" data-time-end>
+                        </div>
+                    </div>
+                </div>
+            `);
+        }
+
+        daysContainer.innerHTML = rows.join('');
+        daysContainer.querySelectorAll('input[type="time"]').forEach(function (input) {
+            input.addEventListener('input', syncTextarea);
+            input.addEventListener('change', syncTextarea);
+        });
+
+        syncTextarea();
+    }
+
+    buildButton.addEventListener('click', renderRows);
+    startDateInput.addEventListener('input', renderRows);
+    startDateInput.addEventListener('change', renderRows);
+    endDateInput.addEventListener('input', renderRows);
+    endDateInput.addEventListener('change', renderRows);
+    defaultStartInput.addEventListener('change', syncTextarea);
+    defaultEndInput.addEventListener('change', syncTextarea);
+
+    if (startDateInput.value && endDateInput.value) {
+        renderRows();
+    }
+})();
+</script>
 {% endblock %}

Web/templates/terminplan.html

@@ -19,6 +19,11 @@
             <span id="current-day-display"></span>
             <button id="next-day">Nächster Tag</button>
             <button id="today">Heute</button>
+            <div class="calendar-view-switch" role="group" aria-label="Kalenderansicht wechseln">
+                <button type="button" class="calendar-view-btn active" data-calendar-view="timeGridDay">Tag</button>
+                <button type="button" class="calendar-view-btn" data-calendar-view="timeGridWeek">Woche</button>
+                <button type="button" class="calendar-view-btn" data-calendar-view="dayGridMonth">Monat</button>
+            </div>
             <button id="new-booking" class="primary-button">Neue Reservierung</button>
         </div>
         <div class="calendar-legend">
@@ -167,6 +172,8 @@
 
 <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/daygrid/main.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/timegrid/main.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/de.js"></script>
 
 <script>
@@ -179,6 +186,7 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentEventId = null;
     let calendar;
     let showCompletedBookings = false;
+    let activeCalendarView = 'timeGridDay';
     
     // School period times from server configuration
     let schoolPeriods;
@@ -246,6 +254,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize calendar
     calendar = new FullCalendar.Calendar(calendarEl, {
+        plugins: [FullCalendar.dayGridPlugin, FullCalendar.timeGridPlugin],
         initialView: 'timeGridDay',
         locale: 'de',
         headerToolbar: false, // We're using our custom header
@@ -422,14 +431,29 @@ document.addEventListener('DOMContentLoaded', function() {
         eventClick: function(info) {
             showEventDetails(info.event);
         },
-        datesSet: function(dateInfo) {
+        datesSet: function() {
             updateCurrentDayDisplay();
         }
     });
 
+    function setCalendarView(viewName) {
+        activeCalendarView = viewName;
+        calendar.changeView(viewName);
+        document.querySelectorAll('[data-calendar-view]').forEach(button => {
+            button.classList.toggle('active', button.dataset.calendarView === viewName);
+        });
+    }
+
+    document.querySelectorAll('[data-calendar-view]').forEach(button => {
+        button.addEventListener('click', function() {
+            setCalendarView(this.dataset.calendarView);
+        });
+    });
+
     // Render calendar
     try {
         calendar.render();
+        setCalendarView(activeCalendarView);
         
         setTimeout(() => {
             calendar.updateSize();
@@ -1256,6 +1280,32 @@ document.addEventListener('DOMContentLoaded', function() {
     white-space: nowrap;
 }
 
+.calendar-view-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px;
+    border: 1px solid #d7dce3;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.82);
+}
+
+.calendar-view-btn {
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--ui-text);
+    font-weight: 600;
+    padding: 7px 14px;
+    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.calendar-view-btn.active {
+    background: var(--module-accent-color);
+    color: #fff;
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
+}
+
 .calendar-actions .primary-button {
     background-color: #3788d8;
     color: white;
@@ -1281,6 +1331,17 @@ document.addEventListener('DOMContentLoaded', function() {
         width: 100%;
         margin: 5px 0;
     }
+
+    .calendar-view-switch {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .calendar-view-btn {
+        flex: 1 1 30%;
+        min-width: 88px;
+    }
     
     .calendar-actions .primary-button {
         margin-left: 0;