Cómo agregar estilos CSS a un Calendario de Google incrustado
Si has intentado incrustar un Calendario de Google y darle estilo con CSS personalizado, probablemente hayas notado que Google impide que tus estilos se apliquen correctamente. Dado que Google Calendar no proporciona muchas opciones de personalización, a menudo te quedas con un calendario incrustado que no coincide con el tema de tu sitio web. Peor aún, las incrustaciones de Google Calendar no son compatibles con dispositivos móviles, por lo que tu calendario puede ser inutilizable en teléfonos móviles. Afortunadamente, utilizando este proceso simple, es posible incrustar un calendario de Google totalmente personalizado, compatible con CSS y adaptado a dispositivos móviles en cualquier sitio web.
¿Por qué las incrustaciones de Google Calendar bloquean el CSS?
Cuando incrustas un Calendario de Google en tu sitio web, Google utiliza un elemento HTML iframe para cargar el contenido del calendario en tu página. Básicamente, el elemento iframe crea un contenedor rectangular dentro de tu sitio web y luego carga una página web separada de calendar.google.com en él.
Debido a que el navegador carga el contenido del iframe como un sitio web completamente diferente, ninguno de los CSS de tu sitio se aplicará. El iframe actúa como una barrera que el CSS no puede atravesar, y el navegador no te permitirá aplicar estilos a nada dentro de él. Técnicamente, el navegador implementa la política de mismo origen que impide que los estilos CSS de un sitio web afecten a otro sitio web diferente.
Ejemplo:Si tienes curiosidad, en realidad puedes abrir las páginas web del Calendario de Google (las que normalmente se cargarían en iframes) como pestañas normales del navegador. Haz clic aquí para intentarlo.
Cómo incrustar un Calendario de Google con CSS personalizado
Styled Calendar facilita la adición de CSS personalizado a un Calendario de Google incrustado. Sincronizaremos los eventos de tu calendario con un solo clic, luego podrás usar nuestro editor de CSS para un control ilimitado. Una vez que hayas personalizado tu calendario, lo incrustarás en tu sitio con un fragmento de HTML (al igual que lo harías con una incrustación tradicional de Google Calendar).
Mira el editor de CSS de Styled Calendar en acción
El video a continuación demuestra cómo Styled Calendar se puede utilizar para agregar CSS personalizado a un Calendario de Google incrustado.
Información:El editor de CSS de Styled Calendar es una función de pago, pero la gran mayoría de nuestros usuarios diseñan e incrustan sus calendarios sin costo alguno aprovechando nuestras 60+ preferencias gratuitas. Estas funciones son completamente gratuitas, siempre. Prueba Styled Calendar ahora.
¿Listo para comenzar con Styled Calendar?
¿Listo para incrustar un Calendario de Google totalmente personalizado y adaptado a dispositivos móviles en tu sitio web? Regístrate y prueba nuestro editor de calendario ahora.