FullCalendar de JQUERY Y RAILS

higinia publicó esto el 19/05/11 en Herramientas, Lenguajes de Programación, Noticias. 4 comentarios

Les queria mostrar un calendario con el cual me entusiasme mucho cuando lo puse en práctica, claro que adaptándolo a mi aplicación.
FullCalendar es un plugin JQuery para implementar un calendario con una interfaz muy sencilla de implementar y muy personalizable por medio de CSS.

Para configurarlo, este recurso brinda un conjunto de parámetros, objetos y eventos como:
*Opciones para definir meses, años, si el elemento es arrastrable, la transparencia del elemento arrastrado, titulo, etc.
*Eventos para proveer los datos.
*Eventos que se disparan al hacer clic en un día, al cargar, al arrastrar, al soltar, etc.
*Objetos del calendarios como título, fecha, hora, etc.
*Ademas es de código abierto

De acuerdo a mis necesidades y a mi lenguaje utilizado, lo implemente de la siguiente manera:
Se descarga el archivo ZIP de la biblioteca JQuery, el plugin y demos funcionales y los incluís a tu archivo que contienen tus scripts.

Inicialmente en tu formulario donde vas a presentarlo, lo llamas con un simple identificador

Luego en la parte del codigo javascript, incluís el conjunto de parámetros que te sea mas útil.

A modo de ejemplo les muestro algunos que utilice:

<table>
  <tr>
  <a><%= link_to 'Nuevo Evento', turno_tarea_turnos_path %></a>
 
// Este link_to nos llevara a los distintos eventos que serán mostrados en el calendario (en el caso de mi aplicación)
 
 </tr>
</table>
 
<table>  
<div id='calendar'></div>  
 
Acá comenzamos a configurar el calendario
<script type="text/javascript">
  $(document).ready(function(){
$('#calendar').fullCalendar({   
          editable: true,
          header: {
              left: 'prev,next',
              center: 'title'
              /*right: 'month,agendaWeek,agendaDay'*/
          },
          defaultView: 'agendaWeek',      
          height: 600,
          slotMinutes: 30,
          minTime : 8,
          maxTime : 21,
          firstDay : 1,
          allDaySlot : false,
          columnFormat:'ddd d/M',       
           titleFormat : "MMM d[ yyyy]{ '&#8212;'[MMM] dd 'del' yyyy}",
          weekends: false,
          defaultEventMinutes : 30,        
          buttonText: {prev: '&nbsp;&#9668;&nbsp;',
		next: '&nbsp;&#9658;&nbsp;',
		prevYear: '&nbsp;&lt;&lt;&nbsp;',
		nextYear: '&nbsp;&gt;&gt;&nbsp;',
                today : 'Hoy'},
 
          unselectAuto: false,
          weekMode : false,
          monthNamesShort : ['Enero' , 'Febrero' , 'Marzo' , 'Abril' , 'Mayo' , 'Junio' , 'Julio' ,
                        'Agosto' , 'Septiembre' , 'Octubre' , 'Noviembre' , 'Diciembre' ],
          dayNamesShort : ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
 
 
  // Este pequeño array nos va a permitir visualizar los eventos
          events:[
 
            <% for turno in @turnos = Turno.all   -%>
              {
               id : 'turno: <%= turno.id.to_s %>',
               title  : 'Profesional: <%= turno.profesional.nombre %> Duracion: <%= turno.duracion %>minutos Paciente: <%= turno.paciente.nombre  %> ' ,
               start : 'Fecha: <%= turno.fecha_hora.iso8601 %>',
               end : 'Duracion: <%= (turno.fecha_hora + (60 * turno.duracion)) %>',
               allDay : false,
               url: '<%= eliminar_turno_path(turno) %>'
 
              },
 
            <% end %>           
 
              ],
 
          timeFormat: 'h:mm t{ - h:mm t} ',
          dragOpacity: "0.5",
 
 
 
          eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc){
              if (confirm("Are you sure about this change?")) {
                  moveEvent(event, dayDelta, minuteDelta, allDay);
              }
              else {
                revertFunc();
              }
          },
 
          eventResize: function(event, dayDelta, minuteDelta, revertFunc){
              if (confirm("Are you sure about this change?")) {
                  resizeEvent(event, dayDelta, minuteDelta);
              }
              else {
                 revertFunc();
              }
          },        
 
 
// En este caso, al hacer click sobre el evento, me llevara a la url especificada para ese evento (se muestra mas arriba)
 
 eventClick: function(event, jsEvent){
             if (event.url) {
              if (confirm('Esta seguro de eliminar? Esta accion no se podra deshacer')){
                event.url;
              //return false;
              }else{
                return false;
              }
 
        }
          }
}
 
</script>

Espero que les guste y lo implementen.

Para descargar los archivos js: http://arshaw.com/fullcalendar/
Otro ejemplo que me sirvió lo podes ver en http://fullcalendar.vinsol.com/

4 comentarios

Luis Miguel Bravo dice:
excelente!!! solo quiero acotar que te falto

”
);
});
”
antes de la etiqueta para que compile bien
Publicado el 29 Julio 2011 a las 00:04. Permalink.
Luis Miguel Bravo dice:
antes de la etiqueta
Publicado el 29 Julio 2011 a las 01:41. Permalink.
Carlos dice:
Muy bien amigo, te pregunto como hago para ver solo los dias de lunes a sabado no quiero el domingo
Publicado el 2 Abril 2012 a las 14:48. Permalink.
MARIA dice:
estimados, estoy utilizando esta herramienta pero tengo un problema, yo al momento de seleccionar en un combo un turno, me muestra el calendarios con el turno de la mañana , y al momento de seleccionar en el combo el turno tarde, me crea otro calendario arriba y me muestra el turno de la tarde, es decir me muestra dos calendario, y asu sucesivamente, si selecciono de nuevo el turno de mañana me crea otro calendario con el turno de la mañana ya son ahi 3 calendarios.. como puedo solucionar esto.. muchas gracias por su ayuda
Publicado el 13 Diciembre 2012 a las 13:11. Permalink.

FullCalendar de JQUERY Y RAILS

4 comentarios

Trackbacks and Pingbacks

Dejá un comentario