fullcalendar: incorrect navLink for granularities other than day/week

Used slotLabelDidMount workaround for React implementation, thanks for that

slotLabelDidMount={function ({ el, date, view, level }) {
  el.addEventListener("click", function () {
    // warning, this assumes that we have 3 levels of headers
    // lvl 0 will be week in all views
    if (level === 0) {
      view.calendar.changeView("resourceTimelineWeek", date);
      view.calendar.scrollToTime({
        day: (date.getDay() + 6) % 7,
        hour: 0,
      });
    } else {
      view.calendar.changeView("resourceTimelineDay", date);
      view.calendar.scrollToTime({
        hour: 0,
      });
    }
  });
}}

Not going to lie, it kind of boggles my mind that this have been hanging on the wall for 3 years already. Especially since it is basic functionality that is broken exclusively in “premium” part of FullCalendar 🙃

The problem here is that the navLink*Click handlers are called in more specific situations that you might think. For example, navLinkDayClick only happens when a whole-day cell is clicked. The reason it’s not firing in the codepen is because an hour-granularity is being clicked (which would hypothetically need navLinkHourClick).

We would need to improve the API to make this less awkward. I’ll propose navLinkClick:

navLinkClick: 'resourceTimelineDay' // for anything that's clicked

// OR
navLinkClick: function(dateClicked, granularity, jsEvent) {
  console.log(granularity); // "hour"
  return 'resourceTimelineDay'; // will navigate to this view...
},

// OR
navLinkClick: {
  week: 'resourceTimelineWeek',
  hour: 'resourceTimelineDay'
}

Any idea when this will be resolved?

Thanks, confirmed. I also noticed the navLinkDayClick callback is not called when clicking a day header in the week view.

https://codepen.io/anon/pen/JVVvQm?editors=0010

I was able to get it working using a combination of the solutions provided by acerix and wildhart:

slotLabelDidMount: function(info) {
	if (info.level == 0) {
		var el = info.el.querySelector('a');
		if (el.dataset.navlink) {
			el.onclick = function() {
				calendar.changeView('resourceTimelineDay', JSON.parse(el.dataset.navlink).date);
			};
		}
	}
}

For some reason, in my case, just replacing ‘month’ with ‘day’, worked fine, however it would revert back to month whenever I was filtering events and resources. As well, having the onclick event wrapped in a setTimeout() was causing a slight flicker where the month view was briefly shown before switching to the day view.

This workaround works for me:

navLinks: true,
navLinkDayClick: "resourceTimeline",
slotLabelDidMount: (info) => {
    if (info.level == 0) {
        const el = info.el.querySelector('a');
        if (el.dataset.navlink) {
            el.dataset.navlink = el.dataset.navlink.replace('month', 'day');
        }
    }
},