CalendarPanel

A Panel which displays a month of date cells.

This is a base class for UI widgets like DatePicker which need to display a calendar layout.

This widget is not intended to be used directly

No results

Configs

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

animateTimeShift : Boolean

By default, when navigating through time, the next time block will be animated in from the appropriate direction.

Configure this as false to disable this.

Has a corresponding runtime animateTimeShift property.
cellRenderer : Function/String
A function (or the name of a function) which creates content in, and may mutate a day cell element.
Parameters
- context : Object
  
  Renderer context data
- cell : HTMLElement
  
  The cell element.
- date : Date
  
  The date for the cell
- day : Number
  
  The day for the cell (0 to 6 for Sunday to Saturday)
- rowIndex : Number[]
  
  The row index, 0 to month row count (6 if sixWeeks is true)
- row : HTMLElement
  
  The row element encapsulating the week which the cell is a part of
- source : CalendarPanel
  
  The widget being rendered
- cellIndex : Number[]
  
  The cell index in the whole panel. May be from 0 to up to 42
- columnIndex : Number[]
  
  The column index, 0 to 6
- visibleColumnIndex : Number[]
  
  The visible column index taking hidden non working days into account
Returns

String/DomConfig/null
date : Date/String

The date which this CalendarPanel encapsulates.

Has a corresponding runtime date property.
dayNameFormat : Stringddd

The DateHelper format string to format the day names in the header row above the calendar cells.
disableNonWorkingDays : Boolean

Configure as true to render non working days as disabledDates.

Note, that by default, non working days are read from the locale, and are normally Saturday and Sunday. But they can be set to other days than weekend days.
disableOtherMonthCells : Boolean

Configure this as true to disable pointer interaction with cells which are outside the range of the current month.
disableWeekends : Boolean

Configure as true to render Saturdays and Sundays as disabledDates.
disabledCls : String

The class name to add to disabled calendar cells.
disabledDates : Function/String/Date[]/String[]
Either an array of Date objects which are to be disabled (or date strings), or a function (or the name of a function), which, when passed a Date returns true if the date is disabled. Disabled dates cannot be interacted with.
Parameters
- date : Date
  
  Date to check
Returns

Boolean
:

Returns true if the provided date is disabled
headerRenderer : Function/String
A function (or the name of a function) which creates content in, and may mutate a day header element.

The cell element may be mutated, or an HTML string or DomConfig object may be returned.
Parameters
- cell : HTMLElement
  
  The header element
- columnIndex : Number
  
  The day column. Will be in the range 0 to 6
- weekDay : Number
  
  The canonical day number where Monday is 0 and Sunday is 6
Returns

String/DomConfig/null
hideOtherMonthCells : Boolean

Configure this as true to hide cells which are outside the range of the current month.
minColumnWidth : Number

By default, day cells flex to share available Panel width equally.

Set this config if the available width is too small, and the cell width needs to be larger to show events.

Setting this config causes the month grid to become scrollable in the X axis.
minRowHeight : Number/String

By default, week rows flex to share available Panel height equally.

Set this config if the available height is too small, and the cell height needs to be larger to show events.

Setting this config causes the month grid to become scrollable in the Y axis.

May be specified as a number in which case it will be taken to mean pixels, or a length in standard CSS units.
month : Month/MonthConfig

A Month Month utility object which encapsulates this Panel's month and provides contextual information and navigation services.
nonWorkingDayCls : String

The class name to add to calendar cells which are nonWorkingDays.
nonWorkingDays : Object<Number, Boolean>

Non-working days as an object where keys are day indices, 0-6 (Sunday-Saturday), and the value is true. Defaults to nonWorkingDays.
otherMonthCls : String

The class name to add to calendar cells which are in the previous or next month.
shadePastDates : Boolean

Configure as true to render past dates in a lighter text color.

Has a corresponding runtime shadePastDates property.
showWeekColumn : Boolean

Configure as true to show a week number column at the start of the calendar block.

Has a corresponding runtime showWeekColumn property.
sixWeeks : Booleantrue

Configure as true to always show a six-week calendar.
tip : TooltipConfig

A config object to create a tooltip which will show on hover of a date cell including disabled, weekend, and "other month" cells.

It is the developer's responsibility to hook the beforeshow event to either veto the show by returning false or provide contextual content for the date.

The tip instance will be primed with a date property.
todayCls : String

The class name to add to the calendar cell which contains today's date.
weekColumnHeader : String

The header text for the week number column, if shown.

Has a corresponding runtime weekColumnHeader property.
weekRenderer : Function/String
A function (or the name of a function) which creates content in, and may mutate the week cell element at the start of a week row.
```
weekRenderer(weekCell, week) {
    // week[0] is the year
    // week[1] is the week number
    cell.innerText = week[1];
}
```
The cell element may be mutated, or an HTML string or DomConfig object may be returned.
Parameters
- weekCell : HTMLElement
  
  The header element
- week : Number[]
  
  An array containing [year, weekNumber]
Returns

String/DomConfig/null
weekStartDay : Number

The week start day, 0 meaning Sunday, 6 meaning Saturday. Defaults to weekStartDay.
weekendCls : String

The class name to add to calendar cells which are weekend dates.

Properties

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

isCalendarPanel : Booleantrue

READONLY

static

ADVANCED

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

animateTimeShift : Boolean

By default, when navigating through time, the next time block will be animated in from the appropriate direction.

Configure this as false to disable this.

Has a corresponding animateTimeShift config.
date : Date

Gets or sets the date that orientates the panel to display a particular month. Changing this causes the content to be refreshed.

Has a corresponding date config.
endDate : Date

READONLY

The end date of this view. Note that in terms of full days, this is exclusive, ie: 2020-01-012 to 2020-01-08 is seven days. The end is 00:00:00 on the 8th.

Note that this may not be the last date of this panel's current month.
shadePastDates : Boolean

Configure as true to render past dates in a lighter text color.

Has a corresponding shadePastDates config.
showWeekColumn : Boolean

Configure as true to show a week number column at the start of the calendar block.

Has a corresponding showWeekColumn config.
startDate : Date

READONLY

The date of the first day cell in this panel. Note that this may not be the first of this panel's current month.
visibleWeekCount : Number

READONLY

The number of rows displayed in this month. If sixWeeks is not set, this may be from 4 to 6.
weekColumnHeader : String

The header text for the week number column, if shown.

Has a corresponding weekColumnHeader config.
isCalendarPanel : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

doRefresh( )

private

Implementation of the UI refresh.
getCell( date, strict )
: HTMLElement

Returns the cell associated with the passed date.

To exclude dates which are outside of the panel's current month, pass the strict parameter as true
refresh( )

Refreshes the UI after changing a config that would affect the UI.
updateDate( )

The date which this CalendarPanel encapsulates. Setting this causes the content to be refreshed.
updateWeekStartDay( )

Set to 0 for Sunday (the default), 1 for Monday etc.

Set to null to use the default value from DateHelper.

Events

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

beforeRefresh

Fires before this CalendarPanel refreshes in response to changes in its month.
cellClick

Fired when a date cell is clicked.
dateChange

Fires when the date of this CalendarPanel is set.
refresh

Fires when this CalendarPanel refreshes.
weekCellClick

Fired when a week number cell is clicked.

Event handlers

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

onBeforeRefresh

Called before this CalendarPanel refreshes in response to changes in its month.
onCellClick

Called when a date cell is clicked.
onDateChange

Called when the date of this CalendarPanel is set.
onRefresh

Called when this CalendarPanel refreshes.
onWeekCellClick

Called when a week number cell is clicked.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-calendar-panel-cell-background	Date cell background
--b-calendar-panel-cell-display	Display property for date cells
--b-calendar-panel-cell-font-size	Date cell font size
--b-calendar-panel-cell-font-weight	Date cell font-weight
--b-calendar-panel-cell-padding	Date cell padding
--b-calendar-panel-color	Date cell color
--b-calendar-panel-day-color	Color used for day name letters
--b-calendar-panel-day-font-size	Font-size used for day name letters and week numbers
--b-calendar-panel-day-header-font-weight	Font-weight used for day name letters
--b-calendar-panel-disabled-cell-opacity	Disabled date cell opacity
--b-calendar-panel-gap	Gap between day and date cells (must have a unit for calculations to work)
--b-calendar-panel-non-working-cell-display	Non-working day & date cell display
--b-calendar-panel-other-month-color	Other month (last dates of the month before, first dates of the month after) cell color
--b-calendar-panel-week-number-color	The color of text in week number cells
--b-calendar-panel-week-number-display	Display property for the week number column
--b-calendar-panel-week-width	Width of the week number column
--b-calendar-panel-weeks-gap	Gap between weeks. Also used as block padding for the weeks container to give even spacing

Source path

Core/widget/CalendarPanel.js

CalendarPanel

Configs

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins7

Contents