2

In the following fullcalendar example (using v5.3.2) I've added a select element to the events, but the select elements won't expand when clicked, and so the value can't be changed.

I've updated the code example to insert the select tag into the DOM via the eventDidMount callback (which is what I do in my own code) and added jquery to add the event handler for the clicks on the select. You can see the clicks triggering in the console, but the select won't actually expand.

Is there any way to allow the select elements to be functional?

eventDidMount: function(arg) {
  let content = $('<select><option>1</option><option>2</option></select>')
  $(content).on('click', function(evt){
    console.log(evt.target.tagName)
  })
  
  $('.fc-event-time', arg.el).before(content) 
}
ADyson
  • 57,178
  • 14
  • 51
  • 63
akaspick
  • 1,541
  • 19
  • 17
  • the `.fc-unselectable` class relates to whether the [selectable](https://fullcalendar.io/docs/selectable) option is enabled or not. But that is a specific functionality in fullCalendar, and it's totally unrelated to embedding interactive elements inside your events. To be honest the standard practice in your scenario is to attach a popover to the event which appears when you hover (or click, at your choice) over the event, and in the popover you can put any content you like including interactive content. – ADyson Nov 12 '20 at 09:49
  • Having said that, it maybe possible to get your code working, but since you didn't share anything of what you've actually done, we can't help you. If you would like any assistance, please show your code. – ADyson Nov 12 '20 at 09:59
  • @ADyson I've updated the code example to insert the `select` tag into the DOM via the `eventDidMount` callback (which is what I do in my own code) and added jquery to add the event handler for the clicks on the `select`. You can see the clicks triggering in the console. This is about as basic as I can make the example to match what I'm doing in my own code. – akaspick Nov 13 '20 at 00:44
  • I've updated your question to contain the relevant code within it (as per the [on-topic](https://stackoverflow.com/help/on-topic) guidance) and also to describe the problem more clearly based on your latest info. – ADyson Nov 13 '20 at 09:26
  • I'm not really sure what is causing this to be honest. It seems very strange. I've had a play around mucking about with CSS etc and can't see anything that seems to be related. Very strange that it can detect the click on the select, but it won't actually open it. Might be worth raising a bug with the fullCalendar project TBH - see https://fullcalendar.io/reporting-bugs . They're likely to have more idea if anything in the HTML, CSS or JS of the events (or surrounding elements) could somehow block this. I'm not familiar with the internals of the codebase myself. – ADyson Nov 13 '20 at 10:16
  • @ADyson Bug already filed... https://github.com/fullcalendar/fullcalendar/issues/5963 Thanks. – akaspick Nov 14 '20 at 03:30
  • For people in the future encountering this problem, to include form / interactive elements in the event itself, just add a 'mousedown' handler on the element and stopPropagation, this fixes all such issues for v6.1.5 – Plamen Nikolov Apr 03 '23 at 12:25

0 Answers0