Include highlight elements in select callback arg

[joelstein]

Checklist

• I've already searched through existing tickets
• Other people will find this feature useful

Is this feature for a specific connector (React/Angular/etc)?

Other

Feature Description

It would be handy to include an el prop in the select callback so we can easily access the highlight (or mirror) dom element and do things like attach it as a reference for a Floating UI popover.

This would also be consistent with how the dateClick callback behaves.

I'm aware that I can find it at info.jsEvent.target. However, for some reason, that's less reliable than a dedicated DOM reference.

[joelstein]

I guess what I'm looking for is something like this.

• eventClick includes an el prop
• dateClick includes a dayEl prop
• select does not include an element prop

Is there a reason for this?

I installed the source locally but could not figure out how to use the source code to build a pull request.

[acerix]

It's possible for a selection to be multiple elements (e.g. by selecting 2 weeks) which may be why using target doesn't work as expected, but I can see how it could be useful to include the elements in the argument.

For now, it may work better to get the elements using the fc-highlight class like this:

https://codepen.io/acerix/pen/YzMedGP?editors=0011

[rock77217]

I have same problem. I'm using React connector.

I'd like to change the selection time grid's background color dynamically.
I tried to get element when select trigger like below:

const handleSelect = (arg: DateSelectArg) => {
  calendarRef.current.calendar.el.querySelectorAll(".fc-highlight").forEach((el: any) => {
    el.style.background = "green";
  })
};

But it's not work...