Categories
Google

Afficher un Agenda Google dans une page web

Objectif :
On souhaite afficher un agenda google accessible à tous sur une page web.
Solution :
1. Rendre le calendrier public au niveau des paramètres de partage de l’agenda.
2. Utiliser le code fourni par google
Par exemple le code suivant fourni par google:
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

<iframe
src="http://www.google.com/calendar/embed?src=jr86eaio5akqfnmv5kkkes0c8c%40group.calendar.google.com&ctz=Europe/Paris"
style="border: 0" width="575" height="300" frameborder="0" scrolling="no">
</iframe>

nous donne le résultat suivant:

Autres possibilités:
Il est possible d’afficher 2 agendas (ou plus) dans un calendrier.
Par exemple le code suivant permet d’afficher un calendrier intitulé “disponibilité de nos maisons les Plantes et Les Roches” où les 2 agendas appelés sont les suivants:
– 5h1gu6krhhav6leefldm4djucv0%40group.calendar.google.com
– g6b0t72sej92a76a8r26a71dfs%40group.calendar.google.com
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

<iframe src="https://www.google.com/calendar/embed?title=Disponibilit%C3%A9s%20de%20nos%20maisons%20Les%20Plantes%20et%20Les%20Roches&amp;
height=600&amp;
wkst=7&amp;
bgcolor=%23FFFFFF&amp;
src=h1gu6krhhav6leefldm4djucv0%40group.calendar.google.com&amp;
color=%23528800&amp;
src=g6b0t72sej92a76a8r26a71dfs%40group.calendar.google.com&amp;
color=%238D6F47&amp;ctz=Europe%2FParis" 
style=" border-width:0 " width="575" height="400" frameborder="0" scrolling="no"></iframe>

Le résultat nous affiche le calendrier suivant (incluant 2 agendas):

Paramétrages:
– la couleur d’affichage des événements à l’aide de la commande
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

color=%238CBF40&amp; <!-- où  %23 correspond au # et 8CBF40 correspond au code couleur. -->

– le fuseau horaire de l’agenda avec la commande
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

tz=Europe%2FParis <!--  pour Paris par exemple. -->

– le premier jour de la semaine grâce à la commande
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

wkst=7&amp; <!-- où 7 permet de démarrer la semaine le samedi. -->

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Leave a Reply

Your email address will not be published. Required fields are marked *