I am using Widget FullCalendar 3.x in WordPress, and when there are more than 3 events in a day, the calendar displays a "more..." link. By default, clicking this link opens a new tab with a list of events for that day.

Instead of opening a new tab, I would like the "more..." link to open a modal (popover) inside the calendar, displaying all events for that day in a styled list.

I've seen that FullCalendar supports this feature, but I can't find the correct setting or documentation to implement it in WordPress.

My events are fetched from WordPress events, including both published and scheduled ones.

Does anyone know how to achieve this? Any code examples or guidance would be greatly appreciated.

Thanks in advance!

I am using Widget FullCalendar 3.x in WordPress, and when there are more than 3 events in a day, the calendar displays a "more..." link. By default, clicking this link opens a new tab with a list of events for that day.

Instead of opening a new tab, I would like the "more..." link to open a modal (popover) inside the calendar, displaying all events for that day in a styled list.

I've seen that FullCalendar supports this feature, but I can't find the correct setting or documentation to implement it in WordPress.

My events are fetched from WordPress events, including both published and scheduled ones.

Does anyone know how to achieve this? Any code examples or guidance would be greatly appreciated.

Thanks in advance!

• jquery
• wordpress
• fullcalendar
• popover
• fullcalendar-3

• when there are more than 3 events in a day, the calendar displays a "more..." link...just to say, that's only true in v3 if you set an eventLimit value. The default is to just try and display all the events for that day. – ADyson Commented Feb 13 at 9:43
• Instead of opening a new tab, I would like the "more..." link to open a modal (popover) inside the calendar, displaying all events for that day in a styled list ...fullCalendar 3 already does this by default, if you set an eventLimit - demo: codepen.io/ADyson82/pen/VYwYzPG?editable=true&editors=001. – ADyson Commented Feb 13 at 9:44
• If you're finding that the "more" link opens in a new tab, you must have done something to customise it - check if you've got an eventLimitClick option defined. There's no point writing code to override that (per your answer below) when you could just remove that option in the first place. – ADyson Commented Feb 13 at 9:47

1 Answer 1

I found out it in inline.js - you just need to add a function at the end

 function showMoreEventsModal(date) {
        $.ajax({
            url: WPFC.ajaxurl,
            method: 'POST',
            data: { action: 'wpfce_get_events', date: date },
            success: function (response) {
                let content = '<h3>Events on ' + date + '</h3>';
                response.forEach(event => {
                    content += `<p><a href="${event.url}" target="_blank">${event.title} </a></p>`;
                });
                $('#wpfce-modal-content').html(content);
                $('#wpfce-modal').fadeIn();
            }
        });
    }

and at eventAfterAllRender:

eventAfterAllRender: function(view) {
    $('.fc-more').on('click', function(e) {
        e.preventDefault();
        var date = $(this).closest('.fc-day').attr('data-date');
        showMoreEventsModal(date);
    });
}