Calendly ajuste la disposition du calendrier pour s'adapter à la taille de son conteneur. Vous pouvez modifier la disposition et la taille pour mieux l'adapter à votre site Web ou à votre application.
Choisir une disposition en fonction de la largeur
L'intégration en ligne de Calendly dispose de trois styles de disposition. Le style dépend de la largeur du conteneur (appelé « conteneur parent »).
Grande disposition de fenêtre
Largeur de l'élément parent >= 1100px
Exemple
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1100px;height:700px;"></div>
Mise en page de fenêtre moyenne
Largeur de l'élément parent < 1100px et >= 650px
Exemple
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>
Petite disposition de fenêtre
Largeur de l'élément parent < 650 px
Exemple
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>
Supprimer les barres de défilement
Si vous voyez une barre de défilement à l'intérieur de l'intégration :
- Augmentez la hauteur dans le code d'intégration style="min-width:320px;height:750px;"
- Utilisez data-resize="true" pour activer le redimensionnement automatique
Exemple :
<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>
Largeur minimale pour mobile
Calendly a besoin d'au moins 320px de large pour s'afficher correctement sur mobile.
Si l'intégration semble décentrée ou incomplète :
- Vérifiez s'il y a des marges ou des espacements supplémentaires sur mobile.
- Assurez-vous que le conteneur a au moins 320 px de large.
Testez la disposition de votre intégration
Après avoir ajouté l'intégration :
- Vérifiez la disposition sur ordinateur et mobile
- Utilisez l'outil d'examen de votre navigateur pour prévisualiser différentes tailles
- Ajustez la taille ou les marges du bloc selon les besoins