Comment ajouter des styles CSS à un calendrier Google intégré
Si vous avez essayé d’intégrer un calendrier Google et de le personnaliser avec des CSS, vous avez probablement remarqué que Google empêche l’application correcte de vos styles. Étant donné que le calendrier Google ne propose pas beaucoup d’options de personnalisation, vous vous retrouvez souvent avec un calendrier intégré qui ne correspond pas au thème de votre site. Pire encore, les intégrations de calendrier Google ne sont pas adaptées aux mobiles, ce qui rend votre calendrier inutilisable sur les téléphones portables. Heureusement, grâce à ce processus simple, il est possible d’intégrer un calendrier Google entièrement personnalisé, compatible CSS et adapté aux mobiles dans n’importe quel site Web.
Pourquoi les intégrations de calendrier Google bloquent-elles les CSS ?
Lorsque vous intégrez un calendrier Google sur votre site Web, Google utilise un élément HTML iframe pour charger le contenu du calendrier sur votre page. En gros, l’élément iframe crée un cadre rectangulaire dans votre site Web et charge ensuite une page Web séparée provenant de calendar.google.com à l’intérieur.
Étant donné que le navigateur charge le contenu de l’iframe comme un site Web entièrement différent, aucun des CSS de votre site ne s’appliquera. L’iframe agit comme un mur que les CSS ne peuvent pas traverser, et le navigateur ne vous permet pas de mettre en forme quoi que ce soit à l’intérieur. Plus techniquement, le navigateur mettra en œuvre la politique de même origine qui empêche les styles CSS d’un site Web d’affecter un autre site Web.
Exemple :Si vous êtes curieux, vous pouvez en réalité ouvrir les pages Web du calendrier Google (celles qui seraient normalement chargées dans les iframes) comme des onglets de navigateur normaux. Cliquez ici pour essayer.
Comment intégrer un calendrier Google avec des CSS personnalisés
Styled Calendar facilite l’ajout de CSS personnalisés à un calendrier Google intégré. Nous synchroniserons les événements de votre calendrier en un seul clic, puis vous pourrez utiliser notre éditeur de CSS pour un contrôle illimité. Une fois votre calendrier personnalisé, vous l’intégrerez dans votre site avec un extrait de code HTML (tout comme vous le feriez avec une intégration de calendrier Google tradition nelle).
Regardez l’éditeur de CSS de Styled Calendar en action
La vidéo ci-dessous montre comment Styled Calendar peut être utilisé pour ajouter des CSS personnalisés à un calendrier Google intégré.
Info :L’éditeur de CSS de Styled Calendar est une fonctionnalité payante, mais la grande majorité de nos utilisateurs conçoivent et intègrent leurs calendriers gratuitement en tirant parti de nos 60+ préférences gratuites. Ces fonctionnalités sont entièrement gratuites – pour toujours. Essayez Styled Calendar dès maintenant.
Prêt à commencer avec Styled Calendar ?
Vous êtes prêt à intégrer un calendrier Google entièrement personnalisé et adapté aux mobiles dans votre site Web ? Inscrivez-vous et essayez notre éditeur de calendrier dès maintenant.