Interactive content inside eventContent hook produces invalid DOM

Reduced Test Case

https://codepen.io/HarlesPilter/pen/jOqbwzB

Bug Description

eventContent injects our custom content into the inner most wrapper of the event. But a few nodes up the tree we have a <a> tag (even if we don’t use any dragging or click features). This way if we use any interactive elements in our eventContent, it creates invalid DOM. (https://html.spec.whatwg.org/#the-a-element Content model) and currently there is no way to get rid of the wrapping <a> tag. This greatly limits the use for eventContent.

What would fix this is when we don’t use any interactive features on the event(dragging etc), then instead of the <a> tag we render <div> or even better would be to allow to override the tag with an attribute “as”

[sanderdewilde]

I’ve got the same issue, also using React and React Router.

A workaround is to render a button instead, with an onClick that triggers the routing mechanism of React Router. So something like this:

const EventContent: FC<EventContentProps> = ({ eventInfo }) => {

  const history = useHistory();

  const goToDetail = () => {
    let route = createDetailPath(eventInfo.event.id);
    history.push(route);
  }

  return (
    <Button onClick={() => goToDetail()} type="link">{eventInfo.event.title}</Button>
  )
};

But I’d also prefer to render a real link.

@acerix why does the wrapping element need to be an <a>? Can’t this be a regular <div> or a <button> instead? It is in other calendar solutions (I checked react-big-calendar and Google calendar).

EDIT: At the moment of writing I was not aware of the url you can configure on an event. The fact that this feature exists answers my question above on why an <a> tag is used. Is it possible to only render an <a> tag when such an url attribute is present on an event? Then the problem would occur only when relevant, as you would then indeed be rendering a link inside another link. It is then the responsibility of the end user to not render links in the content of an event which has an url configured. This would furthermore align with the anchor-is-valid accessibility recommendations in eslint-plugin-jsx-a11y.

[patricknazar]

I’m using dayGridMonth view and dayCellContent={fn} to customize this. My problem occurs because of:

https://github.com/fullcalendar/fullcalendar/blob/3373d43f01af6904662e1c7212287f05d4eddc62/packages/daygrid/src/TableCellTop.tsx#L41-L47

It’s the same problem, but from a different <a> than mentioned by @ben467834 . In my case it’s an insignificant personal project so I can get away with the button/router workaround above but it’s still not nice.