Page 1 of 1
Calendar mouse over data visibility
Posted: Sat Jan 13, 2024 2:09 pm
by ebinnasir
Hello,
Hope all are fine.
In the calendar report when user take mouse over any event, it shows title, start and end field value like tooltip. I want to show more field value on that. Suppose fields name batch_no, production_status need to show on that. How can i do that? I did not find any discussion on this group of the similar topics. Any example or suggestion that can help me?
Regards
Emran
Re: Calendar mouse over data visibility
Posted: Sat Jan 13, 2024 2:42 pm
by arbei
You may use Custom Template -> Calendar Reports -> CustomTemplatePopover.
Re: Calendar mouse over data visibility
Posted: Wed Mar 27, 2024 5:28 am
by tom
I try in page_head the code below, the first part works fine, the hoover function does not work
<script>
ew.calendarOptions.fullCalendarOptions.firstDay = 1; // 0 = Sunday, 1 = Monday
ew.calendarOptions.fullCalendarOptions.initialView = 'timeGridWeek'; //zet default op weekzicht
ew.calendarOptions.fullCalendarOptions.nowIndicator = true;
ew.calendarOptions.fullCalendarOptions.height = 1000;
ew.calendarOptions.fullCalendarOptions.contentHeight = 1000;
ew.calendarOptions.fullCalendarOptions.timeZone = 'Europe/Brussels';
ew.calendarOptions.fullCalendarOptions.businessHours = [ // specify an array instead
{
daysOfWeek: [ 1, 2, 4, 5 ],
startTime: '08:30',
endTime: '16:30'
},
{
daysOfWeek: [ 3 ],
startTime: '8:30',
endTime: '12:00'
}
];
ew.calendarOptions.fullCalendarOptions.eventRender = function(info) {
var tooltipContent = '<div class="tooltip-content">' +
'<p><strong>Lokaal:</strong> ' + info.event.extendedProps.lokaal + '</p>' +
'<p><strong>Organisator:</strong> ' + info.event.extendedProps.organisator + '</p>' +
'</div>';
var tooltip = new Tooltip(info.el, {
title: tooltipContent,
placement: 'top',
trigger: 'hover',
container: 'body'
});
};
</script>
suggestions more than welcome ;)
Thank you in advance!
Tom
Re: Calendar mouse over data visibility
Posted: Wed Mar 27, 2024 10:53 am
by arbei
You used old example for FullCalendar v4, now it is v6, you may read FullCalendar's upgrade guide on Event Rendering.