DayCellRenderer
Mixin

Mixin that provides the ability to render calendar day cells, including event bars, overflow indicators, and day-number headers. It handles the layout of event bars within each cell, managing slot allocation for multi-day events that span across cells, and rendering the "+N more" overflow button when events exceed the cell's visible capacity.

This is used by the MonthView and also CalendarRow. It expects its host class to include the CalendarMixin mixin.

Views that use this mixin support customizing day cell content and overflow behavior:

const calendar = new Calendar({
    modes : {
        month : {
            // Customize the day cell content
            dayCellRenderer(cellData, domConfig) {
                if (cellData.day === 0 || cellData.day === 6) {
                    domConfig.className['is-weekend'] = true;
                }
            },
            // Configure overflow popup behavior
            overflowClickAction : 'popup',
            overflowPopup : {
                eventList : {
                    type : 'dayview'
                }
            }
        }
    }
});

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

dayCellNameFormat : String/Function
The DateHelper format string/function to format the day names in the header part of each calendar cell.
Parameters
- date : Date
  
  The date to format.
Returns

String
:

The formatted date.
dayCellRenderer : Function
This may be specified to create the content for the date and day name section of calendar cells.

This function is called for each cell rendered. It can return an HTML string which will become the content of the header section of the cell above any events.

It can also return a DomConfig element creation object (or array of same) to specify content to create in the header section of the cell.

It also allows developers to mutate the cell metadata, or the CSS classes to be applied to the cell.

The DomConfig definition passed as the first parameter may be mutated to create a different cell header.
```
dayCellRenderer : function(cellData, dayCellDomConfig) {
    // I don't like Mondays!
    if (cellData.day === 1) {
        dayCellDomConfig.className['hackathon-dayoff'] = true;
        dayCellDomConfig.style.fontWeight = 'bold';

        cellData.isNonWorking = true;

        return `${cellData.date.getDate()} Day off yay!`;
    }
}
```
A non-null return value from the renderer is used as the content of the day number element.

When using the Bryntum React wrapper, this renderer can also return JSX elements. See eventRenderer for a JSX example and performance considerations.
Parameters
- cellData : DayCell
  
  A DayCell object that contains data about the cell.
- dayCellDomConfig : DomConfig/Object
  
  An object to sync the day cell element.
- className : Object
  
  An object who's truthy property names will be applied as class names.
- style : Object
  
  A CSS style definition object.
- dataset : Object
  
  The DOM data properties to set.
- children : DomConfig[]
  
  The DomConfig definitions for the content of the cell.
Returns

String/Object/Object[]
:

The definition of the cell header content.
emptyCellRenderer : Function/Object/String
A DomConfig object which will be used to create the content of a clickable element which is present when no events are in a cell.

Or a function, or name of a function which returns a DomConfig object.

See the emptyCellClick event.
Parameters
- dayCellRenderer : DayCell
  
  A DayCell object that contains data about the cell.
Returns

DomConfig/null
:

DomConfig object representing the HTML markup
eventCountKey : String

private

When we create the aria-label for a cell, we want to include the number of events in the cell. This is the localization key which will be used to format that string. By default, we announce "n events", but this can be overridden to announce "n all-day events" or whatever is appropriate for the view - see DayView#changeAllDayEvents.
eventSpacing : Number2

How much vertical space in pixels to leave between event bars in a cell.

Has a corresponding runtime eventSpacing property.
overflowButtonRenderer : Function
A function, or name of a function which is passed the DomConfig object which will be used to create the "+n more" button which indicates that a day cell has overflowing events.
```
overflowButtonRenderer : function(domConfig) {
    domConfig.className['fa'] = domConfig.className['fa-list'] = 1;
    return domConfig;
}
```
The result is used to create the overflow button element.

To target the element using custom CSS, use the class name b-cal-cell-overflow.
Parameters
- domConfig : DomConfig/Object
  
  A DomConfig config object which is used to create the overflow button.
- tag : Stringbutton
  
  The tag name of the element to create.
- className : Object
  
  An object who's truthy property names will be applied as class names.
- text : String
  
  The inner content of the element. Note that this will be HTML encoded for XSS safety
- style : Object
  
  A CSS style definition object.
- dataset : Object
  
  The DOM data properties to set.
- overflowCount : Number
  
  The number of overflowing events.
Returns

DomConfig/String/null

overflowPopup : OverflowPopupConfig

A config object used to create the OverflowPopup that this view may show when events for one day overflow the available space.

For example

    modes : {
        month : {
            overflowPopup : {
                closable   : false,
                dateFormat : 'dddd, MMM M',
                eventRenderer({ eventRecord, renderData }) {
                    if (calendarUtils.isImportantEvent(eventRecord)) {
                        // Add CSS class to important events
                        renderData.cls['b-important'] = 1;
                    }
                }
            }
        }
    }

Note that the eventList config may be used to customize the list of events shown in the popup. You can set its type property to be a calendar view such as 'dayview' or 'dayagenda' or 'agendaview' to show a detailed view of the overflowing day's events:

For example:

   modes : {
       month : {
           overflowPopup : {
              eventList : {
                 // Use a DayView to show overflowing events
                 // Make hours a little smaller to fit more in
                 type         : 'dayview',
                 dayStartTime : 9,
                 hourHeight   : 30,
              }
          }
      }
  }

Has a corresponding runtime overflowPopup property.

overflowPopupTrigger : 'click'/'mouseover'/'hover'click

The pointer gesture which shows the popup containing any overflowing events in the current view.

This means events which will not fit into a MonthView day cell, or all events for a YearView cell.

Useful values are 'click' (the default), and 'mouseover'

Properties

Properties are getters/setters or publicly accessible variables on this class

isDayCellRenderer : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of DayCellRenderer class, or subclass thereof.

cellMap : Map

READONLY

Yields a Map which contains the cell data for each date in the current view. This is a Map where the keys are the date strings in the format YYYY-MM-DD and the values are DayCell objects which contain the data for that cell.
eventSpacing : Number2

How much vertical space in pixels to leave between event bars in a cell.

Has a corresponding eventSpacing config.
overflowPopup : OverflowPopup

READONLY

The OverflowPopup instance that this view may show when events for one day overflow the available space.

Has a corresponding overflowPopup config.
isDayCellRenderer : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of DayCellRenderer class, or subclass thereof.

Functions

Functions are methods available for calling on the class

getEventsPerCell( )

internal

Returns the number of complete event bars which will fit inside the referenced cell.

The base implementation assumes all cells are the same height. In most views, most of the time, this is true.

It's only in MonthView when some rows are shrinkwrapped round their event content (meaning either expanded or contracted away from the 1/6 height default) that there may be a customized eventsPerCell for a certain date. So only MonthView has an overriding implementation.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeShowOverflowPopup

PREVENTABLE

Fired before an OverflowPopup is shown when an a "+ n more" overflow button is activated by an overflowPopupTrigger event.
emptyCellClick

Fired when an empty cell content area is clicked on. If the handler returns false the current pointer event is not processed further.
eventsPerCellChange

private

Fires when number of events which could be placed in one cell is changed. Has place when the height of the Month view is changed.
showOverflowPopup

Fired after an OverflowPopup has been shown when an a "+ n more" overflow button is activated by an overflowPopupTrigger event.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeShowOverflowPopup

PREVENTABLE

Called before an OverflowPopup is shown when an a "+ n more" overflow button is activated by an overflowPopupTrigger event.
onEmptyCellClick

Called when an empty cell content area is clicked on. If the handler returns false the current pointer event is not processed further.
onEventsPerCellChange

private

Called when number of events which could be placed in one cell is changed. Has place when the height of the Month view is changed.
onShowOverflowPopup

Called after an OverflowPopup has been shown when an a "+ n more" overflow button is activated by an overflowPopupTrigger event.

Source path

Calendar/widget/mixin/DayCellRenderer.js

Inheritance tree1

DayCellRenderer

DayCellRenderer Mixin

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Inheritance tree1

Contents

DayCellRenderer
Mixin