Lunes 27Martes 28Miércoles 29Jueves 309:0010:0011:0012:00
HTML + CSSOverlays

Termin direkt im Kalender anlegen

Ein Klick auf einen freien Slot der Woche öffnet eine angeheftete Blase für Titel und Farbe des Termins.

Einstellungen

16px
1x

Code

<div class="uvq13-cal"><div class="cal" role="group" aria-label="Woche vom 27. Oktober"><span></span><span class="dh" id="uvq13-cal-d0"><span>Montag</span> <b>27</b></span><span class="dh td" id="uvq13-cal-d1"><span>Dienstag</span> <b>28</b></span><span class="dh" id="uvq13-cal-d2"><span>Mittwoch</span> <b>29</b></span><span class="dh" id="uvq13-cal-d3"><span>Donnerstag</span> <b>30</b></span><span class="hh" id="uvq13-cal-h0">9:00</span><button type="button" class="cell" data-h="0" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d0 uvq13-cal-h0"></button><button type="button" class="cell" data-h="0" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d1 uvq13-cal-h0"></button><button type="button" class="cell" data-h="0" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d2 uvq13-cal-h0"></button><button type="button" class="cell" data-h="0" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d3 uvq13-cal-h0"><span class="ev" style="--c:#f59e0b"><b>Zahnarzt</b><small>9:00</small></span></button><span class="hh" id="uvq13-cal-h1">10:00</span><button type="button" class="cell" data-h="1" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d0 uvq13-cal-h1"></button><button type="button" class="cell" data-h="1" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d1 uvq13-cal-h1"><span class="ev" style="--c:#14b8a6"><b>Design</b><small>10:00</small></span></button><button type="button" class="cell" data-h="1" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d2 uvq13-cal-h1"></button><button type="button" class="cell" data-h="1" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d3 uvq13-cal-h1"></button><span class="hh" id="uvq13-cal-h2">11:00</span><button type="button" class="cell" data-h="2" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d0 uvq13-cal-h2"></button><button type="button" class="cell" data-h="2" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d1 uvq13-cal-h2"></button><button type="button" class="cell" data-h="2" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d2 uvq13-cal-h2"></button><button type="button" class="cell" data-h="2" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d3 uvq13-cal-h2"></button><span class="hh" id="uvq13-cal-h3">12:00</span><button type="button" class="cell" data-h="3" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d0 uvq13-cal-h3"></button><button type="button" class="cell" data-h="3" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d1 uvq13-cal-h3"></button><button type="button" class="cell" data-h="3" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d2 uvq13-cal-h3"><span class="ev" style="--c:#e2553f"><b>Mittagessen mit Leo</b><small>12:00</small></span></button><button type="button" class="cell" data-h="3" aria-haspopup="dialog" aria-labelledby="uvq13-cal-d3 uvq13-cal-h3"></button></div><div class="po" role="dialog" aria-modal="true" aria-labelledby="uvq13-cal-pt"><p class="pt" id="uvq13-cal-pt">Neuer Termin</p><input class="nm" placeholder="Titel hinzufügen" aria-label="Titel des Termins" autocomplete="off"><p class="wh"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg><span class="when"></span></p><div class="cs" role="radiogroup" aria-label="Farbe"><button type="button" role="radio" aria-checked="true" aria-label="Koralle" style="--c:#e2553f"></button><button type="button" role="radio" aria-checked="false" aria-label="Blaugrün" style="--c:#14b8a6"></button><button type="button" role="radio" aria-checked="false" aria-label="Bernstein" style="--c:#f59e0b"></button><button type="button" role="radio" aria-checked="false" aria-label="Indigo" style="--c:#6366f1"></button></div><div class="ac"><button type="button" class="cn">Abbrechen</button><button type="button" class="ok">Speichern</button></div><span class="nt" hidden>Ohne Titel</span></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Overlays

Alle ansehen: Overlays

Wofür du ihn nutzen kannst

Einen Termin anzulegen sollte nicht bedeuten, den Kalender zu verlassen, deshalb öffnet sich dieses Popover direkt neben dem angeklickten Slot. Es liest Tag und Uhrzeit aus den Kopfzeilen des Rasters, wechselt die Seite, wenn kein Platz ist, und richtet den Pfeil auf die Zelle. Speichern legt einen farbigen Block in den Slot, der sich per Klick wieder bearbeiten lässt. Passt zu Terminplanern, Buchungstools und Teamkalendern.

Die Hauptfarbe markiert heute, den Speichern-Button und den Auswahlrahmen. Mit den Pfeiltasten bewegst du dich durchs Raster, Enter im Titel speichert und Escape bricht ab, der Fokus geht zurück zur Zelle.