DateRangeOwner

Configs

The date to orient this view's range around.

When using a range of weeks, months, years or decades, the startDate snaps to the closest lower range boundary, and the end date snaps to the closest larger range boundary.

When using a range of days, the startDate is set to the passed date.

endDate: DateAlso a property

The end date (Time component is zeroed) 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: This configuration takes precedence over any range specified. If used, the range is ignored, and after configuration, the endDate is locked to the startDate when the startDate is changed.

fixedDuration: BooleanAlso a property

When using the Calendar's date picker with the multiSelect property true, the selected range is usually applied to views of this type.

However, if this property is set to true, then the view will not apply the selected range, but will instead use its configured range or startDate and endDate to determine the range of dates to display.

range: String | DurationConfigAlso a property

The time range around the date to display events for.

Valid values are:

day
week
month
year
decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

When using a range of weeks, months, years or decades, then when this widget's date is synced with its owning Calendar's date, this widget's startDate is snapped to the closest start point of the range which encompasses that date.

So if using range : '1w', then setting the date to Thursday, 28th October 2021 Would mean that the startDate snaps to Sunday 24th October 2021 (assuming the locale uses Sunday as the week start day).

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

Note: If an endDate is specified, any range is ignored. The encompassed range will be specified by the startDate and endDate, and when the startDate changes, the endDate is changed to keep the duration the same.

shiftIncrement: DurationConfigAlso a property

The time range to move by when next or previous is called.

If not specified, this view moves by its duration in days as derived from its range or its startDate and endDate.

Valid values are:

day
week
month
year
decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

Setting this property to null disables this view's next and previous methods, so effectively disables moving this view in time through the UI. The view can still be moved programmatically by setting its date or its startDate.

startDate: DateAlso a property

The start date (Time component is zeroed) of this view.

Properties

Class hierarchy

isDateRangeOwner: Boolean= truereadonly

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

isDateRangeOwner: Boolean= truereadonlystatic

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

Other

date: DateAlso a config

Setting this property may change the encapsulated range if the date is outside the current range.

It also causes this view to scroll the view to the passed date, or closest date. See scrollTo

endDate: DatereadonlyAlso a config

Gets the end date of the range that this view covers. Note that Date objects are time points, not a representation of a 24 hour period, So {startDate : '2020-10-24', endDate : '2020-10-25' } spans the single day 24th October 2020. The end point is 2020-10-25T00:00:00

fixedDuration: BooleanAlso a config

When using the Calendar's date picker with the multiSelect property true, the selected range is usually applied to views of this type.

range: DurationConfigAlso a config

The time range encapsulated by the current date.

When a range is used, changing the date snaps the startDate to the closest starting date of the range. For Example if the range was configured as '1 week' then setting the date to the date of next Wednesday would mean that the startDate would be the start of next week, and an entire week would be encapsulated by this view.

shiftIncrement: DurationConfigAlso a config

The time range to move by when next or previous is called.

If not specified, this view moves by its duration in days as derived from its range or its startDate and endDate.

Valid values are:

day
week
month
year
decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

startDate: DatereadonlyAlso a config

Gets the start date of the range that this view covers.

Functions

Interface method used by an encapsulating Calendar view to implement the "next" button.

Interface method used by an encapsulating Calendar view to implement the "prev" button.

Events

rangeChange

Fired when the range of dates encapsulated by this view changes.

This will be when initially configured with a startDate and endDate, and when moving a view in time by changing its date, or its range, or its startDate, or its endDate.

This will happen when moving in time using the Calendar's previous and next buttons in its tbar.

// Adding a listener using the "on" method
dateRangeOwner.on('rangeChange', ({ source, old, old.startDate, old.endDate, new, new.startDate, new.endDate }) => {

});

Parameter	Type	Description
`source`	DateRangeOwner	This calendar view instance.
`old`	Object	The old date range if any.
`old.startDate`	Date	the old start date.
`old.endDate`	Date	the old end date.
`new`	Object	The new date range
`new.startDate`	Date	the new start date.
`new.endDate`	Date	the new end date.

shiftIncrementChange

Fired when the shiftIncrement of this view changes.

// Adding a listener using the "on" method
dateRangeOwner.on('shiftIncrementChange', ({ old, new }) => {

});

Parameter	Type	Description
`old`	Object	The shift increment if any.
`new`	Object	The shift increment

Event handlers

onRangeChange

Called when the range of dates encapsulated by this view changes.

This will be when initially configured with a startDate and endDate, and when moving a view in time by changing its date, or its range, or its startDate, or its endDate.

This will happen when moving in time using the Calendar's previous and next buttons in its tbar.

new DateRangeOwner({
    onRangeChange({ source, old, new }) {

    }
});

Parameter	Type	Description
`source`	DateRangeOwner	This calendar view instance.
`old`	Object	The old date range if any.
`old.startDate`	Date	the old start date.
`old.endDate`	Date	the old end date.
`new`	Object	The new date range
`new.startDate`	Date	the new start date.
`new.endDate`	Date	the new end date.

onShiftIncrementChange

Called when the shiftIncrement of this view changes.

new DateRangeOwner({
    onShiftIncrementChange({ old, new }) {

    }
});

Parameter	Type	Description
`old`	Object	The shift increment if any.
`new`	Object	The shift increment