Foros del Web » Programando para Internet » Jquery »

fullcalendar jquery

Estas en el tema de fullcalendar jquery en el foro de Jquery en Foros del Web. Hola amigos del foro estoy trabajando este calendario ya inserto,consulto ,modifico y elimino eventos en una base de datos, pero necesito implementar eventDrop y que ...
  #1 (permalink)  
Antiguo 07/04/2012, 22:57
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 12 años
Puntos: 6
fullcalendar jquery

Hola amigos del foro estoy trabajando este calendario ya inserto,consulto ,modifico y elimino eventos en una base de datos, pero necesito implementar eventDrop y que lo pueda guardar en la base de datos

en el demo esta el siguiente codigo

Código Javascript:
Ver original
  1. eventDrop: function(event, delta) {
  2.                 alert(event.title + ' was moved ' + delta + ' days\n' +
  3.                     '(should probably update your database)');
  4.             },


como hago para guardar los datos en la base de datos
  #2 (permalink)  
Antiguo 09/04/2012, 06:56
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 14 años, 2 meses
Puntos: 1532
Respuesta: fullcalendar jquery

la pregunta es:

¿que base de datos?, ¿es local (html5 local storage)?, ¿es remota, y si es así, que script del server usas?
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 10/04/2012, 19:47
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 12 años
Puntos: 6
Respuesta: fullcalendar jquery

maycolalvarez gracias por responder

la base de datos que utilizo es postgresql ,utilizo php ,cliente servidor.

y este es el codigo javascript que esta al lado del cliente

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.    
  3.         var date = new Date();
  4.         var d = date.getDate();
  5.         var m = date.getMonth();
  6.         var y = date.getFullYear();
  7.        
  8.         var calendar = $('#calendar').fullCalendar({
  9.          viewDisplay: function (element) {
  10.  
  11.     },
  12.        
  13.         theme: true,
  14.             header: {
  15.                 left: 'prev,next today',
  16.                 center: 'title',
  17.                 right: 'month,agendaWeek,agendaDay'
  18.             },
  19.             selectable: true,
  20.             selectHelper: true,
  21.             select: function(start, end, allDay) {
  22.                 var title = prompt('Evento:');
  23.                 if (title) {
  24.                     $.ajax({
  25.                          url:'archivo.php',
  26.                          type:'post',
  27.                          data:{
  28.                             title: title,
  29.                             start: start.toUTCString(),
  30.                             end: end.toUTCString(),
  31.                             allDay: allDay,
  32.                             }
  33.                        
  34.                     }).done(function(data) {
  35.                     //alert("Datos guardados, respuesta: " + end);
  36.                     });
  37.                    
  38.                    
  39.                     calendar.fullCalendar('renderEvent',
  40.                       //calendar.fullCalendar('refetchEvents',
  41.                         {
  42.                            
  43.                             title: title,
  44.                             start: start,
  45.                             end: end,
  46.                             allDay: allDay,
  47.                        
  48.                            
  49.                         },
  50.                         true // make the event "stick"/ make the event "stick"
  51.                        
  52.                     );
  53.                 }
  54.                 calendar.fullCalendar('unselect');
  55.                
  56.             },
  57.            
  58.             disableDragging:false,
  59.             disableResizing:true,
  60.             editable: true,
  61.             events: "eventos.php",
  62. .........
  63. ........
  64. ........


con el siguiente codigo php inserto el evento en la base de datos
Código PHP:
Ver original
  1. $title = $_POST['title'];
  2. $allDay = urldecode($_POST['allDay']);
  3.  
  4. $fecha_ini=urldecode($_POST['start']);
  5. $fecha = date_create($fecha_ini);
  6. $fechaFormateada=date_format($fecha, 'Y-m-d H:i:s');
  7. $fechaRestada = date('Y-m-d H:i:s',  strtotime($fechaFormateada.' -5 hour'));
  8.  
  9. $fecha_fin=urldecode($_POST['end']);
  10. $fechaf = date_create($fecha_fin);
  11. $fechaFormateadaf=date_format($fechaf, 'Y-m-d H:i:s');
  12. $fechaRestadaf = date('Y-m-d H:i:s',  strtotime($fechaFormateadaf.' -5 hour'));
  13.  
  14. $servidor = 'localhost';
  15. $bd = 'calendario';
  16. $usuario = 'postgres';
  17. $contrasenia = 'hoe798cs';
  18.    
  19. global $servidor, $bd, $usuario, $contrasenia;
  20. $db = new PDO('pgsql:host=' . $servidor . ';dbname=' . $bd, $usuario, $contrasenia);
  21.  
  22.  
  23. $consulta = $db->prepare("INSERT INTO eventos (id_evento,titulo,prueba,inicio,fin)
  24.                                  VALUES (nextval('eventos_id_evento_seq'),'".$title."','$allDay','$fechaRestada','$fechaRestadaf')");
  25. $consulta->execute();


tengo un inconveniente con el evento eventDrop y eventResize.

necesito que el calendario pueda aumentar el tamaño del evento y para esto se utiliza eventResize pero no puedo tener el end del evento o sea la fecha final del evento.(para esto utilizaria eventResize).

y con eventDrop poder arrastrar los eventos a otro dia.

fullcalendar tiene la vista de todo el mes , semana y diario

un evento puede ser para todo el dia o para un intervalo de tiempo (horas)

tengo invonveniente con estos dos eventos eventDrop y eventResize para guardar en la base de datos.




http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/

http://arshaw.com/fullcalendar/docs/...i/eventResize/




Código Javascript:
Ver original
  1. eventDrop: function(event,start,end) {
  2.                      $.ajax({
  3.                          url:'modificar.php',
  4.                          type:'post',
  5.                          data:{
  6.                             title:event.title,
  7.                             //start:event.start,
  8.                             start1:event.start.toUTCString(),
  9.                             allDay:event.allDay,
  10.                             end:event.end,
  11.                            
  12.                             }
  13.                        
  14.                     }).done(function(data) {
  15.                     alert(event.end);
  16.                     calendar.fullCalendar('refetchEvents');
  17.                     });
  18.                     },
  #4 (permalink)  
Antiguo 11/04/2012, 17:50
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 12 años
Puntos: 6
Respuesta: fullcalendar jquery

amigos del foro alguna idea?
  #5 (permalink)  
Antiguo 11/05/2012, 02:46
 
Fecha de Ingreso: agosto-2008
Mensajes: 17
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: fullcalendar jquery

Hola montes28

Te cuento como lo he hecho. Yo uso Mysql y PHP con fullcalendar y consigo mover y alargar el evento, actualizando la bbdd

Para moverlo usar eventDrop
Código:
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
// Actualizamos la base de datos 
 var $url_fichero = "";  // Fichero php 
 $.post( $url_fichero,
  { 
      dias: dayDelta, // Dias que desplazas el evento
      minutos :minuteDelta, minutos que desplazas el movimiento 
     id_evento: event.id, // id del evento para poder buscarlo en la bbdd 
}
)
}
Para aumentar el evento es muy parecido

Código:
eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { 

// Actualizamos la base de datos 
   var $url_fichero = ""; // Fichero php 
    $.post( $url_fichero,
    {
         dias: dayDelta, // Dias que aumentas el evento
         minutos :minuteDelta, // Minutos que aumentas el evento
         id_evento: event.id,  // id del vevento para 
    }
)
}
Espero que te haya servido de ayuda.

Etiquetas: fullcalendar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:25.