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.