DateRangeOwner
Mixin

Mixin that encapsulates a range of dates specified by a date and a range (such as '1 day', '1 week', or '1 month'). When the date is set, the mixin automatically snaps the start and end dates to the appropriate range boundaries. It also supports explicit startDate / endDate pairs for fixed ranges, and provides navigation methods (next, previous) that shift the range forward or backward by the configured increment.

Calendar views that use this mixin accept range configuration. For example:

const calendar = new Calendar({
    modes : {
        day : {
            // Show 3 days at a time
            range : '3 days'
        },
        list : {
            // Show events for one month
            range : '1 month'
        }
    }
});

// Navigate the active view forward or backward by its range
calendar.activeView.next();
calendar.activeView.previous();

Configs

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

date : Date

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.

Has a corresponding runtime date property.
endDate : Date

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.

Has a corresponding runtime endDate property.
fixedDuration : Boolean

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.

Has a corresponding runtime fixedDuration property.
range : String/DurationConfig
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.

Has a corresponding runtime range property.
shiftIncrement : String/DurationConfig
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.

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.

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.

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.

Has a corresponding runtime shiftIncrement property.
startDate : Date

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

Has a corresponding runtime startDate property.

Properties

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

isDateRangeOwner : Booleantrue

READONLY

static

ADVANCED

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

date : Date

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

Has a corresponding date config.
dateBounds : Date[]

internal

Returns the range of included dates in the range as a two-element array, i.e., [0] is startDate and [1] is lastDate.
endDate : Date

READONLY

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

Has a corresponding endDate config.
fixedDuration : Boolean

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.

Has a corresponding fixedDuration config.
lastDate : Date

internal

The last day that is included in the date range. This is different than endDate since that date is not inclusive. For example, an endDate of 2022-07-21 00:00:00 indicates that the time range ends at that time, and so 2022-07-21 is not in the range. In this example, lastDate would be 2022-07-20 since that is the last day included in the range.
range : String/DurationConfig

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.

Has a corresponding range config.
shiftIncrement : String/DurationConfig
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.

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.

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.

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.

Has a corresponding shiftIncrement config.
startDate : Date

READONLY

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

Has a corresponding startDate config.
isDateRangeOwner : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

parseRange( range )
: DurationConfig

internal

static

Parses a range configuration into a canonical object form with unit and magnitude properties.

The input may be a string like 'day' or 'week', or '1d' or '1 day' or '4 weeks', '1десятилетие', an object like { magnitude : 1, unit : 'десятилетие' }, or a DurationConfig object. If a number is passed, it is treated as a number of days.

next( )

Interface method used by an encapsulating Calendar view to implement the "next" button.
peekEndDate( )
: Date

internal

Peek at any incoming configured endDate and if there is one, convert it to a Date.

startDate, endDate processing may need to know the value of an as yet uningested endDate.
previous( )

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

Events

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

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.
shiftIncrementChange

Fired when the shiftIncrement of this view changes.

Event handlers

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

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.
onShiftIncrementChange

Called when the shiftIncrement of this view changes.

Source path

Calendar/widget/mixin/DateRangeOwner.js

Inheritance tree1

DateRangeOwner

DateRangeOwner
Mixin

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree1

Contents

DateRangeOwner Mixin

See also

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree1

Contents

DateRangeOwner
Mixin