Contenido

Crear un iCal (estilo iPhone) con jQuery

14 feb

+ 16

El calendario del iPhone va a dejar de ser únicamente conocido por ese nombre ya que ahora con jQuery podemos conseguir un calendario de similar aspecto para nuestras páginas web.

ical_jquery

Mediante unas tablas, un poco de CSS y un mucho de jQuery obtenemos el resultado que podemos ver en el ejemplo. Tambien podemos descargar el código y usarlos en nuestras aplicaciones web.

  • No funciona correctamente en Internet Explorer 6, como es habitual con ese navegador. Pero, lamentablemente es el más habitual por lo que no podemos olvidarnos de él.

  • Es bonito, pero tiene el problema de que no funciona bien en ie6 (el maldito ie6 -pero al que hay que tener en cuenta-): el tooltip de las noticias queda por debajo de los días que le salen por la derecha y no son leibles.

    Lástima!

  • Tengo una solución para que funcione correctamente en ie6 sin que perjudique a los otros browsers.

    1 – Crear la siguiente clase y pegarla en master.css:

    .para_ie6 {
    	position: relative;
    	z-index: 1001;
    }

    2 – En la celda que lleva los eventos meter esta nueva clase, pasaría de ser:
    a ser:

    El resultado está testado en ie6, ie7, ff2, ff3 y opera y funciona correctamente.

    Saludos, ssclamp (Fran)

  • Como no me coge las etiquetas de celda, pongo las llaves como guiones cortos.

    Donde la celda es:

    <td class="date_has_event"->

    debe quedar así:

    <td class="date_has_event para_ie6"->

    Únicamente en las celdas que llevan eventos

  • Excelente aporte!! gracias por el dato ;)

  • @Fran: Tambien podríamos editar el fichero master.css (sobre la línea 42) y dejar la definición .date_has_event de esta forma.

    td.date_has_event {
    background-position:162px 0;
    color:white;
    position:relative;
    z-index:1001;
    }

    Gracias por el aporte.

  • Ahora falta añadir la modificacion para poner los dias de la semana en nuestro formato en lugar de empezar por el domingo jeje… muy buen trabajo el tuyo Andrés, no por esto sino por todo lo que vienes realizando de aquí hacía atrás.

    Saludos ;)

  • Julián, tal como viene el diseño las semanas empiezan en los lunes (Mon=Monday=Lunes) y terminan en domingos (Sun=Sunday=Domingo), como es habitual en español, así que no hay que tocar nada en ese aspecto.

    Saludos

  • Luce genial, y me parece excelente para el wordpress en lugar de “Archivo”.

  • Cierto Fran error mio de comentar sin mirar, perdona, es que cuando yo mire el calendar de ejemplo de Andrés estaba la semana empezando por domingo, y aun no habia mirado el codigo.

    Muchas gracias !! :)

  • ¿Es posible que se puedan trasferir datos continuamente para llenar este calendario desde un archivo ics que se esté actualizando constantemente? Es decir, en lugar que los eventos, descripciones y horarios sean asignados en el código, que se extraigan desde un archivo de iCal, un ics como el Google Calendar. Lo que quiero hacer es actualizar este calendario desde el Google Calendar. No coloco el de Google porque sólo quiero que de entrada se muestren los números, las fechas, sin los eventos ni nada.

  • Hola: estoy usando este calendario y estoy encantada. Solo tengo un problemilla, era con el explorer y use lo que dijo Fran y funciona perfectamente, pero ahora me pasa que cuando hay eventos en el mismo mes la caja del numero del dia siempre sale por encima del evento, asi qeu si hay un evento el dai 9 y el 24 en el dia 9 aparece el 24 en medio del evento.
    Sabeis como poder evitar esto??, muchas gracias

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.