Quelques exemples d'utilisation du code de prévisualisation d'Agenda OpenAgenda

Les rendus ont un style très basique. Les sites web les intégrants ayants généralement une charte graphique spécifique, il suffit une fois le widget intégré d'appliquer quelques rêgles de style directement aux éléments des widget en utilisant les classes oa-preview, oa-title, oa-desc, oa-range

Cas basique

On ne fait que placer l'identifiant de l'agenda dans le code du widget. Le code devient:


<div class="oa-preview cbpgpr" data-oapr data-cbctl="67169177|fr"> 
  <a href="https://openagenda.com/agendas/67169177">Voir l'agenda</a> 
</div>
<script src="//openagenda.com/js/embed/oaPreviewWidget.js"></script>
          

Ce qui génère:

Cas avec filtre personnalisé

Il faut

Le code:


<div class="oa-preview cbpgpr" data-oapr data-cbctl="67169177|fr" data-json="https://openagenda.com/agendas/67169177/events.json?oaq%5Bcategory%5D=autour-du-cinema"> 
  <a href="https://openagenda.com/agendas/67169177">Voir l'agenda</a> 
</div>
<script src="//openagenda.com/js/embed/oaPreviewWidget.js"></script>
          

Le rendu:

Faire pointer le widget vers son agenda intégré

Il faut changer le lien se trouvant à l'intérieur du widget. Le code devient alors:


<div class="oa-preview cbpgpr" data-oapr data-cbctl="67169177|fr" data-json="https://openagenda.com/agendas/67169177/events.json?oaq%5Bcategory%5D=autour-du-cinema">
  <a href="https://www.alternative76.fr/les-agendas/agend-arts">Voir l'agenda</a> 
</div>
<script src="//openagenda.com/js/embed/oaPreviewWidget.js"></script>
          

Le rendu: