Intégration Javascript

Si vous désirez afficher des événements de votre calendrier sur votre site, la manière la plus simple est l'intégration Javascript. Ça consiste en un code de la forme : <script type="text/javascript" src="https://ADRESSE_DE_VOTRE_CALENDRIER/api/events/integration.js?VOS_FILTRES"></script> que vous pouvez insérer dans votre page web.

Celui-ci va injecter des blocs d'événements selon les critères que vous aurez déterminé dans VOS_FILTRES. Par défaut, ça affiche les 4 prochains événements du calendrier (titre, image, date et heure), en colonne, dans un format très sobre.

La force de l'intégration Javascript, c'est qu'elle vous permet de fournir votre propre gabarit et feuille de style directement par l'interface. Attention, cette section requiert un certain niveau de connaissance en codage HTML et CSS.

Accéder à la configuration

Commencez par accéder aux réglages de votre calendrier.

Ensuite, affichez la section de configuration de l'intégration Javascript.

Enfin, entrez votre code dans la section approriée : le HTML dans en haut et le CSS en bas. Si vous laissez un champ vide, le template par défaut sera utilisé.

Moustaches

Le template utilise des balises de type "moustaches", qui seront remplacées par des données d'événements. Les données disponibles peuvent être étendues selon les demandes. Sans entrer dans les détails, {{date}} sera remplacé par la valeur de la donnée "date" et {{#events}} (notez le dièse) va répéter tout jusqu'à arriver sur {{/events}} (exactement identique).

Template par défaut

Voici le template par défaut. C'est un bon point de départ pour produire son propre template.

HTML

<div id="caligram">
{{#events}}
<div class="caligram-event">
<a target="_blank" href="{{url}}">
<div class="caligram-event-image"><img src="{{thumbnail_url}}" /></div>
<div class="caligram-event-content">
<span class="caligram-event-title"><strong>{{title}}</strong></span>
<br>
<span class="caligram-event-datetime"><em><span class="caligram-event-date">{{ date }}</span> <span class="calligram-event-time">{{ time_start }}{{#time_end}} à {{ time_end }}{{/time_end}}</span></em></span>
</div>
</a>
</div>

CSS

#caligram { clear: both; }
#caligram .caligram-event { border: 1px solid black; margin-bottom: 15px; }
#caligram .caligram-event a { padding: 5px; color: black; text-decoration: none; display: block; }
#caligram .caligram-event a:after { content: ""; display: table; clear: both; }
#caligram .caligram-event-image { float: left; margin-right: 15px; max-width: 50%; overflow: hidden; }
#caligram .caligram-event-content { float: left; clear: right; max-width: calc(50% - 15px); }