use <span> on Event when no url is provided

[brandonwestcott]

As described in #5710, current rendering produced invalid DOM when event render contains an a element. While onClick handlers inside the event allow a valid DOM, it limits the ability to have the normal benefits of an anchor tag, including "Open Link in New Tab" and a11y compatibility.

This implements a conditional check to see if url is set on the EventDef, if present use a, else use span.

Now, one could argue a => span | a could be considered a breaking change. If so, an alternative could be to add an additional attribute onto the EventDef to control the wrapping element type.

Resolves #5710

[giovanniincammicia]

Any update on this? I believe this has been open for a while now (the original issue was opened more than a year ago).

[vrinceanuv]

Any updates on this?

[eloyesp]

Just wanted to add that I think that it should be a div not a span by default, as the later will have have other nesting issues, as it will make it impossible to use block elements.

[brandonwestcott]

Just wanted to add that I think that it should be a div not a span by default, as the later will have have other nesting issues, as it will make it impossible to use block elements.

@eloyespa to div is definitely a break change because div default render is block where as span and a are both inline. If you would need the element to behave like a block, just set it in css like you would on the current a

[brandonwestcott]

Happy to rebase this if @arshaw gives a 👍 for the proposed change.

[ben467834]

I think this is still an issue. I don't think we're expecting block elements here so span is still the best inline candidate to be an anchor alternative.

[dc-devs]

Bumping as this issue looks like it hasn't been commented on in a while. I would also love to see this update.

Couple ideas for other possible solutions:

1. Would the solution of adding a custom eventTagType for an event be possible? This would introduce a non breaking change, and allow us to customize the element..

<FullCalendar
 ...
eventTagType="span"
/>

2. Would we be able to add our own eventComponent, and not just have access to updating the eventContent?

<FullCalendar
 ...
eventComponent={<CustomEventComponent />}
/>

Edit: Reading more thoroughly through @brandonwestcott 's original comment its seems my first solution could easily be handled by adding a custom prop to the EventDef. Would love to see some way to customize this element type.

If so, an alternative could be to add an additional attribute onto the EventDef to control the wrapping element type.