2

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:

<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("");
});

Método 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)
          });
3
  • Todo cambia según la respuesta a las siguientes preguntas. Tu quieres visualizar muchos calendarios ¿Al mismo tiempo o en distintas URL?. Si solo quieres visualizar 1 calendario pero con distinta información. ¿ En una misma URL o en distintas ?. ¿ Quieres a modo de "filtro" que cuando con un formulario modifiques parámetros, cambie en tiempo real, o que cuando hagas clic, te lleve a otro enlace donde visualizar otros calendarios? Si me respondes a esto puedo darte la solución. Pero es importante ya que la lógica y uso de lenguajes podría cambiar para realizarlo mas sencillo :)
    – user42165
    Commented el 25 feb. 2018 a las 14:39
  • Muchas gracias Minerillo, edito la pregunta para contestarte a todo y que me puedas ayudar :)
    – Peisou
    Commented el 26 feb. 2018 a las 8:15
  • Perfecto, ahora tu pregunta es mucho mas fácil de interpretar. Deja que me ponga con ella y en un rato lo tienes. =)
    – user42165
    Commented el 26 feb. 2018 a las 12:10

3 respuestas 3

1

A ver, para comprender que quieres hacer, lo que te recomiendo es dividir el proceso en tantos "subprocesos" como sean posibles.

Tu quieres en 1 misma URL, generar distintos calendarios, o más bien, distintos datos para "un mismo calendario". Pensando como programador, "ese mismo calendario" digamos que van a ser las vistas, los números, el diseño, etc. Todo eso será igual. Lo que cambiará será la información que contiene referente a cada departamento.

Ahora, aquí tienes 2 formas, o utilizando javascript de forma dinámica por ajax, o utilizando un formulario de php que te lanza la info.

Debemos diferenciar cuales son los "patrones o partes igual" y cual es lo que se modifica. Y pensar en que punto se modifican los datos y los necesitas.

Lo más "moderno, optimo", sería utilizar ajax y javascript para mostrar la información de forma dinámica en 1 sola URL. Ya que se realiza todo en una misma URL, la interacción del usuario es mucho mas cómoda y completa A su vez, las peticiones se realizan a mayor velocidad por ajax que por php mysql, ya que ajax utiliza notación JSON.

Ahora situados un poco y entendiendo de forma global que es necesario un formulario y que queremos hacerlo en 1 sola URL, de forma dinámica. Sabemos que necesitamos Ajax, JSON, javascript y PHP, vamos paso a paso:

En primer lugar necesitas crear las rutas o URLS donde hacer la petición ajax a la base de datos

Route::get('calendarInfo/{id}','CalendarController@getCalInfo');

Es decir,cada vez que se introduzca la ruta "www.tuproyecto.com/calendarInfo/X", donde X es la ID de lo que quieres buscar, su id única.

Esto, irá al controlador "CalendarController" y buscará la clase "getCalInfo" que ejecutará:

public function getCalInfo(Request $request, $id) { if($request->ajax()) { $calendarInfoFromDB = TABLA::calendarInfoFromDB($id); return response()->json($calendarInfoFromDB); } }

Esto lo que hará es buscar en la base de datos, la información del calendario de la ID pasada por la URL, que será la del departamento concreto. Esta id del departamento la pasarás al ejecutar el formulario. Una vez obtenga un objeto con toda la info de la base de datos, la linea entera de datos, la transforma en notación JSON y la pasa, de donde la tendrás que obtener con javascript en las vistas.

A la hora de utilizar AJAX, debes tener muy prosente en el modelo, que tipo de información estas permitiendo, editar, y visualizar. En el modelo de la tabla que estés consultando, en este caso la info de calendarios.

protected $fillable = ['columna1', 'columna2']; protected $hidden = ['columna4'];

Si no controlas, como es de esperar te recomiendo visitar la documentación al respecto. Es lo que te permitirá editar las columnas y con ello la info de una tabla, o cual quieres que permanezca oculta por seguridad.

Ahora, la ruta que ejecuta el controlador y clase para mostrar el formulario y los calendarios. Recomiendo utilizar el mismo controlador para ejecutar la petición ajax y el formulario.

Route::get('/','CalendarController@index');

Esa ruta te lleva al controlador donde deberás crear la lógica para MOSTRAR LAS IDS de los DEPARTAMENTOS y retornarlos a la vista.

public function index() { $departamentos = TablaDepartamento::get(); return view('carpeta.plantillaFormDepCal', compact('departamentos')); } Estos departamentos se mostrarán en un SELECT del formulario.

Ahora, por último, faltan 2 cosas. Estructurar tus vistas donde se verá el formulario + calendario dinámico, y por otro, el javascript que hará esto posible. Entonces, eliminas toda variable de php y javascript y utilizas solo el HTML y el CSS del formulario y calendario.

EN LAS VISTAS: Debes tener claro que parte de tu calendario va a situarse en forma de HTML en la plantilla blade. En este caso, mínimo supongo que tendrás el Select con los Options, de los distintos departamentos.

<select id="deps"> @foreach($departamento as $dep) <option id="{{ 'dep-'.$dep->id }}" value="{{ $dep->id }}"> {{ $dep->name }} </option> @endforeach </select> Lo que nos mostrará un desplegable de HTML típico de formulario con cada uno de los departamenos. Ahora si te fijas, le ponemos una ID nombre unico al option HTML "dep-X" donde X es la id. Esto es aconsejable ya que mas adelante si quieres hacer algo mas en el formulario, te facilitará en gran medida el tratamiento del mismo desde javascript o jquery.

Por otro lado le agregamos el "value" que será el valor de la opción seleccionada y el nombre del departamento para desde el usuario poder hacer una elección.

**************** EDITADO ************:**

A su vez, también tendrás la parte que se repetirá y común a todos los calendarios. Digamos, el marco, las palabras "lunes, martes, miercoles...".

<ol id="calendario">
    <li id="calenHead">
        <ol>
            <li>L</li>
            <li>M</li>
            <li>X</li>
            <li>J</li>
            <li>V</li>
            <li>S</li>
            <li>D</li>
        </ol>
    </li>

    AGREGAR AQUÍ LOS DÍAS CON EL CONTENIDO UTILIZANDO JAVASCRIPT.
    puedes usar la función "append()" en $('#calenhead'). y situarías
    nuevo HTML justo en este sitio.

</ol>

Ya tan solo te queda la lógica de javascript.

// Al detectar seleccion o cambio en el departamento
$("#deps").change(function(event){
    // Obtenemos todos datos de departamentos
    $.get("calendarInfo/"+event.target.value+"",function(response,state){   
    if(response.length < 0)
    {
        // Si seleccionas la primera opcion por defecto "seleccionar" no hace nada
    }
    else
    {

        // Primero un bucle serán por semanas, y otro bucle dentro de cada semana para poner los 7 días con sus eventos. 
        // Todo esto desde javascript. Puedes "jugar con CSS" declarando las clases para cada linea del calenadrio, de tal forma que con javascript puedes agregar cada linea con su clase CSS para directamente situar el diseño. 
        // También  la forma en la que regresan los datos de los departamentos. Es decir, no se si regresas datos sueltos, un array asociativo u objetos javascript, pero si vas a generar con javascript parte del calendario, podrías hacerlo por semanas y dentro de cada semana sus días, o directamente 1 solo bucle para todos los días que tenga el mes. 
        // Así pues, el append de agregar contenido HTML, deberá ir acorde al diseño si es de semana en semana o los días son "responsive" y ya pues, al agregarlos máximo son 7 por fila. Si te das cuenta, es importante tener claro el diseño de las partes del calendario a la hora de situar los datos.

        // Para el ejemplo voy a suponer que la respuesta de los datos son semanas y que cada semana contiene la información de cada día

        // Si elegimos correctamente un departamento
        for(i=0; i < responseSemanas.length; i++){
            $('#calenHead').append(
                "<li class='cadaSemana'>
                    <ol id='semana-"+i+"'>

                     </ol>
                 </li>"
            );
            for(x=0 ; x < responseSemanas[i].dias.length ; x++){
                $('#semana-'+i).append(
                    "<li class='cadaDia'> 
                        <span class='diaHeader'>
                            "+response[i][x].numeroDia+"
                        </span>
                         "+response[i][x].info+"
                     </li>"
                );
            }

        }

    });
});

Date cuenta que el javascript dice, cuando note que el campo select se modifica, se ejecuta todo, es decir, obtiene el valor de la ID value del select obtenido que es el id del departamento, lo pasa a la petición por URL $.get("calendarInfo/"+event.target.value+"" y te regresa la información en una variable llamada "response"

En gran medida todo depende de cómo se almacenan los datos y se recogen en la petición, y por otro lado el diseño que decidas darle.

Para aclarar, lo que hacemos es en cada vuelta, situamos cada semana con su ID unica. Después, en ese mismo bucle aprovechamos que el valor del bucle "i" para acceder a esa semana con javascript y buscar, de entre la respuesta, la semana que estamos recorriendo, obtener los días y agregarle a la semana recién pintada sus días correspondientes.

Ahora, imagina que directamente, tu ya agregas en HTML 4 semanas con su ID única a cada semana. Entonces solo tendrás que situar los días en cada semana correspondiente.

Espero que le ayude! :)

Un saludo

PD: Te recomiendo hacer debug en php con dd(); y en javascript con console.log() e ir viendo que te regresan las variables. Con esta información estoy seguro que serás capaz de hacer lo que necesitas =)

20
  • Bua Minerillo, eres un crack, muchísimas gracias, estoy poniéndome con ello, ya pondré los resultados cuando los tenga. Pero la verdad que ya leído, me tiene muy buena pinta y lo he entendido perfectamente.
    – Peisou
    Commented el 26 feb. 2018 a las 14:10
  • De nada, me alegra poder ayudar. No olvides en marcar la respuesta como solucionada si es el caso para ayudar a otros usuarios a encontrarla. Por mi parte se agradecen los puntos de reputación para mejorar mi perfil personal. Saldos. PD: No dudes en volver a la comunidad para lo que necesites! =)
    – user42165
    Commented el 26 feb. 2018 a las 14:41
  • Tengo una preguntilla, yo mi calendario, lo tengo definido como puse arriba, genero un div con el id de fc-default y luego en javascript inicializo el calendario con las funciones que tiene definidas en javascript, como añado el span al calendario para que guarde hay los datos de la response? P.D.: Falta un "}" justo después de "$('#lunesSemana1').text(response[0]['lunSem1']);" :)
    – Peisou
    Commented el 27 feb. 2018 a las 17:10
  • Sin problema. A ver, piensa en el orden que se ejecutan las cosas. Primero te haran falta los datos y despues las vistas donde poner los datos. Primero de todo pon el "query ajax de javascript" al comienzo, en un cambio de select, que haga la petición y en ese instante, guarda los datos en variables sencillas interpretables para ti."varDia1". Una vez tengas los datos, tu código seguirá igual, "pintará" el calendario. Salvo porque te hará falta añadir en el hueco donde se crea ese calendario las variables. Utilizando javascript o jquery puedes hacer un "append(<span> varDia1</span>)"
    – user42165
    Commented el 27 feb. 2018 a las 21:49
  • 1
    Genial, estoy tratando de editar los campos, ya que yo lo que devuelvo es un array en json, con todos los datos, pero no va por semana, trato las fechas como "desde... hasta..."( fechaini, fechaFin,) por decírtelo de algún modo, pero ya teniendo claro como genera las etiquetas, supongo que seré capaz de hacerlo sin ningun problema, si me atasco no dudare en preguntarte :P muchisimas gracias.
    – Peisou
    Commented el 15 mar. 2018 a las 12:18
1

Hay una manera sencilla de realizarlo se resume en 3 pasos primero

controller

 public function getevents()
{
     $data = Event::get(['id','title','placa','start']); 
     return response()->json($data);
}

donde estas extrayendo los datos de base de datos en formato json

segundon un route se crea una ruta de tipo get

Route::get('evento/as','eventsController@getevents');

donde estas llamando la accion a realizar en este caso el creado anterirmente getevents

despues se realiza un ajax donde se mostrar los datos y se imprimiran cuando la pagina cargue

var evt=[];
     $.ajax({
        url:'/evento/get',
        type:"GET",
        dataType:"JSON",
        async:false

    }).done(function(r){
        evt=r ;
    });

donde se realiza el proceso para almacenar los datos y se guardaran en la variable evt para luego mandarlos a full calendar

de esta manera se pueden visualizar los datos mas sencillo claro para mi punto de de vista y hay estan los 3 pasos para la visualizacion de informacion de la base de datos utilizando laravel 5.5 ,ajax ,full calendar , javascript

y de esta manera pude solucionar mi inconveniente espero que si alguien le sirve de un punto

2
  • y como filtro por id?
    – Peisou
    Commented el 14 mar. 2018 a las 9:00
  • No se a que se refiere debe ser mas especifico en la pregunta y publicar el código en como lo esta realizando para poder dar una solución mas concreta y certera Commented el 15 mar. 2018 a las 14:35
0

He conseguido solucionar mi problema variando un poco las propuestas aportadas

Aqui posteo el codigo por si a alguien le sirve:

 $("#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 { 
        console.log(response[0]);
        var newEventsList = new Array();
          // Nuevo evento
          $('#fc-default').fullCalendar('removeEvents');
          for(i=0; i < response.length; i++){
          newEventsList [i] = new Object();
          newEventsList [i]["id"] = response[i].id;
          newEventsList [i]["title"] = response[i].titulo;
          newEventsList [i]["start"] = response[i].fechaIni;
          newEventsList [i]["end"] = response[i].fechaFin;
          }
          $('#fc-default').fullCalendar('addEventSource', newEventsList);
          $('#fc-default').fullCalendar('rerenderEvents');
          //console.log('Evento cargado,fin ejecución');          
        }
    });
   });   

Muchas gracias por su ayuda, ha sido indispensable para el desarrollo de mi proyecto. :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.