0

Os comento un poco lo que tengo, tengo el FullCalendar el cual cuando relleno un evento y lo envío por ajax, dentro de todos los datos que envío uno de ellos es la url de una imagen que quiero mostrar, la cuestión es que el envío lo hago perfecto y guardo el registro con la url de la imagen, pero ahora no se como mostrar esa imagen en el evento, había leído que el eventrender en la versión 5 es automático, pero sinceramente no se como utilizarlo... os dejo por aquí los códigos.

Recolección de datos para después enviarlos por Ajax //como he comentado antes esto funciona todo perfecto al igual que el envío de ajax que no lo pondré por no saturar de código la pregunta,

nuevoEvento = {
  barco_id:$('#txtBarcoID').val(),
  title:"ocupado:"+' '+textoMañana+' '+textoTarde,
  user_id:$('#txtUsuarioID').val(),
  start:$('#txtFecha').val(),
  end:$('#txtFecha').val(),
  mañana:$('#txtMañana').val(),
  tarde:$('#txtTarde').val(),
  ultimo_dia:$('#ultimo_dia').val(),
  tipo_bono : $('#tipo_bono').val(),
  image_url:{{ asset('imagenes/reservas/mañana-tarde.png') }},

  '_token':$("meta[name='csrf-token']").attr("content"),
  '_method':method,
}


return (nuevoEvento);

Y en este apartado lo que hago es primero con el controller devolver los eventos y recogerlos en full calendar para mostrar los eventos, en este apartado es donde he intentado meterle la url de la imagen al evento que le toca que se supone que se meter automático con la renderización en la versión 5.. pero no se como funciona, espero que me podáis echar una ayuda muchísimas gracias de antemano.

Controller

public function show()
{
    $data['reservas']= Reserva::all();
    return response()->json($data['reservas']);
    // print_r($data);
}

Función FULLCALENDAR: Esto muestra todos los eventos que existen en la base perfectamente solo necesito mostrar la imagen que tiene cada evento asociada en la columna image_url.

var calendar = new FullCalendar.Calendar(calendarEl, {
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  // initialView: 'timeGridDay',
  initialView: 'dayGridMonth',
  headerToolbar: {
      left: 'prev,next today MiBoton',
      center: 'title',
  },
  firstDay: 1,
  events:"{{url('/reservas/show')}}",
});
5
  • Quieres mostrar las imágenes en el modal al hacer click o en el propio calendario?
    – ItsEdgar94
    Commented el 18 dic. 2020 a las 13:57
  • Te explico, cuando creo un evento y lo guardo en la base de datos si te fijas estoy guardando la url de una imagen que se encuentran en esa carpeta, y lo que necesito es cuando recupero mediante el show para mostrar todos los eventos en el full calendar, necesito mostrar la imagen que contiene esa url dentro del evento de full calendar Commented el 18 dic. 2020 a las 18:05
  • Si, pero dentro del cuadrado del evento, no?
    – ItsEdgar94
    Commented el 18 dic. 2020 a las 18:22
  • Te recomiendo que subas tu codigo a sandbox (Si se complica o es muy grande podes subirlo a git y desde ahi importarlo a sandbox) o algun servicio similar asi podemos hacer pruebas sobre un ejemplo 100% funcional
    – Agustin G.
    Commented el 19 dic. 2020 a las 0:16
  • @itsEdgar94 si sería dentro del cuadro del evento Commented el 19 dic. 2020 a las 21:21

1 respuesta 1

1
+50

Lo que podrías hacer es lo siguiente:

  1. Obtener los eventos con axios o fetch consumiendo tu ruta:

    let events = [];
    
    fetch('/reservas/show')
      .then(response => response.json())
      .then(data => {
          events = data.reservas;
      });
    

    Aquí tendrás un array de eventos con el atributo image_url:

    console.log(events);
    
    [
      {
        title: 'Mi titulo',
        start: 12-12-20,
        image_url: '../url/img.png'
        ...
      }
    ]
    
  2. Posterior a eso, agregas tus eventos al calendario y haces uso de los event-render-hooks, en particular tienes que usar el eventContent.

    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      initialView: 'dayGridMonth',
      headerToolbar: {
          left: 'prev,next today MiBoton',
          center: 'title',
      },
      firstDay: 1,
      eventContent: function(arg, createElement) {
          if(arg.event.extendedProps.image_url){
             return createElement('img', {src: arg.event.extendedProps.image_url, width: 100, height: 100})
          }
          return arg.event.title;
      },
      events: events,
    });
    

    Aquí lo que hago es verificar si tiene el atributo image_url, si es así creo un elemento <img> y le adjunto la ruta. Y eso sería suficiente.

Sugerencia:

Otra cosa que puedes hacer, si no quieres mostrar la imagen dentro del evento en la tabla, es usar el evento eventDidMount de la siguiente manera, para mostrar la imagen en un tooltip:

eventDidMount: function(info) {
    var tooltip = new Tooltip(info.el, {
      title: '<img src="...">',
      placement: 'top',
      trigger: 'hover',
      container: 'body',
      html: true
    });
}

Aquí te dejo un ejemplo para que puedas verlo mejor.

4
  • Hola amigo, ahora mismo estoy opr trabajo hasta mañana, en llegar a casa lo chequeo y te digo Commented el 19 dic. 2020 a las 21:20
  • el fetch me da problemas a la hora de devolverme los datos, me dice que la variable event = data.reservas esta indefinido, excatamente el error es este : home:493 Uncaught (in promise) TypeError: Assignment to constant variable. at home:493. Y hace referencia a la linea que te he descrito en este mismo comentario, la ruta que uso por defecto en laravel por si pudiese estar dando problemas : Route::resource('/reservas', App\Http\Controllers\ReservasController::class); Commented el 21 dic. 2020 a las 10:20
  • Perdona, no es un error de Fetch, es un error mío. No debes declarar events como constante, declararlo como let. Ahora cambio eso Commented el 21 dic. 2020 a las 13:08
  • Perfecto amigo jejeje Commented el 21 dic. 2020 a las 13:52

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.