CalendarDatePicker

A subclass of DatePicker which is able to show the presence of events in its cells if contained in a Calendar, and showEvents is set to a truthy value.

The datepicker Widget type is implemented by this class when this class is imported, or built into a bundle, and so any DateField may have its picker configured to use its capabilities of showing the presence of events in its date cells.

This class implements its own cellRenderer to show event presence. If you add a cellRenderer to a DatePicker, showEvents will not work as expected.

Configs

154

Common

listenersEvents

Other

When showEvents is not 'count', setting this to true means that a tooltip containing the event count will be shown on hover of a day cell.

When showEvents is 'dots', this controls the layout of the dots below the day number.

If the max property is 1, the dots will be coloured using the default event colour, not the colour of the event. This is to create a consistent appearance.

ParameterTypeDescription
marginTopNumber

The margin above the dots. Default is 4.

maxNumber

The maximum number of dots to show. Default is 4.

gapNumber

The gap between dots. Default is 3.

sizeNumber

The size of the dots. Default is 5.

stripeBoolean

If true, the dots will be striped, meaning they will be joined together with no gap between them and rounded at each end. Default is false.

showEvents: Boolean | count | dots | heatmap= falseAlso a property

How to show presence of events in the configured eventStore in the day cells. Values may be:

  • false - Do not show events in cells.
  • true - Show a themeable bullet to indicate the presence of events for a date.
  • 'count' - Show a themeable badge containing the event count for a date.
  • 'dots' - Show small event-coloured bullets up to a maximum of eventDots.max to indicate event presence.
  • 'heatmap' - show warmer background colors the more events are present for a date
activeDateDatePicker
animateTimeShiftCalendarPanel
cellRendererDatePicker
columnWidget
dateDatePicker
dayNameFormatDatePicker
defaultFocusContainer
disabledClsCalendarPanel
disabledDatesCalendarPanel
disableWeekendsCalendarPanel
dragSelectDatePicker
drawerPanel
editMonthDatePicker
eventFilterSchedulerDatePicker
eventHeaderRendererEventRenderer
eventRendererEventRenderer
eventStoreSchedulerDatePicker
getPrimaryResourceEventRenderer
headerRendererCalendarPanel
hideOtherMonthCellsCalendarPanel
includeYearDatePicker
labelPositionContainer
maxDateDatePicker
minColumnWidthCalendarPanel
minDateDatePicker
minRowHeightCalendarPanel
monthCalendarPanel
multiSelectDatePicker
nonWorkingDayClsCalendarPanel
nonWorkingDaysCalendarPanel
otherMonthClsCalendarPanel
renditionContainer
rtlRTL
selectionDatePicker
shadePastDatesCalendarPanel
showWeekColumnCalendarPanel
sixWeeksCalendarPanel
spanWidget
tipCalendarPanel
todayClsCalendarPanel
weekColumnHeaderCalendarPanel
weekendClsCalendarPanel
weekRendererCalendarPanel
weekStartDayCalendarPanel

Accessibility

ariaLabelWidget
keyMapKeyMap

Content

bbarPanel
defaultsContainer
footerPanel
headerPanel
itemsContainer
lazyItemsContainer
namedItemsContainer
stripsPanel
tbarPanel
textContentContainer
toolsPanel

CSS

bodyClsPanel
borderContainer
clsWidget
colorWidget
htmlClsWidget
itemClsContainer
styleWidget
uiPanel

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

misc

tabBarItemsContainer

Misc

dataFieldWidget
disabledWidget
iconPanel
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
readOnlyWidget
refWidget
rippleWidget
tabWidget
titlePanel
tooltipWidget

Record

recordContainer

Scrolling

State

stateIdState

Properties

113

Class hierarchy

isCalendarDatePicker: Boolean= truereadonly
Identifies an object as an instance of CalendarDatePicker class, or subclass thereof.
isCalendarDatePicker: Boolean= truereadonlystatic
Identifies an object as an instance of CalendarDatePicker class, or subclass thereof.
isCalendarPanelCalendarPanel
isContainerContainer
isDatePickerDatePicker
isDelayableDelayable
isEventRendererEventRenderer
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isPanelPanel
isSchedulerDatePickerSchedulerDatePicker
isStateState
isToolableToolable
isWidgetWidget

Other

When showEvents is not 'count', setting this to true means that a tooltip containing the event count will be shown on hover of a day cell.

When showEvents is 'dots', this controls the layout of the dots below the day number.

If the max property is 1, the dots will be coloured using the default event colour, not the colour of the event. This is to create a consistent appearance.

ParameterTypeDescription
marginTopNumber

The margin above the dots. Default is 4.

maxNumber

The maximum number of dots to show. Default is 4.

gapNumber

The gap between dots. Default is 3.

sizeNumber

The size of the dots. Default is 5.

stripeBoolean

If true, the dots will be striped, meaning they will be joined together with no gap between them and rounded at each end. Default is false.

showEvents: Boolean | count | dots | heatmap= falseAlso a config

How to show presence of events in the configured eventStore in the day cells. Values may be:

  • false - Do not show events in cells.
  • true - Show a themeable bullet to indicate the presence of events for a date.
  • 'count' - Show a themeable badge containing the event count for a date.
  • 'dots' - Show small event-coloured bullets up to a maximum of eventDots.max to indicate event presence.
  • 'heatmap' - show warmer background colors the more events are present for a date
$namestaticWidget
animateTimeShiftCalendarPanel
columnWidget
dateCalendarPanel
dragSelectDatePicker
endDateCalendarPanel
firstItemContainer
hasChangesContainer
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
renditionContainer
rtlRTL
selectionDatePicker
shadePastDatesCalendarPanel
showWeekColumnCalendarPanel
spanWidget
startDateCalendarPanel
toolsPanel
typestaticWidget
valuesContainer
visibleWeekCountCalendarPanel
weekColumnHeaderCalendarPanel

Accessibility

keyMapKeyMap

Content

bbarPanel
tbarPanel

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
titlePanel
tooltipWidget

Record

recordContainer

State

stateState

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

82

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

addContainer
composeWidget
createColorValueEventRenderer
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getAtContainer
getCellCalendarPanel
getWidgetByIdContainer
insertContainer
isSelectedDatePicker
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
refreshCalendarPanel
relayAllEvents
removeContainer
removeAllContainer
resetValuesContainer
setValuesContainer
triggerEvents
unEvents
unmaskWidget
updateDateCalendarPanel
updateWeekStartDayCalendarPanel

State

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

27
beforeRefreshCalendarPanel
catchAllEvents
cellClickCalendarPanel
dateChangeCalendarPanel
destroyEvents
expandPanel
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
refreshCalendarPanel
resizeWidget
selectionChangeDatePicker
showWidget
weekCellClickCalendarPanel

Event handlers

27

Typedefs

7

CSS variables

103