jquery - How to replace FullCalendar "more" link with a modal popover in WordPress? - Stack Overflow

admin管理员组

文章数量:1414870

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

Share Improve this question Follow edited Feb 13 at 9:30 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Feb 12 at 21:21 CodingMonsterCodingMonster 111 bronze badge 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -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);
    });
} 

本文标签： jqueryHow to replace FullCalendar quotmorequot link with a modal popover in WordPressStack Overflow