Crear e insertar calendario de Google Calendar en mi sitio web

Comparto en este articulo como insertar un calendario de Google Calendar en las páginas de un sitio web, para mostrar eventos planificados y que se mantenga actualizado con el original.
Usar un calendario ya existente o como crearlo agregando los datos en un archivo ICS de iCal.

Crear archivo ICS para crear calendario en servicio online

Se puede hacer usando programas que permiten convertir una hoja de cálculo en un archivo de extensión ICS.
Otra opción es hacerlo manualmente usando un editor de texto plano como Notepad+
Código elemental de ejemplo de archivo ICS con eventos de tres días.

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
DTSTART;VALUE=DATE:20221101
SUMMARY:Dia de Todos los Santos.
SUMMARY:Otro evento el mismo dia
END:VEVENT
BEGIN:VEVENT
DTSTART;VALUE=DATE:20221102
SUMMARY:Dia de los Fieles Difuntos.
END:VEVENT
BEGIN:VEVENT
DTSTART;VALUE=DATE:20221103
SUMMARY:San Martin de Porres. 
END:VEVENT
END:VCALENDAR

Importar datos de archivo ICS a Google Calendar

Accede a Calendario de Google en: https://calendar.google.com/
Abre la Configuración presionando el icono de rueda dentada y en Añadir calendario presiona "Crear un calendario".
Dale un nombre y una descripción.
Vuelve a la Configuración y en el panel de la izquierda En Importar y exportar presiona "Importar".
Presiona "Seleccionar un archivo del ordenador", a continuación, el nombre del calendario e "Importar".
Otra opción lógicamente, es insertar un calendario existente o crear uno nuevo e ir agregando los datos manualmente.
Después de eso necesitamos hacer público el calendario antes de compartirlo en la web.
Para eso en la Configuración selecciona el calendario a compartir y en Permiso de acceso a los eventos marca la casilla: "Compartir públicamente".

Insertar uno o varios calendarios de Google Calendar en un sitio web

Para insertar un calendario en nuestro sitio usamos la opción Integrar.
Integrar se conoce como la acción de publicar uno o más calendarios en internet.
Para eso es requisito hacerlos públicos.
Existen tres métodos

Insertar calendario mediante embed con la URL pública

Dirección para acceder un calendario desde un navegador web. Usa el elemento embed por lo que se puede insertar en un documento HTML.
No permite parámetros de personalización.
A continuación se inserta en esta página un calendario de ejemplo creado en Google calendar con fines demostrativos, usando el elemento embed.

Calendario de pruebas

Insertar calendario mediante un iframe

Código de un marco para insertar el calendario en una página web. Es posible personalizar el código o insertar varios calendarios.
Para usar este método haz lo siguiente.
No recomiendo insertar el código que proporciona Google porque no validará y no será adaptable la página para móviles.
Lee como hacerlo de forma similar a insertar un mapa de Google Maps: Insertar un mapa de Google en un iframe
A continuación, el mismo calendario anterior personalizado e insertado en un marco (iframe). En este caso se eliminó el botón de imprimir y el aviso de la zona horaria.

Calendario de pruebas personalizado

Después de esto se puede editar el calendario regularmente, accediendo a Google Calendar e introduciendo los datos y el calendario que se muestra en nuestra página, se actualizará automáticamente.
En este ejemplo que se trata de un santoral, es necesario siempre marcar la opción para que el evento se repita anualmente.
El tercer método es usar la dirección publica en formato iCal para ser usado por otras aplicaciones.

Diferencias entre iframe, embed y object para insertar contenido en páginas

Los tres elementos fueron creados para insertar o incrustar objetos en HTML.
- La etiqueta IFRAME es extremadamente simple. La sintaxis para hacerlo funcionar es:
<iframe src="Nombre de archivo"></iframe>
Para que valide el estilo se tiene que especificar con CSS.
Google no ve con buenos ojos los marcos, porque no puede verificar el origen de lo insertado.

- EMBED es básicamente lo mismo que IFRAME, solo que con menos atributos. Formalmente, EMBED es una etiqueta HTML 5, pero en varios navegadores también funcionará para HTML 4.01.
<embed src="Nombre de archivo"> (sin cierre de etiqueta al final).

- La etiqueta OBJECT es un poco más antigua que IFRAME y EMBED y también funciona con HTML 4.01.
La sintaxis para hacerlo funcionar es:
<object data="NombreArchivo"></object>

Páginas relacionadas



Comparte

Sígueme en las redes sociales