---
title: 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](day-lane-render-hooks).

`dayCellClass` - a [ClassName Input](classname-input) for the `<td>` cell

`dayCellTopClass` - a [ClassName Input](classname-input) for the top area of the day cell (where the day number appears)

`dayCellTopInnerClass` - a [ClassName Input](classname-input) for the inner wrapper of the top area, which may be a nav link

`dayCellTopContent` - a [Content Injection Input](content-injection). Generated content is inserted *inside* the inner-most wrapper of the day cell. It does not replace the `<td>` cell.

`dayCellInnerClass` - a [ClassName Input](classname-input) for the middle area of the day cell (where events appear)

`dayCellBottomClass` - a [ClassName Input](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](vertical-resource-view), this value will be the [Resource Object](resource-object)
- `el` - the `<td>` element. only available in `dayCellDidMount` and `dayCellWillUnmount`