DayCellRenderer

The DateHelper format string/function to format the day names in the header part of each calendar cell.

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.

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.

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

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.

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,
              }
          }
      }
  }

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'

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

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

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

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

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

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