Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Format column header dates in FullCalendar

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

enter image description here

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!

like image 765
James B Avatar asked May 14 '20 18:05

James B


Video Answer


1 Answers

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

like image 150
Laurensius Adi Avatar answered Sep 27 '22 20:09

Laurensius Adi