Fullcalendar tooltip not working correctly when event's rendering option is equals to background

1
votes

I am trying to use Fullcalendar 4.3.1 to show holidays in background while other events are shown on same date . My aim is when users mouse over days I show the holiday name through tooltip, while the background is in another color and other events can be added.

Antonio Santise's answer worked in order to show the tooltips, however when I set event's rendering option as 'background' only the last one event's tooltip is shown. Could someone help me to avoid this behavior and show all event's tooltips?

My code:

  • Getting data with Laravel's model
public function index() {
    $eventos = EventoCalendario::selectRaw('id, \'true\' as allDay, title, data as start, data as end, color, is_facultativo, \'background\' as rendering')
                        ->orderBy('data')
                        ->get();

    return view('eventoscalendario.index', compact('eventos'));
}
  • Fullcalendar's options
events: {!! $eventos !!},
eventRender: function(info) {
   $(info.el).tooltip({
          title: info.event.title,
          html: true
   });
}

Thanks in advance!

1
javascriptdatefullcalendarfullcalendar-4
I managed to reproduce this, I think: codepen.io/ADyson82/pen/… . You're more than welcome to use that CodePen as the basis for a bug report - assuming the bug is in fullCalendar of course, and not bootstrap/popper – ADyson
If you found a solution please write it in the Answers section below, not within your question! Then people can vote on it, and it will show in search results if other people are looking for something similar. The solution is a separate thing, it is not part of the original problem – ADyson
Thanks @ADyson, I edited the post and added an answer. – Giancarlo

1 Answers

3
votes

Fullcalendar team offered a "skeleton" that solved the described problem. However, they are still working to fix this in a next release.

Click here to check the issue #5110 in Fullcalendar's repo

THE SOLUTION:

Just insert the CSS code below in your page.

.fc-bgevent-skeleton {
  pointer-events: none;
}
.fc-bgevent-skeleton .fc-bgevent {
  pointer-events: auto;
}
.fc-content-skeleton {
  pointer-events: none;
}
.fc-content-skeleton .fc-event {
  pointer-events: auto;
}