React-big-calendar: need dom event object for onSelectSlot

[ZachLiuGIS]

I want to open a popup window for user to create event when clicking on a cell, currently onSelectSlot only returns a event object with 4 keys. But I won't have the coordinates of the click to set the position of popup window.

Is there a way to do it? or can the api expose the dom event object like onSelectEvent does?

I think I can get away with displaying a form dialog on top, but the issue is there's no selected styling on the selected cell/cells so it is hard to know which date/dates the event created is for.

So maybe a selected class can be added on selected slot cells when onSelectSlot is fired? (There is a selected class added when you dragging selecting slot current, so maybe do something similar for after selecting, then it needs to be cleared when clicked again I guess)

If there's a consensus I can try to work on it.

[nicomfe]

@ZachLiuGIS did you find any workaround for this? Im trying to do the same

[ZachLiuGIS]

@nicomfe I haven't since I didn't hear any response here. I would prefer having a selected className added when a slot is selected, may look at that when I have time.

[josephrace]

I am trying to accomplish the same thing as well

[bohdan-romanchenko]

any results?

[nicomfe]

not me, spent 1 hs trying to do it , and i just gave up

[simb4]

@ZachLiuGIS @nicomfe @josephrace @nadman3 That's something you can use for now I guess.
Its not the clean one, but still it works.

You can use slotPropGetter to give each slot unique className (like ISO date or so).
Then whenever you select any slots, you can get them by their classname, simply like:

...
slotPropGetter={(date) => ({ className: date.toISOString() })}
...

...
onSelectSlot(slot) {
  let el = document.getElementsByClassName(slotInfo.start.toISOString());
  // for some reason labels on the left can appear here as well, so you need to choose appropriate one
  ...
}