<div id="pad-calendar-{{pad-uniqueId}}" class="pad-calendar-new planadaycalendar"></div>
{{pad-message}}
<if-pad-showCalendar>
    <script>
        (function () {
            // TODO: fix the code to work with the new version of FullCalendar
            let calendarEl = document.getElementById('pad-calendar-{{pad-uniqueId}}');
            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    right: 'today,prev,dayGridMonth,timeGridWeek,next'
                },
                locale: 'nl',
                firstDay: 1,
                slotMinTime: '08:00',
                slotMaxTime: '18:00',
                weekNumbers: false,
                buttonText: {
                    today: 'vandaag',
                    dayGridMonth: 'maand',
                    timeGridWeek: 'week'
                },
                allDaySlot: false,
                slotLabelFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    omitZeroMinute: false
                },
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    omitZeroMinute: false
                },
                navLinks: false,
                displayEventEnd: true,
                weekends: true,
                events: {{pad-dataJson}},
                eventMouseEnter: function (data) {
                    tooltip = '<div class="tooltiptopicevent">' + data.event.extendedProps.description + '</div>';

                    jQuery("body").append(tooltip);
                    jQuery(data.el).mouseover(function (e) {
                        if ({{pad-enableMouseOver}})
                        {
                            jQuery(this).css('z-index', 10000);
                            jQuery('.tooltiptopicevent').fadeIn('500');
                            jQuery('.tooltiptopicevent').fadeTo('10', 1.9);
                        }
                    }).mousemove(function (e) {
                        if ({{pad-enableMouseOver}})
                        {
                            jQuery('.tooltiptopicevent').css('top', e.pageY + 10);
                            jQuery('.tooltiptopicevent').css('left', e.pageX + 20);
                        }
                    });
                },
                eventMouseLeave: function (data) {
                    if ({{pad-enableMouseOver}})
                    {
                        jQuery(data.el).css('z-index', 8);
                        jQuery('.tooltiptopicevent').remove();
                    }
                }
            });

            calendar.render();
        })()
    </script>
</if-pad-showCalendar>
