BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Calendario de Eventos Responsive en HTML5, colorbox y base de datos MySQL

28/OCT/2013 31.174 visitas Ver comentarios
Calendario de Eventos Responsive en HTML5, colorbox y base de datos MySQL

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Si ya habías visto el calendario en HTML5 que nos dejaba Eric Wenneberg en mi anterior entrada, sabrás que soy muy fan de este tipo de widgets porque es muy común que me los pidan en proyectos en los que participo o he participado.

Pero me gusta tener a mano un recurso que pueda personalizar a mi gusto, no soy muy fan de jQueryUI, no soy fan de su peso y ni de su estética en general, por eso me gustan tener alternativas a las que les pueda meter mano con facilidad.

Pues bien, en este calendario, estaba todo servido, quitando el problemilla de esconder una semana por haber tocado demasiado el CSS, el calendario tal como está funciona realmente bien, pero le faltaba la funcionalidad de poder crear, editar y eliminar eventos, uniéndolo con un mini entorno backend de PHP y MySQL.

Ni lerdo ni perezoso, me he puesto manos a la obra, integrando un modal, en este caso el archiconocido Colorbox de Jack More, que lo debo haber usado más veces que él... y un poco de MySQLi y PHP para gestionar mis eventos.

Debo decir que he modificado muchísimo el JS original (pero le he pedido permiso al autor para hacerlo) por lo que de nada te valdrá bajarte el fichero original del autor, sino que deberás usar el modificado por mi.

Esto tiene algo de malo, y es que no he revisado su código al 100% y no puedo dar fe de que no contenga nada. Sigo las actualizaciones de Eric en Twitter sobre su calendario y por ahora veo que modifica los estilos, con lo que, como yo he eliminado toda la parte no compatible de las flex box, tampoco nos afecta.

Pero yendo al grano, no tengo mucho que contar, la vista del calendario es la misma que en el post anterior, el verde de mi web, celdas con eventos marcadas con un recuadro blanco y al hacer click, la lista de eventos.

Cada celda del día (mal llamada celda porque no es una tabla), contiene un botón (+) para agregar un evento (aun no está bloqueado no insertar eventos en días pasados) y en la lista de eventos del día, cada uno dispone de un botón para editar su texto o, directamente, para eliminarlo.

Te invito a ver la demo y a descargarlo, la tabla MySQL no está incluida, pero tiene un ID, una fecha (campo DATE en formato yyyy-mm-dd) ya que no soy nada amigo de usar campos enteros para fechas y un campo de texto para el título del evento. No hace falta nada más.

El modal Colorbox se encarga de no salir nunca de la ventana, el único defectillo, quizás, sería que al cerrar el modal se recarga la página para cargar los nuevos eventos y no lo hace por ajax, con lo que si estabas en un mes que no sea el actual, tendrás que moverte hasta tu fecha. Igual en futuras versiones lo mejore.

Espero que te guste, que te funcione a la primera y que me dejes muchos comentarios aportando mejoras... y y sabes, que cualquier compartición de este artículo en tus redes sociales es más que bienvenida.

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018