FullCalendar URL not working on list view - using customHTML

Question

I'm creating a calendar for courses and I'm using the customHTML field for the event content because I want to style the content in the event. On Desktop I show the "month view" and the event URL works fine but on screens smaller than 480px I show "list view" and my URL link no longer works and I can see it's not in the list view code. Any ideas why the link doesn't work on list view?

I have put together a codepen so i can share an hopefully get some feedback. What currently isn't working - the event is not linking to the URL on both mobile.

I'm open to doing this another way - what I need is:

• month view on desktop
• list view on mobile
• events linking to URL
• Ability to add text into the event displayed in the calendar (e.g. title / max spaces and available places)

https://codepen.io/debinz/pen/JjRYaVV

document.addEventListener('DOMContentLoaded', function() {
  
  function mobileCheck() {
    if (window.innerWidth >= 768 ) {
      return false;
    } else {
      return true;
    }
  };
  
  var calendarEl = document.getElementById('calendar')
  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'Australia/Brisbane',
    themeSystem: 'standard',
    initialView: mobileCheck() ? 'listMonth' : 'dayGridMonth',
    windowResize: function(view) {
      if (window.innerWidth >= 768 ) {
        calendar.changeView('dayGridMonth');
      } else {
        calendar.changeView('listMonth');
      }
    },
    contentHeight:'auto',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,listMonth'
    },
    weekNumbers: false,
    dayMaxEvents: true,
    displayEventTime: false,
    events: [
      {
        "id": 0,
        "title": "First Aid Course <br/>Available: 2 Max: 3",
        "customHtml": "<strong>First Aid Course</strong> <br/>Available: 2 Max: 3",
        "start": "2020-12-09 09:30:00",
        "end": "2020-12-09 11:00:00",
        "url": "https://codepen.io/debinz/",
        "groupId": "10832NAT",
        "classNames": "10832NAT",
        "allDay": false
      },
      {
        "id": 1,
        "title": "First Aid Course <br/>Available: 2 Max: 3",
        "customHtml": "<strong>First Aid Course</strong>  <br/>Available: 2 Max: 3",
        "start": "2020-12-12 09:30:00",
        "end": "2020-12-12 11:00:00",
        "url": "https://codepen.io/debinz/",
        "groupId": "10832NAT",
        "classNames": "10832NAT",
        "allDay": false
      }
    ],
    eventTimeFormat: {
      hour: 'numeric',
      minute: '2-digit',
      meridiem: 'short'
    },
    eventContent: function(eventInfo) {
      return { html: eventInfo.event.extendedProps.customHtml }
    }
  })
  calendar.render()
});

Answer 1

It is your JS changing the view.

Replace it with this:

document.addEventListener('DOMContentLoaded', function() {
  
  var calendarEl = document.getElementById('calendar')
  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'Australia/Brisbane',
    themeSystem: 'standard',
    initialView: 'dayGridMonth',
    contentHeight:'auto',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,listMonth'
    },
    weekNumbers: false,
    dayMaxEvents: true,
    displayEventTime: false,
    events: [
      {
        "id": 0,
        "title": "Selection and Installation of Child Restraints <br/>Available: 2 Max: 3",
        "customHtml": "<strong>First Aid Course</strong> - December 1 <br/>Available: 2 Max: 3",
        "start": "2020-12-09 09:30:00",
        "end": "2020-12-09 11:00:00",
        "url": "https://codepen.io/debinz/",
        "groupId": "10832NAT",
        "classNames": "10832NAT",
        "allDay": false
      },
      {
        "id": 1,
        "title": "Selection and Installation of Child Restraints <br/>Available: 2 Max: 3",
        "customHtml": "<strong>First Aid Course</strong> - December 1 <br/>Available: 2 Max: 3",
        "start": "2020-12-09 09:30:00",
        "end": "2020-12-09 11:00:00",
        "url": "https://codepen.io/debinz/",
        "groupId": "10832NAT",
        "classNames": "10832NAT",
        "allDay": false
      }
    ],
    eventTimeFormat: {
      hour: 'numeric',
      minute: '2-digit',
      meridiem: 'short'
    },
    eventContent: function(eventInfo) {
      return { html: eventInfo.event.extendedProps.customHtml }
    }
  })
  calendar.render()
});

Answer 2

I had the same problem and the reason is a missing a tag in the eventContent. See https://github.com/fullcalendar/fullcalendar/blob/f55ba69a8247dda0cc6bb0c4aefceed21bf17eb9/packages/common/src/interactions/EventClicking.ts#L42

So the fix is simple, just add <a href=""></a> to your eventContent.