[SOLVED] Fullcalendar 6 - rendering days and week days as links by default

Fullcalendar 6 - rendering days and week days as links by default

It seems that days and weekdays are rendered as links by default (e.g. <a>{dayContent}</a>). Any way to disable/control this and have them rendered as <div> or <span> for example?

Things I tried:

dayCellContent: only changes the content, but it's still wrapped by <a>
navLinks = false (default value), indeed clicking on days doesn't change the view (no navigation) but days are still rendered as links

In case it matters, I'm using @fullcalendar/react

Solution

You could use dayHeaderDidMount from the Day Header Render Hooks feature, which gives you full control to set the inner content of the table cell however you like.

Here's a trivial example (using vanilla JS, since I'm not familiar with React, but the basic principle is the same):

dayHeaderDidMount: function (arg) {
  arg.el.innerHTML = arg.text;
},

Live demo: https://codepen.io/ADyson82/pen/LYMmppx

Documentation: https://fullcalendar.io/docs/day-header-render-hooks