Can I get the Fullcalendar default eventContent from Fullcalendar Vue component

52 views Asked by At

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.

0

There are 0 answers