Currently using the Fullcalendar Vue component and everything is working ok. However, I added tooltips to the events using DaisyUI and that raised a problem.
Adding the DaisyUI tooltip to an event involves putting the Fullcalendar event within a div like this:
<div class="tooltip" :data-tip="formatTooltip(event)">
*** event content **
</div>
To do this I used content injection, so I then lost the default event content as formatted by fullcalendar and had to specify the event content. Here's what I have now:
<FullCalendar ref='fullCalendar' :options="calendarOptions">
<template #eventContent="{ event }">
<div class="tooltip" :data-tip="formatTooltip(event)">
<div class="text-sm font-medium ">{{ formatDate(event.start) + ' - ' + formatDate(event.end) }}</div>
<div>{{ event.title }}</div>
</div>
</template>
</FullCalendar>
This works ok for the timeGridWeek and TimeGridDay views, but now the dayGridMonth view doesn't look right.
Perhaps, if I could inject the default eventContent as formatted by Fullcalendar, then maybe Fullcalendar would reformat the content properly for the dayGridMonth.
Is there a variable which holds the event formatted by fullcalendar in the fullcalendar vue component? If so, then this might work:
<FullCalendar ref='fullCalendar' :options="calendarOptions">
<template #eventContent="{ event }">
<div class="tooltip" :data-tip="formatTooltip(event)">
{{ defaultFormattedEventContent }}
</div>
</template>
</FullCalendar>
Where could I pick up the defaultFormattedEventContent from the fullcalendar vue component?
Alternatively, as a work-around, I could try using v-if to inject different content format for the dayGridMonth. How do I get the currently active view from the fullcalendar vue component?
Thanks for any help you can provide.