DayCellCollecter
Mixin
Mixin that provides the ability to collect day cell data blocks containing the events of interest to a Calendar widget. For each date in the view's range, it builds a DayCell object that includes the events intersecting that date, metadata about the cell's position in the UI grid, and information needed by the rendering layer such as overflow state and time range associations. The mixin also supports event filtering via the eventFilter and resource-specific cell collection for resource-based views.
This is used by all implemented Calendar widgets except AgendaView, which creates its cellMap from the events it finds in the eventStore.
Views that use this mixin support filtering events per cell using eventFilter:
const calendar = new Calendar({
modes : {
month : {
// Only show events that are not cancelled
eventFilter({ eventRecord }) {
return eventRecord.status !== 'cancelled';
}
}
}
});
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
A function, or the name of a function in the ownership hierarchy to filter which events are collected into the day cell data blocks. Return
trueto include the passed event, or a falsy value to exclude the event. -
Set to
trueto stack multi-day events within each cell in the order of their start time.When this property is set, multi day events will not sort to the top of day cells and flow in the same row from cell to cell.
Rather, the bar in the start cell will be sorted by its start time. In future cells, its bar will be sorted to the top of the cell.
Has a corresponding runtime stackMultiDayEvents property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of DayCellCollecter class, or subclass thereof.
-
Set to
trueto stack multi-day events within each cell in the order of their start time.When this property is set, multi day events will not sort to the top of day cells and flow in the same row from cell to cell.
Rather, the bar in the start cell will be sorted by its start time. In future cells, its bar will be sorted to the top of the cell.
Has a corresponding stackMultiDayEvents config.
-
Identifies an object as an instance of DayCellCollecter class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
Calculates the end date (EXCLUSIVE) to which an event must be propagated based upon the event's data in order to create a day-spanning event bar.
If an event overflows into 2011-01-02T01:00, then the exclusive propagateEndDate is 2011-01-03T00:00:00 so the event will be propagated into 2011-01-02.
But if an event ends on 2011-01-02T00:00:00, its propagateEndDate will be 2011-01-02T00:00:00 so it will be propagated as far as 2011-01-01
This may be overridden in subclasses to customize how events are propagated forwards.
example:
class OvernightEventMonthView extends MonthView { static get name() { return 'OvernightEventMonthView'; } static get type() { return 'overnighteventmonthview'; } calculatePropagateEndDate(eventData) { // If the event only spills into the next day but not further // then we do not want an extended event bar. // It will still get an arrow indicating that it continues rightwards. if (eventData.eventEndDate < DateHelper.add(eventData.date, 1, 'd')) { return DateHelper.add(DateHelper.clearTime(eventData.eventRecord.startDate), 1, 'd'); } // Default case, propagate event into the future as usual return super.calculatePropagateEndDate(eventData); } } // Register the type name OvernightEventMonthView.initClass(); new Calendar({ modes : { // Use our MonthView subclass as the month mode. month : { type :'overnighteventmonthview' } } })Note that this is implemented by both MonthView and {Calendar.widget.CalendarRow} which is the "all day" row in a week or day view.
-
This is the base event collection method which populates the cell Map passed in the options with events grouped by their start date.
This may be overridden in subclasses to customize how events are collected. For example, a resource-orientated view may wish to collect events for a specific resource, and some views filter all day and multi day events in or out.
The options passed are those documented in getEvents
-
This function populates and returns the cellMap for this view.
If the cellMap does not exist, it will be created.
The cellMap is a Map of
YYYY-MM-DDdate keys to day cell data blocks.Subclasses usually override this method to customize how events are collected.
Events
Events are triggered for certain actions in this class and can be listened for to react to those actions in your code-
Fired when a new set of events has been gathered for this view's date range.
Fired after one day cell's events are collected in sorted order according to the eventSorter
An application may use this to intervene in the event load received by the UI by mutating the
eventsarray.Fires when a day spanning event is found, and the date to which its encapsulating event bar extends has been calculated.
The default result in the event's
propagateEndDateproperty may be mutated by a listener.Note that this is an ending point in time, it does not refer to a 24 hour block. So setting the
propagateEndDatetonew Date(2022, 1, 10)means that the event bar will occupy cells up to and including February 9 2022 and no further.This is relayed through the owning Calendar, so a single listener may be used, for example:
new Calendar({ listeners : { eventPropagate(eventData) { // If the event only spills into the next day but not further // then we do not want an extended event bar. // An arrow will indicate that it continues rightwards. if (eventData.eventEndDate < DateHelper.add(eventData.date, 2, 'd')) { eventData.propagateEndDate = DateHelper.add(DateHelper.clearTime(eventData.eventRecord.startDate), 1, 'd'); } } } })The
eventEndDatein the data block may also be changed to override the event's real end date. This will mean that there will be no arrow indicating that the event continues:new Calendar({ listeners : { eventPropagate(eventData) { // If the event spills into the next day but not further // then we do not want an extended event bar. // Because we override the eventEndDate, no arrow will be present // to indicate any continuation. if (eventData.eventEndDate < DateHelper.add(eventData.date, 2, 'd')) { eventData.propagateEndDate = eventData.eventEndDate = DateHelper.add(DateHelper.clearTime(eventData.eventRecord.startDate), 1, 'd'); } } } });Event handlers
Event handlers are callbacks called as a result of certain actions in this class-
Called when a new set of events has been gathered for this view's date range.
Called after one day cell's events are collected in sorted order according to the eventSorter
An application may use this to intervene in the event load received by the UI by mutating the
eventsarray.Called when a day spanning event is found, and the date to which its encapsulating event bar extends has been calculated.
The default result in the event's
propagateEndDateproperty may be mutated by a listener.Note that this is an ending point in time, it does not refer to a 24 hour block. So setting the
propagateEndDatetonew Date(2022, 1, 10)means that the event bar will occupy cells up to and including February 9 2022 and no further.This is relayed through the owning Calendar, so a single listener may be used, for example:
new Calendar({ listeners : { eventPropagate(eventData) { // If the event only spills into the next day but not further // then we do not want an extended event bar. // An arrow will indicate that it continues rightwards. if (eventData.eventEndDate < DateHelper.add(eventData.date, 2, 'd')) { eventData.propagateEndDate = DateHelper.add(DateHelper.clearTime(eventData.eventRecord.startDate), 1, 'd'); } } } })The
eventEndDatein the data block may also be changed to override the event's real end date. This will mean that there will be no arrow indicating that the event continues:new Calendar({ listeners : { eventPropagate(eventData) { // If the event spills into the next day but not further // then we do not want an extended event bar. // Because we override the eventEndDate, no arrow will be present // to indicate any continuation. if (eventData.eventEndDate < DateHelper.add(eventData.date, 2, 'd')) { eventData.propagateEndDate = eventData.eventEndDate = DateHelper.add(DateHelper.clearTime(eventData.eventRecord.startDate), 1, 'd'); } } } });Type definitions
-
A data block created by all DayCellCollecter Calendar views to encapsulate occupied day cells and the events which intersect with each date to be shown in the UI. All useful data about the date and the shape of the UI is included.
Properties
- view : CalendarView
The owning view of the cell.
- date : Date
The date of the cell.
- key : String
a
YYYY-MM-DDformatted date key for the cell. - cellIndex : Number
The overall cell index in the cell-based UI being created.
- day : Number
The day of week for the cell: 0=Sunday, 6=Saturday
- columnIndex : Number
The column index in the cell-based UI being created.
- visibleColumnIndex : Number
The visible column index (eg 0 for a Monday if Sunday is the week start day, but was hidden)
- isNonWorking : Boolean
trueif the owning view considers the date a non-working day. - week : Number[]
The
[year, week]encapsulating the cell. - isOtherMonth : Boolean
The cell is outside the view's primary time range. Only significant when used by a CalendarPanel which encapsulates a single month.
- visible : Boolean
trueif the date cell is not for a hidden day. - tomorrow : Date
The date of the following cell.
- isRowStart : Boolean
trueif the cell is at the start of a visible row. - isRowEnd : Boolean
trueif the cell is at the end of a visible row. - hasOverflow : Boolean
trueif therenderedEventsoverflow the cell height and require a+n morebutton. - events : EventModel[]
The events which are to be shown for this date.
- resource : ResourceModel
Note this only exists when the cell is owned by a subview of a ResourceView, or while creating resource columns in a DayResourceView.
- renderedEvents : EventBar[]
If this view renders event bars (MonthView, CalendarRow), then this is an array of event bar definitions which belong in the cell. Whether all can be rendered depends upon the view's configured eventHeight and whether the cell is of fixed height. The
hasOverflowproperty is set if the rendered events overflow a cell's fixed capacity. - resourceDayEvents : EventModel[]
The events for the passed resource for the day (applies in a
DayResourceCalendarRow) column - timeRanges : TimeRangeModel[]
All time ranges which intersect with this date cell, including short ones which are rendered.
- allDayTimeRanges : TimeRangeModel[]
The all day time ranges which intersect with the whole day of this date cell.
- view : CalendarView
-
A data block which describes how an event bar is to be rendered into a day cell.
Properties
- eventRecord : EventModel
The event record for which the event bar is being rendered.
- propagateEndDate : Date
The date of the last cell into which the event bar will extend.
- cls : DomClassList
The CSS classes to apply to the event bar.
- iconCls : DomClassList
The CSS classes to apply to an event icon.
- dataset : Object
Property names and values to be applied to the Event bar's DOM
dataset - eventColor : String
Either a predefined colour name, or a DOM colour value to apply to the event bar.
- isAllDay : Boolean
trueif the event is flagged as an all day event in its data, or if it spans a day boundary and occupies more than one cell. - isOverflow : Boolean
trueif this event bar is a continuation from a previous cell. - overflows : Boolean
trueif this event bar flows into the next cell. - solidBar : Boolean
trueif the event bar is to be rendered with a solid background of its defined colour. All day events are solid by default.
- eventRecord : EventModel