Calendly ajusta el diseño del calendario para adaptarse al tamaño de su contenedor. Puedes cambiar el diseño y el tamaño para que se adapten mejor a tu sitio web o aplicación.
Elige un diseño basado en el ancho
La inserción en línea de Calendly tiene tres estilos de diseño. El estilo depende del ancho del contenedor (denominado "contenedor principal").
Diseño de ventana grande
Ancho del elemento principal >= 1100px
Ejemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1100px;height:700px;"></div>Diseño de ventana mediana
Ancho del elemento principal < 1100px y >= 650px
Ejemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>Diseño de ventana pequeña
Ancho del elemento principal < 650px
Ejemplo
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>Eliminar barras de desplazamiento
Si ves una barra de desplazamiento dentro del elemento insertado:
- Aumenta la altura en el código insertado style="min-width:320px;height:750px;"
- Usa data-resize="true" para activar el cambio de tamaño automático
Ejemplo:
<div
class="calendly-inline-widget"
data-url="https://calendly.com/your-link"
style="min-width:320px; height:750px;"
data-resize="true">
</div>
<script
type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>Ancho mínimo para móviles
Calendly necesita al menos 320px de ancho para mostrarse correctamente en el móvil.
Si la inserción aparece descentrada o está fragmentada:
- Verifica el relleno o los márgenes adicionales en el móvil.
- Asegúrate de que el contenedor tenga al menos 320 px de ancho.
Prueba el diseño de inserción
Después de añadir la inserción:
- Revisa el diseño en el escritorio y el móvil
- Usa la herramienta para inspeccionar del navegador para previsualizar diferentes tamaños
- Ajusta el tamaño o los márgenes del contenedor según lo necesites