Slot Header Render Hooks

Customize the slot headers, where TimeGrid and Timeline views display their date/time text.

slotHeaderClass - a ClassName Input for the slot header element

slotHeaderInnerClass - a ClassName Input for the inner wrapper of the slot header. Useful for adjusting padding.

slotHeaderContent - a Content Injection Input

slotHeaderDidMount

slotHeaderWillUnmount

Timeline Options#

Two more options position the slot header text, in Timeline views only:

slotHeaderAlign - the horizontal alignment of the text: 'start' (the default), 'center' or 'end'. Can also be a function that receives { level, isTime } and returns one of those values. level is the header row, as described below, and isTime is true for a row of times.

slotHeaderSticky - whether the text in the upper header rows (such as the dates above the times) stays in view while the timeline scrolls horizontally. Default: true. A number of pixels or a CSS length string, such as '0.5rem', keeps it sticky and sets its distance from the edge. Has no effect on the bottom row. The offset is ignored for centered text, which stays centered in the visible part of its cell as it scrolls.

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
  • isMajor
  • isMinor
  • isNarrow
  • hasNavLink
  • isFirst
  • el - the element. only available in slotHeaderDidMount and slotHeaderWillUnmount
  • level - only for timeline view when slotHeaderFormat is specified as an array. Indicates which tier of the header is being rendered. 0 is the bottom-most.