¿Quieres poner un calendario de eventos, actividades o de cualquier otra cosa en tu proyecto rails?

Existe un plugin de javascript llamado fullcalendar, es fácil de instalar y de utilizar en conjunto con Rails y te ayudara a mostrar los datos dentro de un calendario. Este tutorial te enseñará a hacerlo.

 Setup del proyecto

Vamos a crear un scaffold de eventos, nuestros eventos tienen que tener título, comienzo y fin.

Revisamos que nuestra migración sea correcta y luego la corremos con:

Los campos title y start son obligatorios para mostrar los eventos, para evitar problemas agregaremos una validación de presencia en el modelo de eventos.

De esta forma si intentamos crear un evento sin título obtendremos un rollback de la operación.

Vamos a agregar un par de datos para mostrar en nuestro calendario, para eso dentro del archivo seed.rb agregaremos:

Y corremos los seeds con:

Ya con los datos ingresados entramos a localhost:3000/events y podemos ver nuestros eventos.

 Setup de FullCalendar

Fullcalendar puede ser descargado o agregado como CDN, las instrucciones se encuentran en http://fullcalendar.io/download/.

Para este ejercicio nosotros lo haremos como CDN, para eso dentro de nuestro layout tenemos que agregar dentro del head los CDN de los estilos y javascript de fullcalendar y también el de la biblioteca moment.js

Dentro de la vista de events#index agregaremos

Y ahora ya tenemos un calendario, aunque todavía falta agregar los eventos.

calendario vacío

calendario vacío

Agregando eventos al calendario

Hay dos formas de agregar los eventos del calendario, la primera es pasando los datos de los eventos directamente dentro del calendario, tenemos que llamar a html_safe para poder pasar los símbolos dentro de los diccionarios sin que sean codificados.

Para entender la necesidad de .html_safe comparemos como se ve un evento con y sin el llamado al método.

Sin html_safe

Con html_safe:

En la documentación de FullCalendar puedes encontrar mucha más información.

http://fullcalendar.io

Para mejorar el estilo del calendario puedes ocupar algún tema de Jquery UI Themes

http://jqueryui.com/themeroller/

Si te gustó el artículo ayúdanos compartiéndolo.

Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.
Share Button