Comment intégrer Google Calendar à votre site Web

By Corentin BURTIN

Cet article explique comment sélectionner, personnaliser et intégrer un agenda Google sur votre site Web. Les instructions s’appliquent aux ordinateurs de bureau, quel que soit le navigateur utilisé.

Utilisez l’agenda Google gratuit pour gérer et partager un agenda public sur votre site Web.

Mise en route : Paramètres

Pour intégrer un calendrier, connectez-vous à Google Agenda. Ensuite, allez dans le panneau de gauche et survolez le calendrier que vous souhaitez intégrer. Sélectionnez les trois points qui apparaissent. Dans la boîte d’options développée, sélectionnez Paramètres et partage.

QU’EST-CE QUE GOOGLE CALENDAR?

Copiez le code ou sélectionnez d’autres options

Faites défiler l’écran jusqu’à la section Intégrer le calendrier. Sous Utiliser ce code pour intégrer cet agenda dans une page Web, copiez le code d’intégration. La taille par défaut est un calendrier de 800 par 600 pixels avec le schéma de couleurs par défaut de Google.

Sélectionnez Personnaliser pour modifier les paramètres.

Personnalisation de l’apparence

Après avoir sélectionné Personnaliser, spécifiez la couleur d’arrière-plan par défaut en fonction de votre site Web, du fuseau horaire, de la langue et du premier jour de la semaine. Définissez l’affichage par défaut du calendrier sur Semaine, Mois ou Agenda.

La vue Agenda est utile pour des éléments tels que le menu de la cafétéria ou le calendrier d’un projet d’équipe.

Vous pouvez également spécifier les éléments qui s’affichent sur votre calendrier, comme le titre, l’icône d’impression ou les boutons de navigation.

A lire également :   Nouveautés de Chrome 102, disponible

La taille par défaut est de 800 par 600 pixels. Cette taille convient parfaitement à une page Web pleine grandeur sans autre élément. Toutefois, si vous ajoutez votre calendrier à un blog ou à une page Web contenant d’autres éléments, vous devrez ajuster la taille.

Chaque fois que vous apportez une modification, le site affiche un aperçu en direct. Le code HTML au-dessus de votre calendrier change également.

Lorsque vous êtes satisfait de vos modifications, allez en haut de l’écran, et sous Embed code, copiez (Ctrl+C ou Command+C) le HTML.

Collez votre HTML

Collez (Ctrl+V ou Command+V) le code dans la section appropriée du HTML de votre page Web.

L’agenda est intégré

Visualisez votre page finale pour afficher le calendrier en direct. Toutes les modifications que vous apportez aux événements de votre calendrier sont mises à jour automatiquement.

Si la taille ou la couleur du calendrier n’est pas tout à fait celle que vous aviez en tête, retournez dans Google Agenda et ajustez les paramètres, mais vous devrez à nouveau copier et coller le code HTML. Dans ce cas, vous modifiez la façon dont le calendrier apparaît sur votre page, et non les événements.

3 réflexions au sujet de “Comment intégrer Google Calendar à votre site Web”

  1. Bonjour Corentin,
    Votre article est très intéressant.
    Je l’ai mis en place sur mon site internet mais je n’arrive pas a le rendre responsive, pour les version tablette ou mobile.
    Avez vous une astuce ?
    Cordialement
    Jérôme Peillon Moto Quad Concept

    Répondre
    • Bonjour Christophe,

      Pour rendre Google calendar responsive pour une version mobile, il faut agir sur votre thème. Selon le thème une intégration iframe pour le rendre responsive. Sinon, il faudra contacter les responsable de votre thème.

      Merci pour votre encouragement,
      Thomas

  2. Ping : Jerrico

Laisser un commentaire