Bonjour,
Je cherche à mettre en forme Google Calendar que j'ai inséré dans mon site. Problème, je ne parviens pas à mettre tout ça en forme pour coller à ma maquette parce qu'évidement Google balance ses propres réglages après que j'ai chargé ma feuille de style. Il y a-t-il un moyen de charger un CSS après que l'HTML ai été parsé pour écraser les styles de Google ?
Merci
4 réponses
Ce qu'il faut savoir avec les iframes, c'est que les contraintes d'host imposé par les navigateurs ne permettent pas de manipuler le DOM d'une iframe qui n'est pas sur le même domaine. De fait, on est obligé de récupérer l'iframe en local.
L'idée, dans le premier point, c'est d'ouvrir le code de l'iframe avec ton inspecteur d'élément en ouvrant dans une fenêtre l'url de l'iframe.
Il faut alors créer un nouveau fichier qui contient l'intégralité du code de l'iframe.
Dans l'iframe de Google, les deux liens étaient relatifs, donc pointaient chez Google.
Mais maintenant que le code de l'iframe est chez toi, sur un ficher à toi, il est sur ton domaine. Donc ces liens pointent dans le vide. Il faut donc les repasser en absolu en ajoutant le domaine de Google.
De là, les liens pointent chez Google, mais l'iframe est hébergée chez toi.
custom_calendar.php, c'est la page dans laquelle tu vas mettre tout le code de l'iframe.
custom_calendar.css, c'est le fichier CSS que tu vas utiliser pour styliser ton calendrier.
Il est à noté qu'en suivant ce tuto, tu as un calendrier "non dynamique", c'est à dire que tu as copié le DOM de l'iframe, mais du coup, vu que tu ne vas plus chez Google chercher les données, la page devient statique.
Pour parfaire tout ça, le mieux serait de faire en parallèle un petit script cURL qui va régulièrement aller chercher le code HTML de l'iframe.
De là, on récupère uniquement le body, et on remplace le body du fichier custom_calendar.php par celui récupéré via cURL.
Mais ça revient au final à utiliser un flux. A ce moment là, autant utiliser le véritable flux XML si tu en as les compétences.
L'avantage du HTML, c'est que la structure est déjà mise en forme. Mais bon, tu peux tout aussi bien te servir de la structure de l'iframe pour mettre en forme le XML que tu récupères.
Donc finalement, le moyen le plus propre reste l'API, le second est le XML, et celui du tuto c'est un peu la solution hyper crade qu'on met en place parce qu'on ne sait pas faire autrement. Je déconseille donc, même si j'ai donné le lien histoire de dire que c'était faisable.
Bonsoir,
Il y a cette solution qui pourrait potentiellement fonctionner : http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/. Cependant, j'ai lu sur plusieurs forums et threads Stackoverflow qu'on ne pouvait pas surcoucher l'iframe de Google Calendar.
Quoiqu'il en soit, la solution la plus propre serait d'utiliser l'API de Google Calendar afin d'avoir un contrôle total sur tes données, qui seraient alors considérées comme des données de ton site.
Autre solution, moins propre mais tout de même moins pire que la surcharge CSS sur iframe, ça serait de récupérer le XML de ton calendrier, et de le parser en PHP pour ensuite le réorganiser comme tu le souhaites et en gérer l'affichage, et donc le CSS.
Bon courage ;)
Bonjour Pakito,
Merci beaucoup de ton aide. La première solution me parait être la plus accessible pour moi. Toutefois certaines parties du tuto me paraissent obscures. Pourrais-tu m'aider à y voir plus clair ?
Voici les parties du tuto sur lesquelles je butte :
This is where your iFrame points to, and is the location of the base document for your calendar. Go to the URL and view the source, using your browser or any preferred tool.Create a new page on your site <u><strong>!!! QUELLE PAGE DOIT-ON CRÉER, OÙ ? S'AGIT-IL DE LA PAGE QUI CONTIENT L'IFRAME DU CALENDAR GOOGLE ET SI OUI DOIT-ON PLACER ÇA DANS LES BALISES HEAD ? !!!</strong></u> with the markup retrieved from the URL source, there are only two lines in the code that need updating:
<link type="text/css" rel="stylesheet" href="969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css">
<script type="text/javascript" src="969ff39784188d8d017a0c60c8f2558aembedcompiled__en_gb.js"></script>
As you can see, both tags contain relative URLs, they need prefixing with “https://www.google.com/calendar/” so they look like this:
https://www.google.com/calendar/969ff39784188d8d017a0c60c8f2558aembedcompiled\_fastui.css
https://www.google.com/calendar/969ff39784188d8d017a0c60c8f2558aembedcompiled\_\_en\_gb.js
<u><strong>!!! SI JE COMPRENDS BIEN CE SONT CES 2 LIENS ABSOLUS (ENFIN CEUX RÉCUPÉRÉS CHEZ GOOGLE COMME EXPLIQUÉ PLUS HAUT) QU'IL FAUT INTÉGRER A MA PAGE ? !!!</strong></u>
This points your iFrame to the new page on your domain and not Google’s, meaning it is (effectively) hosted by you.
<u><strong>!!! ALORS ÇA JE NE COMPRENDS PAS POURQUOI EN ECRIVANT UN LIEN GOOGLE ÇA POINTERAIT SUR MON DOMAINE !!!</strong></u>
The next step is to add custom CSS declarations to the new document to override elements in the Google calendar.
You’ll need to create 2 new PHP files <u><strong>!!! WHERE ? ET QU'EST-CE QU'ON ECRIT DEDANS !!!</strong></u>,
the first: custom_calendar.php is the actual calendar file, and custom_calendar.css, a CSS file to style the calendar. The first file is the main one that makes this possible; the second file allows you to change any of the CSS properties. With a little CSS magic, you should be able to customize it further to fit your site perfectly!
Désolé mais je ne suis pas encore assez compétent pour lire entre les lignes de ce genre de tuto :)
Merci de ton aide !
Merci beaucoup pour toutes ces précisions. En effet, si le Calendrar devient statique c'est tout de suite moins utile dans mon cahier des charges. Comme je n'ai pas les compétences ni pour utiliser l'API ni pour manipuler le XLM, je vais en rester à mon bricolage d'un habillage externe qui entoure mon IFRAME.
Merci encore de ton temps et de la clarté de tes explications…