Incrustar calendario en una pagina web

A continuación explicaré cuales son los pasos que hemos de seguir para insertar un calendario en nuestra web, además no será en una ventana externa sino que lo podemos diseñar y predefinir como queramos.

A continuación accedemos a Google Calendar, el servicio que usaremos para crear nuestro calendario en nuestra web. A continuación hemos de introducir un nombre de usuario y contraseña, que ha de ser el de una cuenta gmail.

En el menú de la izquierda Pulsamos añadir, y seleccionamos la opción “Crear un calendario nuevo”.

A continuación rellenamos los datos que nos solicitan con lo que deseemos y marcamos la opción “Compartir toda la información de este calendario con todo el mundo”. En caso de ser una agenda, y los contenidos fueran privados podríamos seleccionar la opción “Compartir únicamente mi información de libre-ocupado”.

Una vez hecho esto veremos que en el menú de la izquierda aparece en la lista de “Mis calendarios” un calendario con el nombre como el que acabamos de crear.

Para mostrarlo en nuestra web haremos lo siguiente:
1. Pulsaremos en la flechita que hay junto al nombre del calendario que deseamos compartir y seleccionamos “Configuración del calendario”.

2. Buscamos la opción “incrustar calendario”, y procederemos a copiar el código html en nuestra página web.

Si lo que queremos es que el propio google Calendar cree la página, pulsaremos en el botón HTML, y veremos la dirección a la cual hemos de crear un hipervínculo.


El resultado de incrustar un calendario en nuestro blog puede dar un resultado como el que muestro aquí:

Además, para el caso de este calendario la dirección sería esta.

Finalmente, como vengo haciendo últimamente aquí el vídeotutorial, en el que explico el procedimiento que he explicado más arriba.


38 pensamientos en “Incrustar calendario en una pagina web

  1. Alexandra

    Gracias por la explicación, pero a mi me ha surgido el problema de que no consigo visualizar los eventos que coloco en el calendario (por lo tanto no me sirve para lo que quiero)
    ¿Cómo puedo hacer que se vean los eventos? he probado haciendo todo público y ni así

    Gracias

  2. Oscar GP

    Hola Alexandra, simplemente tienes que crear un evento en el calendario que has compartido en la web. He creado uno en el 4 y 5 de octubre como ejemplo. Un saludo.

  3. x-link-x

    Hola te queria pedir una ayudita, esque en la cofiguracion de mi blog de comentarios puse pagina completa o algo similar y ahora ya no me sale la opcion para tener esto que tienes tu al final de la entrada para comentar, porfavor ayudame

    te lo agradesco de antemano

  4. Marco

    Hola!, buenas sugerencias, Como se puede tener un calendario interactivo, donde mis lectores puedan agregarse a una lista de un evento en una fecha determinada?.
    Gracias

  5. Carmen

    Hola Oscar.

    He seguido los pasos que indicas y todo bien, pero yo quiero poner el calendario en la columna lateral del blog y no sé, en ese caso, donde tengo que poner el enlace para que se vean los eventos.
    He añadido un gadget a blogger, pongo el código del calendar, lo visualizo en el blog correctamente, pero los eventos no salen marcados. Imagino que es porque no sé donde poner el cógigo HTML que indicas.

    Gracias de antemano y un saludo :)

  6. Nago

    A mi me pasa algo parecido a Carmen.

    He creado un blog para la escuela en blogger (el mio lo tengo en otro sitio).

    He querido introducir el calendario de GoogleCalendar con los eventos incluidos, y para ello he probado los gagdet que aparecen…

    He conseguido introducir el calendario, y debajo consigo que aparezca un huequito para los eventos… pero de todas a todas pone que no hay eventos (aunque yo los he introducido, y los he hecho públicos, o eso creo…)

    La dirección del blog de la escuela: http://izhaurhezkuntza.blogspot.com/

    - ¿Hay alguna forma de que aparezcan? (sería interesante que todos pudiesen ver que actividades tenemos en los proximos días)…

    - Y, si no hay con GoogleCalendars… ¿conoces alguna otra opción?

    Gracias de antemano.

  7. oscargp

    Hola Carmen y Nago, en vuestro caso debéis hacer lo mismo que si lo publicamos en una entrada, la diferencia es que debéis ir a la pestaña diseño del blog, y subpestaña elementos de página.

    Pulsad agregar nuevo gadget, y elegid a continuación HTML / Javascript. Posteriormente pegáis el código que habéis obtenido y ponéis el título que queráis.

    Un saludo.

  8. oscargp

    Por cierto Carmen y Nago, NO AGREGUÉIS EL GADGET, hacedlo como lo hago aquí, esta opción es mucho más avanzada y podréis agregar todos los eventos que queráis. Un saludo.

    hola Marco,

    Lo de introducirse a un evento de forma predeterminada no lo permite el calendario. Crearé un post explicándolo. Un saludo

  9. oscargp

    Mery muchas gracias.

    A TODOS LOS QUE LEAN EL ARTÍCULO MUY IMPORTANTE QUE NO LO AGREGUEN COMO GADGET, si quieren agregar eventos como hago lo hago yo. Un saludo.

  10. Nago

    ¡MIL GRACIAS!

    ¡Lo conseguí!…. eres un buen maestro…

    Aunque… he tenido que hacer una trampita….

    Resulta que seguía todos tus pasos, pero no había manera de que se viesen los eventos… dándole vueltas… descubrí que el problema era que al tener que meterlo en la barra lateral tenía que reducir el tamaño del calendario (220X165 en este caso)… por eso no se veía (no cabía…)

    Después de pensar y experimenta un poco, he llegado a una solución, que aunque poco sofisticada, es efectiva para mis propósitos….

    En resumen, he copiado dos veces el código iframe de mi GoogleCalendar, pero con diferentes configuraciones.
    En las dos he reducido el tamaño para ajustarlo a la barra lateral y he desactivado todas las casillas que están debajo de “mostrar” (Título, barra de navegación, imprimir…). Esto último para conseguir que quede lo más legible posible.

    La primera vez que lo he copiado tenia activada la “Vista predeterminada” en mes, para que se vea el calendario de el mes en el que estemos, y el la segunda copia tenía activada la “vista predeterminada” en AGENDA.
    De esta forma conseguía tener el calendario y debajo la agenda con los eventos….

    Mil gracias de nuevo…

    Ya he dado otro paso… ahora solo me falta conseguir que se vea en euskera… jejeje… pero eso será otro cantar…
    (Google si que tiene posibilidad de poner el navegador en euskera.. pero todavía no he visto señales de eso con Calendar… en fin, poquito a poco…)

  11. JCMiranda

    Hola Oscar, saludos, en referencia a esta respuesta:

    Hola Carmen y Nago, en vuestro caso debéis hacer lo mismo que si lo publicamos en una entrada, la diferencia es que debéis ir a la pestaña diseño del blog, y subpestaña elementos de página.

    Pulsad agregar nuevo gadget, y elegid a continuación HTML / Javascript. Posteriormente pegáis el código que habéis obtenido y ponéis el título que queráis.

    Un saludo.

    Mi pregunta es, al abrir el Gadget eligo HTML / Javascript. pero a donde aparece eso???

    de antemano muchas gracias.
    un gran saludo

  12. Óscar GP

    Hola, respondo a los dos, a ver si conseguimos que quede claro desde los comentarios:

    A Nago,
    como comentas, el tamaño estándar del calendario es un poco grande, en caso de querer ponerlo en la barra lateral, habrá que cambiar el tamaño. Para ello si observamos el código HTML que copiamos de Google Calendar, observaremos los parámetros height i width, con valores entre 400 y 600 aproximadamente. Para que quede bien en la barra la teral el width tendrá que ser de unos 200 aproximadamente, y el height entre 250 y 300 (eso va a gustos).

    lo del euskera no es posible de momento, Google Calendar está por ejemplo en catalán pero en Euskera aún no… tiempo al tiempo :) Seguro que pronto estará :).

    A JCMiranda,
    Vamos a ver, pulsamos sobre “Añadir un gadget”, y a continuación, un poco más abajo verás “HTML/Javascript”. Pulsa ahí, y a continuación en la ventana que te aparece pon un título como “Calendario”, y abajo copias el código HTML que obtenemos de google calendar. Un saludo.

  13. sergio ariel

    MUCHISIMAS GRACIAS!!! soy estudiantes universitario de la facultad de medicina de la Universidad Nacional del Nordeste, y junto con dos compañeros más estamos armando de poco (en la horas libres del estudio y clases) el blog de la Sociedad Cientifica de Estudientes de Medicina.
    Has construido la mejor ayuda para los que no sabesmos absolutamente nada de creación-edición de blog y webs. m
    INFINITAMENTE AGREDECIDO!
    hasta el momento en resuelto todas las preguntas que me fui formulando a medida que avanzaba en el proceso de actualización del blog….

    Quedaría pendiente realizar un cambio en el template que hemos utilizado, y hacerlo más personal. Ud conoce de algun soft o de que forma podremos lograrlo?

    Agredeceré su colaboración nuevamente.-
    ATTe

  14. Cofi

    Muchísimas gracias, de gran utilidad, no sabía yo que el google Calendar se podía usar con tal buena aplicación.

    Saludos!

  15. Adrián

    Por favor necesito poner un calendario con eventos.
    Después de ir a Diseño > Elementos de Página > Agregar Gadget me quedo trabado.

    Lo q hago es ingrestar a “añade tu propio” y tengo una sola opción que dice “añadir por URL”, ahi puse el html que obtuve de google calendar y me salta “La URL contiene caracteres no permitidos”. He dado vueltas y vueltas pero no lo puedo solucionar.

    Espero su respuesta y desde ya, muchas gracias

  16. Vanesa

    Hola Oscar!
    Mil gracias por tus detalladas clases.
    En este caso te escribo porque estuve intentando insertar mi calendario en mi blog.
    La cuestion es que cuando trato de configurarlo, no me aparece la opcion de “incrustar calendario” y por ende no me da el codigo HTML.
    Sera porque mi maquina es algo vieja y todavia uso Windows 98? y por eso algunas herramientas o lenguajes no los muestra?
    Intentare hacerlo desde otra maquina…
    de todos modos agradecere tu ayuda…
    mil gracias otra vez

  17. Ruben

    Oscar.

    Muchas gracias por dedicar un poco de tu preciado tiempo para poner un tutorial sobre este tema, no cabe duda que personas como tu engrandecen este mundo del internet.

    Un Abrazo

  18. Nana

    hola, veo que sobre el tema surgen muchas dudas pero la mian o anda por aqui, creo.
    he colocado un calendario en mi blog en entradas, me sale bien colocado, he conseguido darle el tamaño que quiero y demas pero me encuentro con la pega de que cuando pincho en el para que se abra en una venta a parte, y los niños puedan ver los eventos…..se les abre la configuracion y pueden tocar los eventos publicados,,,

    no hay alguna opcion para que se abra como imagen solo? que puedan verlo pero no tocar nada, ni publicar ni borrar.
    si cierro mi sesion y lo intento de nuevo…al pinchar en el calendario me pide contraseña para entrar en el y eso que tengo puesto caracter publico.
    a ver si alguien me puede echar una manita

    gracias

  19. luis

    quiero compartir varios calendarios (diferentes colores) en un calendario solo,

    si pico la pestaña de uno para sacar el html, se verán los demás o tengo que ir uno a uno?

    gracias de antemano

  20. Liliana

    Gracias, mil gracias a tus enseñanzas, porque puedo ir incorporando cosas a mi blog. Y NO me resulta taaaaannnn diiificiiiiiil, mas vale superfacil. Un cariño grande, grande

  21. Ismael

    Excelente este post… era todo lo que andaba buscando… tenía la idea de hacer hacer uno en php o flash, pero ya no es necesario. Ya lo estoy configurando para mi escuela… jejeje.
    Muchas gracias!!!

  22. kung fu

    A mi me pasaba como a Nago, que al hacerlo pequeño (200×200) para meterlo en la barra lateral de blogger no se veían los eventos y estaba desesperado.
    Un fallo del calendario de google, porque mucha gente lo querrá meter ahí y debería poder verse en ese caso.
    Gracias por el post.

  23. Inma

    A mí me ha salido bien después de estar todo el día rompiéndome la cabeza. He creado en mis blogs, en configuración, un gadget y he pegado el código. Después lo he guardado y he arrastrado ese gadget hasta entradas y me salen todos los eventos, pero nadie puede cambiar y trastear nada. Una vez lo hayas ubicado en entradas puedes cambiarle el tamaño cambiando los parámetros a tu antojo ¡Gracias por todo, Oscar!

  24. Dione

    Muchas gracias nago y oscargp tengo que agradecerles por que ahora tengo un lindo calendario de eventos en mi barra lateral.
    usé google calendar y lo reduje hasta 200×170 y desactivé todo lo de despues de mostrar. solo deje la opcion de pestañas y listo, resultó algo muy bonito y funcional

    Gracias!!!!!!!!!!!!!!!

  25. isabel

    hola! wow gracias por toda la informacion! que hasta ahora me ha sido de gran ayuda! pero queria preguntarte! que otro gadget de calendario a parte del de google puedo usar! please! recomiendame!!!

Los comentarios están cerrados.