Comment intégrer Google Calendar à votre site Web

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.

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.