Integrando Google Calendar con su sitio web
Google Calendar es una gran herramienta para insertar en su sitio, y es increíblemente fácil de usar con un iFrame.
Antes de entrar en más estilo para el Calendario, voy a ver rápidamente cómo insertar su Google Calendar en cualquier lugar de su sitio.
Puede insertar un calendario en vivo para que otros lo editen junto con usted, o editarlo de manera privada, mientras que todos los visitantes pueden ver sus actualizaciones de los eventos a medida que ocurren.
Todo esto se hace con la sencillez y la facilidad de uso de la marca registrada de Google, sin embargo, si desea usar CSS para darle un estilo adicional a su calendario, necesitará pasar un poco de tiempo ajustando con prueba y error para que sea de su agrado.
Primero, debe seleccionar el calendario que desea incrustar en su sitio en la pestaña 'Calendarios' de su página de configuración.
El código de iFrame está disponible en la página siguiente, como se muestra a continuación, sin embargo, puede personalizar aún más el calendario en Google.
En la interfaz que se le da, puede ajustar la configuración básica, como el título, los colores y los elementos que se mostrarán. El código de iFrame anterior se actualizará a medida que realice cambios en la configuración. Una vez que esté satisfecho con su configuración básica, puede soltar el código en cualquier lugar que desee en su sitio, ya que es simplemente HTML.
Sin embargo, la configuración ofrecida por Google es básica, por lo que para que se adapte al estilo único de su sitio, querrá un poco de poder de edición adicional. Desafortunadamente, la adición de reglas CSS al documento primario no funciona, incluso cuando se agrega una directiva importante para cada regla. La razón de esto es doble:
1. El documento de host y el documento en el iFrame están completamente separados. Esto parece una declaración obvia, pero bastante fácil de pasar por alto.
2. El documento en el iFrame está alojado en un dominio separado (Google.com) lo que significa que la mayoría de los navegadores bloquearán cualquier intento realizado desde otro dominio para modificar el contenido dentro de ese documento.
Si observa el código de iFrame anterior, puede ver un fragmento de código, similar al siguiente:
https://www.google.com/calendar/embed?src="u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/LondonAquí es donde su iFrame apunta, y es la ubicación del documento base para su calendario. Vaya a la URL y vea la fuente, usando su navegador o cualquier herramienta preferida. Cree una nueva página en su sitio con el marcado recuperado del origen de la URL, solo hay dos líneas en el código que necesitan actualización:
Como puede ver, ambas etiquetas contienen URL relativas, necesitan el prefijo con "https://www.google.com/calendar/" para que se vean así:
Esto apunta su iFrame a la nueva página en su dominio y no a Google, lo que significa que es (efectivamente) alojado por usted. El siguiente paso es agregar declaraciones de CSS personalizadas al nuevo documento para anular los elementos en el calendario de Google.
Tendrá que crear 2 nuevos archivos PHP, el primero: custom_calendar.php es el archivo de calendario real, y custom_calendar.css, un archivo CSS para darle estilo al calendario. El primer archivo es el principal que hace esto posible; el segundo archivo le permite cambiar cualquiera de las propiedades de CSS. Con un poco de magia CSS, ¡debería poder personalizarla aún más para que se ajuste a su sitio a la perfección!
Código de calendario personalizado
CSS
Ahora que ya tiene todo listo su Calendario, querrá cambiar el CSS para que coincida con las necesidades de su sitio y, lo más probable, con el esquema de colores.
Las clases que querrás consultar están a continuación.
En primer lugar, para adaptarse a su esquema de color, es posible que desee editar el color del borde / fondo general del calendario. Para hacer esto agregar .view-cap , .view-container-border al CSS y cambie el fondo a su color elegido.
.mv-dayname Esta es la clase que controla los nombres de los días en la parte superior del Calendario. Simplemente agregue .mv-dayname a su custom_calendar.css y agregue algunas variables para comenzar.
También hay una .mv-daynames-table que controla la celda en la que se encuentra cada nombre de cada día. Recuerde también cambiar el color de los bordes y el fondo mismo.
.st-bg Esta es la clase que controla el fondo de cada una de las celdas. También hay .st-bg-today y .st-bg-next que controlan la visualización del día actual y del mañana permitiéndole distinguir entre ellos.
.st-dtitleEsta clase controla las fechas de los días en el Calendario. Además, de manera útil, Google ha incluido
.st-dtitle-today y .st-dtitle-next
cuáles son las clases que controlan la visualización de las fechas del día actual y el día siguiente, respectivamente. Estas clases son útiles para resaltar hoy y mañana.
Además, dentro de .st-dtitle clase hay .st-dtitle-nonmonth que es la clase que controla la visualización del texto para las fechas en un nuevo mes que no están presentes en el mes actual.
Otra clase importante para recordar al editar .st-bg y usando .st-dtitle es .st-dtitle-down esto se aplica a la celda debajo de hoy; cuando por defecto tiene un borde en la parte superior que coincide con el borde que rodea el día actual.
Cambiando .st-bg , .st-bg-today , .st-dtitle y .st-dtitle-today el siguiente ejemplo fue creado.
Aquí está el CSS:
.st-bg { background:black; }.st-bg-today { background:yellow; border-left:1px solid yellow; border-right:1px solid yellow; }.st-dtitle { background:white; } Con .view-cap , .view-container-border establecido en negro y .mv-dayname-table establecer en blanco se crea el siguiente resultado.
Aquí está el código CSS:
.view-cap, .view-container-border { background-color:black; }.mv-daynames-table { color:white; background:black; }.mv-event-container { border-top:1px solid black; }Los bordes de las celdas se pueden eliminar editando las clases border-left, border-right y border-top dentro del CSS de cada una de las clases, como se muestra en el siguiente ejemplo.
Aquí está el código:
.st-bg { border-left:none; }.st-dtitle { border:none; background:white; }Al usar estas clases de CSS, podrá personalizar su Calendario de Google e integrarlo completamente con el resto de su sitio.