Skip to main content
2 de 6
se añadieron 505 caracteres en el cuerpo
Peisou
  • 734
  • 12
  • 32

Laravel, fullcalendar, cargas datos de manera dinámica

Tengo este calendario que funciona perfectamente, guarda carga y actualiza sin problemas, quiero generar varios calendarios, para que me muestre solo las fechas según un id que tengo en la base de datos, pero la verdad no se muy bien como hacerlo, debería variarlo en el js o en el controlador?:

<div class="card-body collapse in">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-3">
                                    <div >
                                        <h4>Eventos Arrastrables</h4>

                                        <div id='external-events' class="fc-events-container">
                                            <div id='fc-event' class='fc-event bg-red external-events'> Fechas No Disponibles</div>
                                            <div class='fc-event bg-orange external-events' >Consultar Fecha</div>
                                            <div class='fc-event bg-green external-events' >Fecha disponible</div>
                                            <div class='fc-event external-events'>Cumpleaños</div>
                                            <div class='fc-event external-events'>Comida</div>
                                            <div class='fc-event external-events'>Conferencia</div>
                                            <div class='fc-event external-events'>Fiesta</div>
                                            <div class='fc-event external-events'>Meeting</div>
                                            <div class='fc-event external-events'>Fiesta de Baile</div>
                                            <div class='fc-event external-events'>Cena</div>
                                            <p>
                                                <input type='checkbox' id='drop-remove' />
                                                <label for='drop-remove'>Remover después de mover</label>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="box box-solid">
                                      <div class="box-header with-border">
                                        <h3 class="box-title">Crear evento</h3>
                                      </div>
                                      <div class="box-body">
                                        <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                                          <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                                          
                                        </div>
                                        <!-- /btn-group -->
                                        <div class="input-group">
                                          <input id="new-event" type="text" class="form-control" placeholder="Titulo de evento">

                                          <div class="input-group-btn">
                                            <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Agregar</button>
                                          </div>
                                          <!-- /btn-group -->
                                        </div><br/><br/>
                                        <!-- /input-group -->
                                        {!! Form::open(['route' => ['guardaEventos'], 'method' => 'POST', 'id' =>'form-calendario']) !!}
                                        {!! Form::close() !!}
                                      </div>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div id='fc-default'></div>
                                </div>
                            </div>
                        </div>
                    </div>

con su correspondiente javascript justo debajo:

<script>

$(function () {

function ini_events(ele) {
  ele.each(function () {
    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
      title: $.trim($(this).text()) // use the element's text as the event title
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 1070,
      revert: true, // will cause the event to go back to its
      revertDuration: 0  //  original position after the drag
    });
  });
}

ini_events($('#external-event div.external-events'));
ini_events($('.fc-event'));


//Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear();

//while(reload==false){

$('#fc-default').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  buttonText: {
    today: 'hoy',
    month: 'mes',
    week: 'semana',
    day: 'dia'
  },
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
  events: { url:"cargaEventos"},

  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar !!!

  drop: function (date, allDay) { // this function is called when something is dropped
    // retrieve the dropped element's stored Event Object
    var originalEventObject = $(this).data('eventObject');
    // we need to copy it, so that multiple events don't have a reference to the same object
    var copiedEventObject = $.extend({}, originalEventObject);
    allDay=true;
    // assign it the date that was reported
    copiedEventObject.start = date;
    copiedEventObject.allDay = allDay;
    copiedEventObject.backgroundColor = $(this).css("background-color");
    copiedEventObject.borderColor = $(this).css("border-color");

    // render the event on the calendar
    //$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
      // if so, remove the element from the "Draggable Events" list
      $(this).remove();
    }
    //Guardamos el evento creado en base de datos
    var title=copiedEventObject.title;
    var start=copiedEventObject.start.format("YYYY-MM-DD HH:mm");
    var back=copiedEventObject.backgroundColor;

    crsfToken = document.getElementsByName("_token")[0].value;
    $.ajax({
         url: 'guardaEventos',
         data: 'title='+ title+'&start='+ start+'&allday='+allDay+'&background='+back,
         type: "POST",
         headers: {
                "X-CSRF-TOKEN": crsfToken
            },
          success: function(events) {
            console.log('Evento creado');      
            $('#fc-default').fullCalendar('refetchEvents' );
          },
          error: function(json){
            console.log("Error al crear evento");
          }        
    });        
  },

  eventResize: function(event) {
      var start = event.start.format("YYYY-MM-DD HH:mm");
      var back=event.backgroundColor;
      var allDay=event.allDay;
      if(event.end){
        var end = event.end.format("YYYY-MM-DD HH:mm");
      }else{var end="NULL";
      }
      crsfToken = document.getElementsByName("_token")[0].value;
        $.ajax({
          url: 'actualizaEventos',
          data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id+'&background='+back+'&allday='+allDay,
          type: "POST",
          headers: {
                "X-CSRF-TOKEN": crsfToken
            },
            success: function(json) {
              console.log("Updated Successfully");
            },
            error: function(json){
              console.log("Error al actualizar evento");
            }
        });
  },
  eventDrop: function(event, delta) {
    var start = event.start.format("YYYY-MM-DD HH:mm");
    if(event.end){
      var end = event.end.format("YYYY-MM-DD HH:mm");
    }else{var end="NULL";
    }
    var back=event.backgroundColor;
    var allDay=event.allDay;
    crsfToken = document.getElementsByName("_token")[0].value;

      $.ajax({  
        url: 'actualizaEventos',
        data: 'title='+ event.title+'&start='+ start +'&end='+ end+'&id='+ event.id+'&background='+back+'&allday='+allDay ,           
        type: "POST",
        headers: {
          "X-CSRF-TOKEN": crsfToken
        },
        success: function(json) {
          console.log("Updated Successfully eventdrop");
        },
        error: function(json){
          console.log("Error al actualizar eventdrop");
        }
      });
  },
  eventClick: function (event, jsEvent, view) {
    crsfToken = document.getElementsByName("_token")[0].value;
    var con=confirm("Esta seguro que desea eliminar el evento");
    if(con){
        $.ajax({
           url: 'eliminaEvento',
           data: 'id=' + event.id,
           headers: {
              "X-CSRF-TOKEN": crsfToken
            },
           type: "POST",
           success: function () {
                $('#fc-default').fullCalendar('removeEvents', event._id);
                console.log("Evento eliminado");
            }
        });
    }else{
       console.log("Cancelado");
    }
  },

  eventMouseover: function( event, jsEvent, view ) { 
    var start = (event.start.format("HH:mm"));
    var back=event.backgroundColor;
    if(event.end){
        var end = event.end.format("HH:mm");
    }else{var end="No definido";
    }
    if(event.allDay){
        var allDay = "Si";
    }else{var allDay="No";
    }
    var tooltip = '<div class="tooltipevent" style="width:200px;height:100px;color:white;background:'+back+';position:absolute;z-index:10001;">'+'<center>'+ event.title +'</center>'+'Todo el dia: '+allDay+'<br>'+ 'Inicio: '+start+'<br>'+ 'Fin: '+ end +'</div>';
    $("body").append(tooltip);
    $(this).mouseover(function(e) {
      $(this).css('z-index', 10000);
      $('.tooltipevent').fadeIn('500');
      $('.tooltipevent').fadeTo('10', 1.9);
    }).mousemove(function(e) {
      $('.tooltipevent').css('top', e.pageY + 10);
      $('.tooltipevent').css('left', e.pageX + 20);
    });            
  },

  eventMouseout: function(calEvent, jsEvent) {
    $(this).css('z-index', 8);
    $('.tooltipevent').remove();
  },

  dayClick: function(date, jsEvent, view) {
        if (view.name === "month") {
            $('#fc-default').fullCalendar('gotoDate', date);
            $('#fc-default').fullCalendar('changeView', 'agendaDay');
        }
  }
});

/* AGREGANDO EVENTOS AL PANEL */
var currColor = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser = $("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
  e.preventDefault();
  //Save color
  currColor = $(this).css("color");
  //Add color effect to button
  $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
  e.preventDefault();
  //Get value and make sure it is not null
  var val = $("#new-event").val();
  if (val.length == 0) {
    return;
  }

  //Create events
  var event = $("<div />");
  event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("fc-event");
  event.html(val);
  $('#external-events').prepend(event);

  //Add draggable funtionality
  ini_events(event);

  //Remove event from text input
  $("#new-event").val("");
});

});

y en el controlador:

public function cargarDatosDep()
{
    $data = array(); //declaramos un array principal que va contener los datos
    $id = CalendarioEvento::all()->lists('id'); //listamos todos los id de los eventos
    $titulo = CalendarioEvento::all()->lists('titulo'); //lo mismo para lugar y fecha
    $fechaIni = CalendarioEvento::all()->lists('fechaIni');
    $fechaFin = CalendarioEvento::all()->lists('fechaFin');
    $allDay = CalendarioEvento::all()->lists('todoeldia');
    $background = CalendarioEvento::all()->lists('color');
    $borde = CalendarioEvento::all()->lists('borde');
    $count = count($id); //contamos los ids obtenidos para saber el numero exacto de eventos

    //hacemos un ciclo para anidar los valores obtenidos a nuestro array principal $data
    for($i=0;$i<$count;$i++){
        $data[$i] = array(
            "title"=>$titulo[$i], //obligatoriamente "title", "start" y "url" son campos requeridos
            "start"=>$fechaIni[$i], //por el plugin asi que asignamos a cada uno el valor correspondiente
            "end"=>$fechaFin[$i],
            "allDay"=>$allDay[$i],
            "backgroundColor"=>$background[$i],
            "borderColor"=>$borde[$i],
            "id"=>$id[$i]
            //"url"=>"cargaEventos".$id[$i]
            //en el campo "url" concatenamos el el URL con el id del evento para luego
            //en el evento onclick de JS hacer referencia a este y usar el método show
            //para mostrar los datos completos de un evento
        );
    }

    json_encode($data); //convertimos el array principal $data a un objeto Json 
   return $data; //para luego retornarlo y estar listo para consumirlo
}

El nombre del método no coincide con el js porque lo cree para intentar cargar según el id unos eventos u otros, pero el método de cargar datos es el mismo.

Edito: Mi idea seria que en una misma url, tener por ejemplo un botón de menú desplegable, con los diferentes ids que son departamentos, y según el departamento, se carguen las fechas guardadas para las personas en ese departamento, de manera que se refresque el calendario con los datos según dicho id, aunque tampoco me importaría si resulta demasiado complicado tener varios calendarios, pero siempre en la misma url, un poco redundante andar a cargar en distintas urls.. pienso yo. Muchas gracias

Peisou
  • 734
  • 12
  • 32