Day-Header Render Hooks

Customize the headers above the day cells in DayGrid and TimeGrid views. The same options also apply to the header of the event popover, where info.inPopover is true. For list view, see the list day header render hooks. For the timeline view, see the slot header render hooks.

dayHeaderAlign - the horizontal text alignment of day header cells. 'start' | 'center' | 'end'. Theme decides the default. In a left-to-right locale, 'start' means left and 'end' means right.

dayHeaderClass - a ClassName Input for the outer element of the header cell, a <div role="columnheader">. When printing, some views render it as a table cell (<th>) instead.

dayHeaderInnerClass - a ClassName Input for the inner wrapper of the header cell, which may be a nav link

dayHeaderContent - a Content Injection Input. Generated content is inserted inside the inner-most wrapper of the header cell. It does not replace the header cell element itself.

dayHeaderDidMount - called right after the header cell element has been added to the DOM

dayHeaderWillUnmount - called right before the header cell element will be removed from the DOM

Argument#

When the above hooks are specified as a function in the form function(info), the info is an object with the following properties:

• date - Date object
• text
• isPast
• isFuture
• isToday
• isOther
• hasNavLink
• view - the current View Object
• resource - if the date column lives under a specific resource in vertical resource view, this value will be the Resource Object
• el - the header cell element (the <div role="columnheader">). only available in dayHeaderDidMount and dayHeaderWillUnmount
• level