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”][html]
<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>
[/html]
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”][html]
<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>
[/html]
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”][html]color=%238CBF40&amp; <!– où %23 correspond au # et 8CBF40 correspond au code couleur. –>[/html]
– 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”][html]tz=Europe%2FParis <!– pour Paris par exemple. –>[/html]
– 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”][html]wkst=7&amp; <!– où 7 permet de démarrer la semaine le samedi. –>[/html]

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

Leave a Reply

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