📅 Terminbuchung System

Calendly-ähnliches Buchungssystem mit Outlook-Integration

✅ System Status:
• Backend-API: Funktioniert
• Outlook-Integration: Verbunden
• Frontend-Widget: Bereit

1. Als Popup (Button öffnet Modal)

Das Widget wird als Modal-Overlay über der Seite angezeigt:

<!-- CSS einbinden -->
<link rel="stylesheet" href="/public/css/calendar.css">

<!-- Button -->
<button onclick="Terminbuchung.open()">Termin buchen</button>

<!-- Widget -->
<div id="terminbuchung-app" v-scope class="terminbuchung">
    <div v-if="$root.isOpen" class="terminbuchung-popup" @click.self="close">
        <!-- Widget Content -->
    </div>
</div>

<!-- JavaScript -->
<script type="module" src="/public/js/calendar.js"></script>
            

2. Direkt in Seite eingebettet

Das Widget wird direkt in die Seite integriert:

Lädt...

{{ day.slots }} frei

Keine freien Termine verfügbar

Gewählter Termin

{{ selectedDateFormatted }} um {{ selectedSlot }} Uhr

Name *

E-Mail *

Telefon

Nachricht

✅

Termin gebucht!

Sie erhalten in Kürze eine Bestätigung per E-Mail.

Datum: {{ selectedDateFormatted }}

Uhrzeit: {{ selectedSlot }} Uhr

Name: {{ form.name }}

E-Mail: {{ form.email }}

3. API Endpoints

Alle Endpoints sind öffentlich zugänglich:

# Verfügbare Slots für einen Monat
GET /api/slots.php?date=2026-02

# Österreichische Feiertage
GET /api/holidays.php?year=2026

# Termin buchen
POST /api/book.php
Content-Type: application/json

{
  "date": "2026-02-10",
  "time": "09:00",
  "name": "Max Mustermann",
  "email": "max@example.com",
  "phone": "+43 660 1234567",
  "message": "Erstberatung"
}
            