Manejar el Evento Move en FullCalendar y ASP.NET MVC 3


Como vimos en un post anterior FullCalendar es un muy buen plugin hecho con Jquery, no muy difícil de integrar en nuestro proyecto ASP.NET MVC. Ahora en este post les mostrare como manejar el evento Move del plugin, para que podamos modificar en nuestra Base de Datos la hora y fecha de nuestro evento con solo moverlo.
Nuestro primer paso es modificar en nuestra vista el código de llamada al plugin, agregando un nuevo evento llamado eventDrop:

<script type="text/javascript">
         $(document).ready(function () {
              $('#calendar').fullCalendar(
         {
              editable: true,
              events: "/CalEntries/GetEvents",
              header: {
                   left: 'prev,next today',
                   center: 'title',
                   right: 'month,agendaWeek,agendaDay'
              } ,
              editable: true,
              eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                   alert(
                        event.title + " was moved " +
                        dayDelta + " days and " +
                        minuteDelta + " minutes."
                   );

                   if (!confirm("Are you sure about this change?")) {
                        revertFunc();
                   }
                   else {
                        $.post(
                            "/CalEntries/MoveEvent",
                                 {  days: dayDelta,
                                      minutes: minuteDelta,
                                      id: event.id
                                 } ,
                                 function (json) {
                                      alert(json);
                                 } , "json"
                            );
                   }
              }
         } );
         } );
</script>

Luego debemos crear un método llamado MoveEvent en nuestro controlador “Home”:

       public JsonResult MoveEvent(double days, double minutes, int id)
        {
            CalEntries resEvent = (from Event in context.CalEntries
                           where Event.CalEntriesId == id
                           select Event).First();
            resEvent.StartDateTime = resEvent.StartDateTime.AddDays(days);
            resEvent.StartDateTime = resEvent.StartDateTime.AddMinutes(minutes);
            resEvent.EndDateTime = resEvent.EndDateTime.AddDays(days);
            resEvent.EndDateTime = resEvent.EndDateTime.AddMinutes(minutes);

            context.Entry(resEvent).State = EntityState.Modified;
            context.SaveChanges();
            return Json("Done", JsonRequestBehavior.AllowGet);
        }

Ahora si arrastramos un evento de un lugar a otro, este nos indicara cuantos días y minutos se movió y nos mostrara un mensaje de confirmación:



 
Eso sería todo. Suerte.

1 comentarios:

tienes el codigo

Reply

Publicar un comentario