How to detect a click on a background event when two or more background events are on the same row in month view?

Question

Can't seem to find an answer to this - so thought I'd give this a shot.

I have read several answers on how to detect a click of a background event. Such as this: Detect click on background event

What I've found, however, is that when two ore more background events are on the same row, only the last day rendered as a background event will contain the proper CSS target to allow detection. All the previous days on that row (month view is what I'm working in) will act as regular "dayClick" events, even though they are actually rendered as background events.

For example, in this image, clicking on the 25th is detected, while clicking on that 22nd is not:

Looking at the source of the page, the first three days (the 22nd through the 24th) all appear in this image on the line marked "1". It's a TD with a colspan of 3. The line marked "2" is the line that has the TD containing the 25th:

Effectively anything before the 25th is cut off from being targeted using fc-bgevent.

It should be noted that a single background event that spans days works as expected. So if I was to simply extend the end date of the event that starts on the 22nd to the 25th, it will all work - except of course the "start" date that you receive in the click event will be the 22nd, no matter which day you click on.

Has anyone found a way around this?

What I want to do is render background events and also detect the date when they are clicked.

Thanks, in advance, for the help.

Answer 1

Use selectOverlap to detect click on background events

selectOverlap: function(event) {
    // Here you will get all background events which are on same time.
    console.log(event);
    return event.rendering === 'background';
}