Plusieurs modules, un design personnalisable

Votre agenda OpenAgenda s'intègre de façon transparente dans votre site, via des modules autonomes.

Les modules doivent être placés sur la même page pour interagir entre eux.

L'élément central est la liste d'événement (iframe), puis des filtres (javascript) permettent d'explorer cette liste :
- carte géographique
- moteur de recherche
- catégories et mots-clés
- calendrier

Découvrez des exemples d'intégrations ici.

Les étapes

Connectez-vous à votre compte OpenAgenda,
Sur votre accueil, dans la liste "Mes agendas", choisissez l'agenda en question, puis cliquez sur Gérer > Intégration web (assurez-vous d'être administrateur de l'agenda voulu. Si vous ne l'êtes pas, un des administrateurs peut vous inviter comme co-administrateur.)
Vous disposez alors d'un code d'intégration pour chaque élément que vous pouvez coller dans votre page HTML. Vous pouvez lier la feuille de style de votre site afin de personnaliser l'aspect des modules OpenAgenda.

Les éléments

La liste

L'iframe correspond à la liste d'événements seule.

Un code javascript est disponible pour chaque widget de navigation, et permettra aux visiteurs de filtrer la liste d'événements.

La carte

Vous pouvez personnaliser :

l'icône représentant les points sur la carte.
le positionnement par défaut de la carte
le fond de carte

La recherche

Vous pouvez personnaliser l'intitulé du placeholder en ajoutant un attribut data-search-label="MonPlaceholder".

Il est également possible de précharger le contenu du widget en plaçant un element "input" qui servira de saisie et un élément "button" dans le <div> du widget. Le widget suivra la saisie de l'élément "input" préchargé et lancera la recherche sur un clic de l'élément "button".

Les catégories

Les catégories seront bientôt désactivées, aussi nous vous conseillons d'utiliser plutôt les tags.

Les tags

Vous pouvez organiser les tags en liste brute ou recréer des groupes de tags.

Le calendrier (sélecteur de dates)

Le sélecteur de dates se présente sous forme d'une grille mensuelle. Une alternative est de créer un mini-calendrier.

La personnalisation HTML

La vue liste et le détail de chaque événement peut être personnalisé. C'est particulièrement utile lorsque vous avez des champs additionnels, voici un article dédié à ce sujet.