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

Crear evento desde el calendario

Pulsas una franja vacía de la semana y sale un globo anclado a ella para poner título y color al evento.

Ajustes

16px
1x

Código

<div class="uvq13-cal"><div class="cal" role="group" aria-label="Semana del 27 de octubre"><span></span><span class="dh" id="uvq13-cal-d0"><span>Lunes</span> <b>27</b></span><span class="dh td" id="uvq13-cal-d1"><span>Martes</span> <b>28</b></span><span class="dh" id="uvq13-cal-d2"><span>Miércoles</span> <b>29</b></span><span class="dh" id="uvq13-cal-d3"><span>Jueves</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>Dentista</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>Diseño</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>Comida con 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">Nuevo evento</p><input class="nm" placeholder="Añadir título" aria-label="Título del evento" 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="Color"><button type="button" role="radio" aria-checked="true" aria-label="Coral" style="--c:#e2553f"></button><button type="button" role="radio" aria-checked="false" aria-label="Verde azulado" style="--c:#14b8a6"></button><button type="button" role="radio" aria-checked="false" aria-label="Ámbar" style="--c:#f59e0b"></button><button type="button" role="radio" aria-checked="false" aria-label="Índigo" style="--c:#6366f1"></button></div><div class="ac"><button type="button" class="cn">Cancelar</button><button type="button" class="ok">Guardar</button></div><span class="nt" hidden>Sin título</span></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Crear un evento no debería obligarte a salir del calendario, así que este globo se abre justo al lado de la franja que pulsas. Lee el día y la hora de las cabeceras de la cuadrícula, cambia de lado si no cabe y apunta su flecha a la celda. Al guardar, cae en la franja un bloque de color que se puede editar. Encaja en agendas y reservas.

El color principal marca el día de hoy, el botón de guardar y el anillo de selección. Muévete por la cuadrícula con las flechas, pulsa Enter en el título para guardar y Escape cancela devolviendo el foco a la celda que lo abrió.