Day-Cell Render Hooks

Customize the day cells in DayGrid view and the all-day section of TimeGrid view with the following options. For TimeGrid day lanes (the time-slot columns), see Day-Lane Render Hooks.

dayCellClass - a ClassName Input for the <td> cell

dayCellTopClass - a ClassName Input for the top area of the day cell (where the day number appears)

dayCellTopInnerClass - a ClassName Input for the inner wrapper of the top area, which may be a nav link

dayCellTopContent - a Content Injection Input. Generated content is inserted inside the inner-most wrapper of the day cell. It does not replace the <td> cell.

dayCellInnerClass - a ClassName Input for the middle area of the day cell (where events appear)

dayCellBottomClass - a ClassName Input for the bottom area of the day cell (where the more-link appears)

dayCellDidMount - called right after the <td> has been added to the DOM

dayCellWillUnmount - called right before the <td> will be removed from the DOM

Argument

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

• date - Date object
• text - the formatted date text, using dayCellFormat or monthStartFormat
• textParts
• dayNumberText
• monthText
• isPast
• isFuture
• isToday
• isOther
• isMajor
• isNarrow
• inPopover
• hasNavLink
• options - the calendar options object, useful for reading settings like businessHours
• resource - if the date cell lives under a specific resource in vertical resource view, this value will be the Resource Object
• el - the <td> element. only available in dayCellDidMount and dayCellWillUnmount