TimeAxis
A class representing the time axis of the scheduler. The scheduler timescale is based on the ticks generated by this class. This is a pure "data" (model) representation of the time axis and has no UI elements.
The time axis can be continuous or not. In continuous mode, each timespan starts where the previous ended, and in non-continuous mode there can be gaps between the ticks. A non-continuous time axis can be used when want to filter out certain periods of time (like weekends) from the time axis.
To create a non-continuous time axis you have 2 options. First, you can create a time axis containing only the time spans of interest. To do that, subclass this class and override the generateTicks method.
The other alternative is to call the filterBy method, passing a function to it which should return
false if the time tick should be filtered out. Calling clearFilters
will return you to a full time axis.
Configs
60
Configs
60Common
Other
Automatically adjust the timespan when generating ticks with generateTicks according to
the viewPreset configuration. Setting this to false may lead to shifting time/date of ticks.
Set to false if the timeline is not continuous, e.g. the next timespan does not start where the previous ended (for example skipping weekends etc).
Method generating the ticks for this time axis. Should return a non-empty array of ticks. Each tick is an object of the following structure:
{
startDate : ..., // start date
endDate : ... // end date
}
To see it in action please check out our TimeAxis example and navigate to "Compressed non-working time" tab.
| Parameter | Type | Description |
|---|---|---|
axisStartDate | Date | The start date of the interval |
axisEndDate | Date | The end date of the interval |
unit | DurationUnit | The unit of the time axis |
increment | Number | The increment for the unit specified. |
ticks The ticks representing the time axis
Include only certain hours or days in the time axis (makes it continuous : false). Accepts and object
with day and hour properties:
const scheduler = new Scheduler({
timeAxis : {
include : {
// Do not display hours after 17 or before 9 (only display 9 - 17). The `to´ value is not
// included in the time axis
hour : {
from : 9,
to : 17
},
// Do not display sunday or saturday
day : [0, 6]
}
}
}
In most cases we recommend that you use Scheduler's workingTime config instead. It is easier to use and makes sure all parts of the Scheduler gets updated.
Advanced
Chained store
Filtering
Paging
Records
Remote
Properties
70
Properties
70Class hierarchy
Other
The current end date of the time axis. {@note}This is after filtering for workingTime and so may not be the same as the configured start date.{/note}
Method generating the ticks for this time axis. Should return an array of ticks . Each tick is an object of the following structure:
{
startDate : ..., // start date
endDate : ... // end date
}
Take notice, that this function either has to be called with start/end parameters, or create those variables.
To see it in action please check out our TimeAxis example and navigate to "Compressed non-working time" tab.
| Parameter | Type | Description |
|---|---|---|
axisStartDate | Date | The start date of the interval |
axisEndDate | Date | The end date of the interval |
unit | DurationUnit | The unit of the time axis |
increment | Number | The increment for the unit specified. |
ticks The ticks representing the time axis, or no return value to use the default tick generation
Returns true if the time axis is continuous (will return false when filtered)
The current start date of the time axis. {@note}This is after filtering for workingTime and so may not be the same as the configured start date.{/note}
Returns the ticks of the timeaxis in an array of objects with a "startDate" and "endDate".
The configured end date of the time axis before workingTime filtering
The configured start date of the time axis before workingTime filtering
Get the currently used time unit for the ticks
Get/set currently used preset
Advanced
Filtering
Misc
Records
Functions
106
Functions
106Other
Returns true if the passed date is inside the span of the current time axis.
| Parameter | Type | Description |
|---|---|---|
date | Date | The date to query for |
true if the date is part of the time axis
Filter the time axis by a function (and clears any existing filters first). The passed function will be called with each tick in time axis.
If the function returns true, the 'tick' is included otherwise it is filtered. If all ticks are filtered out
the time axis is considered invalid, triggering invalidFilter and then removing the filter.
| Parameter | Type | Description |
|---|---|---|
fn | function | The function to be called, it will receive an object with |
thisObj | Object |
|
Gets the time represented by a tick "coordinate".
| Parameter | Type | Description |
|---|---|---|
tick | Number | the tick "coordinate" |
roundingMethod | floor | round | ceil | Rounding method to use. 'floor' to take the tick (lowest header in a time axis) start date, 'round' to round the value to nearest increment or 'ceil' to take the tick end date |
The date to represented by the tick "coordinate", or null if invalid.
Gets a tick "coordinate" representing the date position on the timescale. Returns -1 if the date is not part of the time axis.
| Parameter | Type | Description |
|---|---|---|
date | Date | the date |
the tick position on the scale or -1 if the date is not part of the time axis
Changes the time axis timespan to the supplied start and end dates.
Note This does not preserve the temporal scroll position. You may use setTimeSpan to set the time axis and maintain temporal scroll position (if possible).
| Parameter | Type | Description |
|---|---|---|
newStartDate | Date | The new start date |
newEndDate | Date | The new end date |
Moves the time axis by the passed amount and unit.
NOTE: When using a filtered TimeAxis the result of shift() cannot be guaranteed, it might shift into a
filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.
If that solution does not work for your filtering setup, please call setTimeSpan directly
instead.
| Parameter | Type | Description |
|---|---|---|
amount | Number | The number of units to jump |
unit | String | The unit (Day, Week etc) |
Moves the time axis forward in time in units specified by the view preset shiftUnit, and by the amount specified by the shiftIncrement
config of the current view preset.
NOTE: When using a filtered TimeAxis the result of shiftNext() cannot be guaranteed, it might shift into a
filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.
If that solution does not work for your filtering setup, please call setTimeSpan directly
instead.
| Parameter | Type | Description |
|---|---|---|
amount | Number | The number of units to jump forward |
Moves the time axis backward in time in units specified by the view preset shiftUnit, and by the amount specified by the shiftIncrement config of the current view preset.
NOTE: When using a filtered TimeAxis the result of shiftPrev() cannot be guaranteed, it might shift into a
filtered out span. It tries to be smart about it by shifting from unfiltered start and end dates.
If that solution does not work for your filtering setup, please call setTimeSpan directly
instead.
| Parameter | Type | Description |
|---|---|---|
amount | Number | The number of units to jump backward |
Returns true if the passed timespan is part of the current time axis (in whole or partially).
| Parameter | Type | Description |
|---|---|---|
start | Date | The start date |
end | Date | The end date |
true if the timespan is part of the timeaxis
Configuration
CRUD
Events
Records
Search
Sort, group & filter
Events
37
Events
37Fires before the timeaxis is about to be reconfigured (e.g. new start/end date or unit/increment). Return false
to abort the operation.
// Adding a listener using the "on" method
timeAxis.on('beforeReconfigure', ({ source, startDate, endDate }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |
startDate | Date | The new time axis start date |
endDate | Date | The new time axis end date |
Fires if all the ticks in the timeaxis are filtered out. After firing the filter is temporarily disabled to return the time axis to a valid state. A disabled filter will be re-enabled the next time ticks are regenerated
// Adding a listener using the "on" method
timeAxis.on('invalidFilter', ({ source }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |
Fires when the timeaxis has been reconfigured (e.g. new start/end date or unit/increment)
// Adding a listener using the "on" method
timeAxis.on('reconfigure', ({ source }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |
Event handlers
37
Event handlers
37Called before the timeaxis is about to be reconfigured (e.g. new start/end date or unit/increment). Return false
to abort the operation.
new TimeAxis({
onBeforeReconfigure({ source, startDate, endDate }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |
startDate | Date | The new time axis start date |
endDate | Date | The new time axis end date |
Called if all the ticks in the timeaxis are filtered out. After firing the filter is temporarily disabled to return the time axis to a valid state. A disabled filter will be re-enabled the next time ticks are regenerated
new TimeAxis({
onInvalidFilter({ source }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |
Called when the timeaxis has been reconfigured (e.g. new start/end date or unit/increment)
new TimeAxis({
onReconfigure({ source }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimeAxis | The time axis instance |