Cette documentation détaille une fonctionnalité qui n'est plus maintenue par OpenAgenda. Utilisez les plugins/extensions documentés ici

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:

Voir l'agenda

Cas avec filtre personnalisé

Il faut

Définir le filtre sur la page agenda. Pour l'exemple, je clique sur 'Autour du cinéma', l'url de la page agenda devient alors https://openagenda.com/agenda-arts-en-seine-maritime?oaq%5Bcategory%5D=autour-du-cinema
Récuperer l'export json correspondant à ce filtre: Clic sur Exporter, puis dans la section Exportez votre dernière recherche, clic sur JSON. Le lien à récupérer est: https://openagenda.com/agendas/67169177/events.json?oaq[category]=autour-du-cinema
Intégrer le lien json dans un attribut data-json du widget

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:

Voir l'agenda

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:

Voir l'agenda