fullcalendar / fullcalendar

Full-sized drag & drop event calendar in JavaScript
https://fullcalendar.io
MIT License
18.64k stars 3.62k forks source link

Include highlight elements in `select` callback arg #7644

Open joelstein opened 7 months ago

joelstein commented 7 months ago

Checklist

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 commented 7 months ago

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

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 commented 7 months ago

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 commented 5 months ago

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...

davidjackson148 commented 2 months ago

I can change the selection highlight color but that isn't retained when you click off the calendar. hence you can't tell if you have something selected or not. The only thing I can do is reset the selection each time, but the user experience will be poor and annoying if you have to do that everytime