Lo que podrías hacer es lo siguiente:
Obtener los eventos con
axios
ofetch
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' ... } ]
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.