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.
cellRenderer to show event presence. If you add a cellRenderer to a DatePicker, showEvents will not work as expected.The CalendarDatePicker is typically configured through the Calendar's sidebar:
const calendar = new Calendar({
sidebar : {
items : {
datePicker : {
showEvents : 'dots',
eventDots : {
max : 3
}
}
}
}
});
Useful configs
| Config | Description |
|---|---|
| showEvents | How to indicate event presence (true, 'count', 'dots', 'heatmap') |
| eventDots | Layout options for dot indicators (max, size, gap, stripe) |
| eventCountTip | Show event count tooltip on hover |
See also
- sidebar — Sidebar that contains this picker
- Sidebar — The sidebar widget
- MonthAgendaView — Subclass that extends this picker into a full view
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
When showEvents is not
'count', setting this totruemeans that a tooltip containing the event count will be shown on hover of a day cell.Has a corresponding runtime eventCountTip 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 ofeventDots.maxto indicate event presence.'heatmap'- show warmer background colors the more events are present for a date
Has a corresponding runtime showEvents property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of CalendarDatePicker class, or subclass thereof.
-
When showEvents is not
'count', setting this totruemeans that a tooltip containing the event count will be shown on hover of a day cell.Has a corresponding eventCountTip 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 ofeventDots.maxto indicate event presence.'heatmap'- show warmer background colors the more events are present for a date
Has a corresponding showEvents config.
-
Identifies an object as an instance of CalendarDatePicker class, or subclass thereof.