Upgrading to fullcalendar v5. Wonderful tool!
In list view I would like to have the left col display 'Friday 2nd' - or Sat 3rd... etc.
I have set

listDayFormat: { weekday: 'long', day: 'numeric' }, 

and thought this would reverse the order of the default: "2 Friday" to Friday 2 (which I could mostly live with - but it does not change the order.
I have worked a hack - which works for my specific, (current) needs, but it is still a hack. In fc-list.min.js I declare an ordinal function at top

function swap(thus) {
    x = thus.split(' ')[0]; // day number
    y = thus.split(' ')[1]; // day name
    var s=["th","st","nd","rd"], v=x%100;
        return y ' ' x (s[(v-20)%10]||s[v]||s[0]);
}

Then in the min.js I call this function.

<td class="' (r.getClass("tableListHeading")||r.getClass("widgetHeader")) '" colspan="3">'
 (i?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-main"},
    //t.htmlEscape(s.format(e,i)) // original  

swap(s.format(e,i)) // function swap() set at page top  

  ):"")
 (a?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-alt"},t.htmlEscape(s.format(e,a))):"") "</td>")},

I have a fix - but not a solution.
Can anyone set me on a straighter path? Thank you.

CodePudding user response：

The dayHeaderContent hook sets the content of the day header to a custom value. https://fullcalendar.io/docs/day-header-render-hooks

Example: https://codepen.io/stevewillson/pen/jOwgGqm

The below code can be used within a FullCalendar instance to set the day header content to "Friday 2nd", "Saturday 3rd"...

dayHeaderContent: function(info) {
    let s = '';
    // get the day of the month (number)
    const dayOfMonth = info.date.getDate();
    // set the ordinal value of the date in s
    if (dayOfMonth > 3 && dayOfMonth < 21) s = 'th';
    switch (dayOfMonth % 10) {
        case 1:  s = 'st'; break;
        case 2:  s = 'nd'; break;
        case 3:  s = 'rd'; break;
        default: s = 'th';   
    }
    const locale = 'en-US';
    // get the name of the day (Friday, Saturday ...)
    const dayName = info.date.toLocaleDateString(locale, { weekday: 'long' });
    return dayName   ' '   dayOfMonth   s;
},