I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:

I'm using V5 in conjuction with moment.js.

Searching through the docs, I ended up here:

This is the code I've tried when initialising the calendar:

dayHeaderFormat: function(date){
    return moment(date.weekday).format('ddd');
}

This results in showing today (Thu) for every header, rather than the correct days.

My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.

Any help or advice appreciated!

I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:

I'm using V5 in conjuction with moment.js.

Searching through the docs, I ended up here: https://fullcalendar.io/docs/v5/day-header-render-hooks

This is the code I've tried when initialising the calendar:

dayHeaderFormat: function(date){
    return moment(date.weekday).format('ddd');
}

This results in showing today (Thu) for every header, rather than the correct days.

My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.

Any help or advice appreciated!

• javascript
• fullcalendar
• momentjs
• fullcalendar-5

• Meant to add, I tried the 'dayHeaderContent' option first as per the docs, both seem to give the same result. – James B Commented May 14, 2020 at 18:46

1 Answer 1

dayHeaderContent: (args) => {
    return moment(args.date).format('ddd Do')
}

The new function supplies args instead of date object. So you access them with args.date and then format using moment