CalendarRow
Widget

This is normally used as the "All day events" section of a DayView or WeekView. But it may be used standalone as a regular Widget.

As a standalone widget, it will lack the capabilities of the Calendar class, such as keyboard-based event to event navigation and drag/drop features.

A Widget which displays a single row of calendar cells for a configured range of dates.

Cell rendering can be customized using the dayCellRenderer method.

Event rendering can be customized using the eventRenderer method.

When used inside a Calendar, the all day events row at the top of a DayView or WeekView is a CalendarRow. It can be configured through the allDayEvents config:

const calendar = new Calendar({
    modes : {
        week : {
            allDayEvents : {
                // Configure how overflow is handled
                overflowClickAction : 'popup',
                // Customize the day header
                dayHeaderRenderer(domConfig, cellData) {
                    return `${cellData.date.getDate()} ${cellData.isNonWorking ? '(off)' : ''}`;
                }
            }
        }
    }
});

Useful configs

Config	Description
defaultEventRowCount	Max visible event rows before overflow
autoHeight	Grow to accommodate all events
overflowPopup	Config for the overflow popup
overflowClickAction	Action when clicking overflow indicator
eventRenderer	Custom renderer for event bars

Configs

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

animate : Booleantrue

Set this to false to not use transition for this Widget as it changes height
autoHeight : Boolean

By default, this widget displays a maximum of defaultEventRowCount events before showing overflow indicators, and becoming expandable.

Configuring this as true makes this widget accommodate all events with no overflow.
compactHeader : Booleanfalse

Configure this property as true to show the day name and date headers in a more compact style.

When this is set, the day name and date are displayed side by side instead of on separate lines and with a smaller font size.

This applies the b-compact-header CSS class to this widget which may be styled as required.

Has a corresponding runtime compactHeader property.
dateFilter : Function/String
A callback function which an application may provide to filter out day columns for individual dates.
Parameters
- context : DayCell
  
  Information about the day column to be created.
Returns

Boolean
:

Return false to not display a column for the passed date.
Has a corresponding runtime dateFilter property.
dayHeaderRenderer : Function/String
A function, or name of a function which is passed the DomConfig object which will be used to sync with a day cell header.
```
dayHeaderRenderer : function(headerDomConfig, cellData) {
    if (this.isSpecialDate(cellData.date)) {
        headerDomConfig.className['b-is-special-date'] = 1;

        // Add to the content element's children
        headerDomConfig.children.push({
            text : 'Special day',
            className : 'b-special-day
        });
    }
}
```
The result is used to sync the DOM of the day column.
Parameters
- headerDomConfig : DomConfig/Object
  
  A DomConfig config object which is used to sync the day header 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 the header content. There will be 2 children encapsulating the day name and the date.
- cellData : DayCell
  
  A DayCell object that contains data about the cell.
Returns

String
dayNameFormat : String/Functionddd
The DateHelper format string/function for day names (e.g., "ddd" for "Mon", "Tue", ...)
Parameters
- date : Date
  
  The date to format.
Returns

String
:

The formatted date.
dayNumberCompress : Booleanfalse

Specify true to textually compress day number pairs. For example, compress "11/12" to "11/2". Also when true, the daySeparator is trimmed of any whitespace.
dayNumberFormat : StringD

The DateHelper format string for day numbers (e.g., "D" for "9", "10", ...)
daySeparator : String/String[]

The separator between day names and numbers. If a single string is provided, it applies to both day names and day numbers. If an array of 2 strings is provided, the [0] element is the separator for day names and [1] element is the separator for day numbers.
dayStartShift : String/Number0

Either the start hour of the day, or a 24 hourHH:MM string denoting the start of the first rendered daily time block.
defaultEventRowCount : Number3

The number of events to show to define the height of this widget by default if this widget autoHeight is not defined as true. The widget may be expanded to accommodate all the events if there are overflowing events.
fullWeek : Boolean

When true, a full week of dates is rendered for a single day range. This should not be applied when the duration spans multiple days.

Has a corresponding runtime fullWeek property.
gutterHeight : Number/String

How much extra space in pixels or other DOM units to allow below the event bars to facilitate drag-create gestures.
hideEmptyDays : Booleanfalse

Configure this as true to hide day columns which contain no events.

Use with care. This may result in no day columns being rendered for completely empty time ranges.

Has a corresponding runtime hideEmptyDays property.
minDayWidth : Number

By default, the day columns flex to all fit within the width of this widget.

configuring a minDayWidth means that if the day columns do not fit within this widget's width, it becomes horizontally scrollable.
overflowClickAction : 'popup'/'expand'

How the view responds to clicking on a +n more button in an overflowing day cell.

The default value, 'popup', means that a small dialog box showing the full complement of events for that cell is shown aligned to the cell.

When set to 'expand', then clicking the +n more button causes the encapsulating row to expand to accommodate all events in that row with no overflow.

Navigating to a new month resets the row to its default, flexed height.
rowHeaderRenderer : Function/String

internal
A function, or name of a function which is called to render custom content in the row header area (the prefix element before day cells). This enables displaying row labels, month names, or other row-specific information.

The function should populate the prefixDomConfig object with children and other properties to define the header content.
```
rowHeaderRenderer(prefixDomConfig, calendarRow) {
    prefixDomConfig.children = {
        label : {
            tag       : 'div',
            className : 'my-row-label',
            text      : 'Week ' + calendarRow.weekNumber
        }
    };
}
```
See renderRowHeader for the YearPlanner implementation which displays month names and expand buttons.
Parameters
- prefixDomConfig : DomConfig/Object
  
  A DomConfig object to be synced with the prefix element. Populate its children, className, dataset, and style properties to define the header content.
- calendarRow : CalendarRow
  
  The CalendarRow instance being rendered
selectedDateCls : Stringb-selected-date

The CSS class to apply to the header element for this view's date.

Properties

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

isCalendarRow : Booleantrue

READONLY

static

ADVANCED

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

compactHeader : Booleanfalse

Configure this property as true to show the day name and date headers in a more compact style.

When this is set, the day name and date are displayed side by side instead of on separate lines and with a smaller font size.

This applies the b-compact-header CSS class to this widget which may be styled as required.

Has a corresponding compactHeader config.
dateFilter : Function/String

A callback function which an application may provide to filter out day columns for individual dates.

Has a corresponding dateFilter config.
fullWeek : Boolean

When true, a full week of dates is rendered for a single day range. This should not be applied when the duration spans multiple days.

Has a corresponding fullWeek config.
heightAnimation : Promise

A Promise which will be in Pending state only when the minHeight is animating to a new value.
hideEmptyDays : Booleanfalse

Configure this as true to hide day columns which contain no events.

Use with care. This may result in no day columns being rendered for completely empty time ranges.

Has a corresponding hideEmptyDays config.
isCalendarRow : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

renderRowHeader( )

internal

Renders the row header content by calling the configured rowHeaderRenderer function and syncing the result to the DOM.

This method is called automatically during the refresh cycle if a rowHeaderRenderer is configured.
scrollTo( target, options )
: Promise

ASYNC

Brings an event or a time into view.
toggleExpandCollapse( )
: Promise

ASYNC

If not autoHeight, this toggles between the collapsed state where it shows the defaultEventRowCount even if more event rows exist, and the expanded state (which is equivalent to autoHeight) where all event rows are shown.

Events

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

heightChange

Fires when this CalendarRow has completely changed its height. This fires after the animation has finished.
refresh

Fires when this CalendarRow refreshes.
toggleExpanded

Fires after this CalendarRow has been expanded or collapsed to show or hide overflowing events.

Event handlers

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

onHeightChange

Called when this CalendarRow has completely changed its height. This fires after the animation has finished.
onRefresh

Called when this CalendarRow refreshes.
onToggleExpanded

Called after this CalendarRow has been expanded or collapsed to show or hide overflowing events.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-calendar-row-compact-header-font-size	The font size for the day name and date in the header when `compactHeader` is set.
--b-calendar-row-non-working-day-background	Non-working day background

CalendarRow
Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree3

Mixins10

Contents

CalendarRow Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree3

Mixins10

Contents

CalendarRow
Widget