CODEWITHSUNDEEP
eventsfullcalendar
JAyenGreen
JAyenGreen

Reputation: 1435

How to prevent FullCalendar event stream events from being displayed if they are not for the month being viewed?

I am using a month display in FullCalendar 5. When viewing this month, the last few days of April are displayed as well as the first few of June.

My problem is that when FullCalendar sends the start and end dates, it sends them for the start and end of the dates on the display, eg April 28 - June 5, and then displays the events including those for the previous month and next month days showing.

Is there any way, using this example, to limit the display to the events in May?

Upvotes: 0

Views: 197

Answers (1)

Don't Panic
Don't Panic

Reputation: 14510

The most promising option I came across in the docs was eventClassNames, under Event Render Hooks. Following the link there to the docs about className Inputs gives a better example on how to use it.

In short, we can specify an eventClassNames callback function that can optionally add class names to each event, as it is rendered. The callback receives an argument which is an object which includes all kinds of data about both the current view and the event being rendered. A bit of console.dir()ing lets us see what it looks like.

From there, we can just check if the event is before/after the start/end of the currently displayed month, and if so, add a CSS class to it. I chose hidden but of course it could be anything. Note your CSS does need to be quite specific, to make sure the class overrides others already applied by Fullcalendar.

let events = [
    {title: 'Event 1', start: '2022-05-01'},
    {title: 'Event 2', start: '2022-05-10'},
    {title: 'Event 3', start: '2022-05-31'},
    {title: 'Event 3', start: '2022-06-01'},
    {title: 'Event 4', start: '2022-06-04'},
];

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: events,
        eventClassNames: function(arg) {
            // console.dir(arg);
            let eventStart = arg.event.start;
            let monthStart = arg.view.currentStart;
            let monthEnd = arg.view.currentEnd;
            return (eventStart < monthStart || eventStart >= monthEnd)
                ? 'hidden'
                : '';
        }
    });
    calendar.render();
});
/* Needs to be quite specific to make sure it overrides other styles */
a.fc-daygrid-event.hidden {
    display: none;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">

<div id='calendar'></div>

Upvotes: 1

Related Questions