Cet article explique comment j'ai pratiqué pour :

  • afficher sur la plupart des pages du site dans le bloc " Agenda" de la colonne gauche, les principaux événements à venir ;
  • afficher l'agenda complet de la page "notre agenda".

1. Le bloc Agenda

J'ai installé et activé le module "agenda".
Dans "configuration - services Web - agenda", j'ai ensuite créé un nouveau bloc avec les paramètres suivants :

         titre : L'agenda
  début : now
  fin : +2 week
  dates à afficher : 7
  nb d'événements max : 25
  format date : j - m - Y
  format heure : G : i
  champs affichés : description
  labels cachés : description
  IDs des calendrier ********t@gmail.com/private-d4*****2b57646********a35
  fuseau horaire Europe/Paris

Pour les IDs des calendriers, j'ai récupéré le code sur la page de l' application d'aide Google pour l'intégration d'agenda ( cf §2) en cliquant sur le bouton XML de la zone " adresse URL privée". Attention, il  faut supprimer le début ( https://www.google.com/calendar/feeds/) et la fin (/basic).

J'ai ensuite paramétrer le bloc "agenda : L'agenda" dans "structure - bloc" pour qu'il s'affiche dans la première colonne de mon site et pour toutes les pages hormis la page "notre agenda"

Aller ICI pour modifier la façon dont les données du bloc sont affichées. Pour modifier l'aspect graphique, il suffit d'Ajouter une une classe dans le fichier CSS du site ( cf: l'aspect graphique)

2. La page "notre Agenda"

J'ai créé une nouvelle page de type basique ayant pour "notre agenda" pour titre.

J'ai collé dans la source du corps le code issus de l'application d'aide Google pour l'intégration d'agenda. Ce code est reproduit ci-dessous

  <iframe frameborder="0" height="600" scrolling="yes" src="https://www.google.com/calendar/embed?showTitle=0&amp;mode=WEEK&amp;wkst..." style=" border-width:0"></iframe>
  Le code fourni par Google

La page de l'application d'aide Google pour l'intégration d'agenda est plutôt difficile à trouver. J'ai suivi les étapes suivantes :

    • ouverture de la page de mon agenda chez "google agenda"
      (https://www.google.com/calendar/render?hl=fr&pli=1) ;
    • accès à la page des paramètres de l'agenda ;
    • dans les paramètres de l'agenda, clic sur l'item "agenda" ;
    • dans le liste des agendas disponibles, cliquer sur l'agenda à intégrer dans la page web ;
    • récupérer le code qui apparait (ou aller sur le lien de peronnalisation pour un code plus personnel)
    cliquez pour agrandir