当事件的渲染选项等于背景时，Fullcalendar 工具提示无法正常工作

Question

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!

Answer 1

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;
}