Skip to main content
se eliminaron 1703 caracteres en el cuerpo
Origen Enlace
Peisou
  • 734
  • 12
  • 32

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?:

Edito: Mi idea seria que en una misma url, tener por ejemplo un botón de menú desplegable, con su correspondientelos 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.

Edito 2: He añadido el método que devuelve los datos filtrados por el id al final del javascript justo debajoy lo he puesto aparte aquí.

Codigo Javascript:

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

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aqui, pero no se como implementarlo para que carguen los datos.

Y el metodoMétodo del controlador:

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?:

con su correspondiente javascript justo debajo:

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

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aqui, pero no se como implementarlo para que carguen los datos.

Y el metodo del controlador:

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:

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.

Edito 2: He añadido el método que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aquí.

Codigo Javascript:

Método del controlador:

se eliminaron 1703 caracteres en el cuerpo
Origen Enlace
Peisou
  • 734
  • 12
  • 32
<div class="card-body collapse in">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-3">
                                    
                                    </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>
<script>


 
 $(function () {
    //initialize the external events
     
function ini_events(ele) {
  ele.each(function () {
    // create an 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'));

/* initialize the calendar
 -----------------------------------------------------------------*/
//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("");
});

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

//while(reload==false){ Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aqui, pero no se como implementarlo para que carguen los datos.

Y el metodo del controlador:

$('#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:public function () {
                $('#fc-default').fullCalendar('removeEvents', event._id);
                console.log("Evento eliminado");
            }
        });
    }else{
       console.log("Cancelado");
    }
  },

  eventMouseover: functioncojerDatosDep( event,Request jsEvent$request, view ) { 
    var start = (event.start.format("HH:mm"));
    var back=event.backgroundColor;
    if(event.end){
        var end = event.end.format("HH:mm"$area_id);
    }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$request-index', 8);
    $('.tooltipevent').remove>ajax();
  },

  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$a = "#3c8dbc"; //Red by default
//Color chooser button
var colorChooser =new $CalendarController("#color-chooser-btn");
$("#color-chooser > li > a").click(function (e) {
  e.preventDefault();
  //Save color
  currColor$a = $(this).css("color");
  //Add color effect to button
  $('#add-new-event').css({"background-color"\DB: currColor, "border-color": currColor});
});
$("#add-new-event").click(function (e) {
  e.preventDefaulttable('calendario_eventos');
  //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>select({"background-color": currColor, "border-color": currColor, "color": "#fff"}'*').addClass("fc-event");
  event.html(val);
  $>where('#external-events')['calendario_eventos.prepend(event);

  //Add draggable funtionality
area_id' => ini_events(event$area_id]);

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



$("#deps").change(function(event){
      // Obtenemos todos datos de departamentos
      $.get("calendarInfo/"+event.target.value+"",function(response,state){
        
 return if(response.length < 0){}
  else{
    console.log('EventoS creadoSSSSSSSSSSS');   
    //Remove event from text input
    $('#external-events').prepend(event);
    ini_events>json(event$a);
    }
  });
});

}); Edito 3: He implementado la funcionalidad en el js directamente utilizando el propio codigo que ya tenia antes, pero ahora me devuelve el error :

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.

Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Object.success (calendar:581)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at x (jquery.js:8264)
at XMLHttpRequest.<anonymous> (jquery.js:8605)

Edito: Mi idea seria que en una misma url, tener por ejemploLLevo 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,par de manera quedías intentando solucionarlo pero ya no 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 enocurre nada la misma url, un poco redundante andar a cargar en distintas urls.. pienso yo. Muchas graciasverdad

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos. Y el metodo del controladorjs(el resto ya es secundario digamos):

public $("#deps").change(function cojerDatosDep(Requestevent){
 $request, $area_id)    // Obtenemos todos datos de departamentos
     $.get("calendarInfo/"+event.target.value+"",function(response,state){
        console.log(response);
      if($request->ajax()response.length < 0)
      {
          // Si seleccionas la primera opcion por defecto "seleccionar" no hace nada
      }
  $a = new CalendarController(); else
      {
  $a =  \DB::table   $('calendario_eventos')'#fc->select('*'default')->where(['calendario_eventos.area_id' => $area_id])->getfullCalendar("refetchEvents");
        returnfor(i=0; i < response(.length; i++)->json{
            events = response;
          
          $($a'#fc-default');.fullCalendar({
    }         events: JSON.parse(events)
          });
<div class="card-body collapse in">
                        <div class="card-block">
                            <div class="row">
                                <div class="col-md-3">
                                    
                                    </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>
<script>


 
 $(function () {
    //initialize the external events
     
function ini_events(ele) {
  ele.each(function () {
    // create an 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'));

/* initialize the calendar
 -----------------------------------------------------------------*/
//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("");
});



$("#deps").change(function(event){
      // Obtenemos todos datos de departamentos
      $.get("calendarInfo/"+event.target.value+"",function(response,state){
        
  if(response.length < 0){}
  else{
    console.log('EventoS creadoSSSSSSSSSSS');   
    //Remove event from text input
    $('#external-events').prepend(event);
    ini_events(event);
    }
  });
});

});

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

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos. Y el metodo del controlador:

public function cojerDatosDep(Request $request, $area_id)
{

    if($request->ajax())
    {    
        $a = new CalendarController();
        $a =  \DB::table('calendario_eventos')->select('*')->where(['calendario_eventos.area_id' => $area_id])->get();
        return response()->json($a);
    }
}
<script>

$(function () {
    //initialize the external events
     
function ini_events(ele) {
  ele.each(function () {
    // create an 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'));

/* initialize the calendar
 -----------------------------------------------------------------*/
//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("");
});

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

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript y lo he puesto aparte aqui, pero no se como implementarlo para que carguen los datos.

Y el metodo del controlador:

public function cojerDatosDep(Request $request, $area_id)
{

    if($request->ajax())
    {    
        $a = new CalendarController();
        $a =  \DB::table('calendario_eventos')->select('*')->where(['calendario_eventos.area_id' => $area_id])->get();
        return response()->json($a);
    }
}

Edito 3: He implementado la funcionalidad en el js directamente utilizando el propio codigo que ya tenia antes, pero ahora me devuelve el error :

Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at Object.success (calendar:581)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at x (jquery.js:8264)
at XMLHttpRequest.<anonymous> (jquery.js:8605)

LLevo un par de días intentando solucionarlo pero ya no se me ocurre nada la verdad

js(el resto ya es secundario digamos):

 $("#deps").change(function(event){
      // Obtenemos todos datos de departamentos
     $.get("calendarInfo/"+event.target.value+"",function(response,state){
        console.log(response);
      if(response.length < 0)
      {
          // Si seleccionas la primera opcion por defecto "seleccionar" no hace nada
      }
      else
      {
        $('#fc-default').fullCalendar("refetchEvents");
        for(i=0; i < response.length; i++){
            events = response;
          
          $('#fc-default').fullCalendar({
             events: JSON.parse(events)
          });
se añadieron 377 caracteres en el cuerpo
Origen Enlace
Peisou
  • 734
  • 12
  • 32

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos. Y el metodo del controlador:

public function cojerDatosDep(Request $request, $area_id)
{

    if($request->ajax())
    {    
        $a = new CalendarController();
        $a =  \DB::table('calendario_eventos')->select('*')->where(['calendario_eventos.area_id' => $area_id])->get();
        return response()->json($a);
    }
}

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos.

Edito 2: He añadido el metodo que devuelve los datos filtrados por el id al final del javascript, pero no se como implementarlo para que carguen los datos. Y el metodo del controlador:

public function cojerDatosDep(Request $request, $area_id)
{

    if($request->ajax())
    {    
        $a = new CalendarController();
        $a =  \DB::table('calendario_eventos')->select('*')->where(['calendario_eventos.area_id' => $area_id])->get();
        return response()->json($a);
    }
}
se eliminaron 2782 caracteres en el cuerpo
Origen Enlace
Peisou
  • 734
  • 12
  • 32
Loading
se añadieron 505 caracteres en el cuerpo
Origen Enlace
Peisou
  • 734
  • 12
  • 32
Loading
Origen Enlace
Peisou
  • 734
  • 12
  • 32
Loading