Skip to main content
Recompensa finalizada con 50 de reputación otorgada por David Robles
se eliminaron 2 caracteres en el cuerpo
Origen Enlace
Jonatan Lavado
  • 3.1k
  • 1
  • 7
  • 14

Lo que podrías hacer es lo siguiente:

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

    constlet 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.

Lo que podrías hacer es lo siguiente:

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

    const 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.

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.

Origen Enlace
Jonatan Lavado
  • 3.1k
  • 1
  • 7
  • 14

Lo que podrías hacer es lo siguiente:

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

    const 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.