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.
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;
},
My original question was in relation to setting list header info. - specifically:
listDayFormat: { weekday: 'long', day: 'numeric' },
listDayAltFormat: { year:'numeric', month: 'short', day: 'numeric' },
I might post this as another question but wanted to clarify my results and work with Steve's answer and adding a comment is far too limited. Steve pointed me at dayHeaderContent - which docs say "Generated content is inserted inside the inner-most wrapper of the header cell." - which is correct but it only allows a single, centered element. I was hoping to reproduce the left style of listDayFormat and right of listDayAltFormat. The only way I could think of was adding html. But it is not allowed. I experimented with varieties of >> eventContent: { html: 'some html' } << but made no progress.
This is what I worked Steve's answer to...
dayHeaderContent: function(info) {
if (info.view.type == 'listMonth') {
x = info.date.getDate(); // #dayOfMonth
var s=["th","st","nd","rd"], v=x%100; // ordinal
var ordinal = x+(s[(v-20)%10]||s[v]||s[0]);
// thought this would help with left/right setup
// just a bit of fun
var dayNames = ["Sun Day","Moon Day","Tiw's Day","Woden's Day","Thor's Day","Frige's Day","Saturn Day",];
return dayNames[info.date.getDay()]+' '+ordinal; // getDay()=#dayOfWeek
}
},
and I did try numerous return permutations but feel at a dead end as regards my original aim. It is good enough for now.
Any additions to the original Q. would be most welcome. Thank you.