TickCells
A feature allowing you to display values in the time axis cell for each row in a scheduler.
This feature is disabled by default.
//<code-header>
fiddle.title = 'Tick cells';
//</code-header>
targetElement.innerHTML = '<p>This demo shows how to use TickCells feature:</p>';
const scheduler = new Scheduler({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
startDate : new Date(2024, 5, 3),
endDate : new Date(2024, 5, 5),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' }
],
features : {
tickCells : {
resourceTicksData : [
{
id : 1,
startDate : '2024-06-03',
value : 3,
resourceId : 1,
durationUnit : 'day',
duration : 1
},
{
id : 2,
startDate : '2024-06-04',
value : 8,
resourceId : 1,
durationUnit : 'day',
duration : 1
},
{
id : 3,
startDate : '2024-06-05',
value : 13,
resourceId : 1,
durationUnit : 'day',
duration : 1
}
],
tickRenderer({ value = 0 }) {
const
hours = Math.floor(value),
hourFraction = 60 * (value - hours);
return value ? `${hours}:${String(hourFraction).padStart(2, '0')}` : '';
}
}
}
});const scheduler = new Scheduler({
features : {
tickCells : {
resourceTicksData : [
{
id : 1,
startDate : '2024-06-03',
value : 20,
resourceId : 1,
durationUnit : 'day',
duration : 1
}
],
tickRenderer({ value = 0 }) {
const
hours = Math.floor(value),
hourFraction = 60 * (value - hours);
return value ? `${hours}:${String(hourFraction).padStart(2, '0')}` : '';
}
}
}
});
Configs
17
Configs
17Legacy inline data
The initial data, to fill the resourceTickStore with. Should be an array of ResourceTickModel or configuration objects.
Models & Stores
Store that holds resource ticks - instances of ResourceTickModel. A store will be automatically created if none is specified.
Other
Used to configure tick cell class
Used to configure tick entity name
Used to configure tick cell wrapper class
Config used to show or not the tick editor on cell double click.
Renderer function. Should return textual content or a DomConfig object.
new Scheduler({
features : {
tickCells : {
tickRenderer : resourceTick => {
const
hours = Math.floor(resourceTick.value),
hourFraction = 60 * (value - hours);
return value ? `${hours}:${String(hourFraction).padStart(2, '0')}` : '';
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
resourceTick | ResourceTickModel | Tick value to render |
Either textual content or a DomConfig object
Misc
Properties
16
Properties
16Common
Class hierarchy
Other
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
6
Events
6Fired when data store changes.
// Adding a listener using the "on" method
tickCells.on('change', ({ source, store, action, record, records, changes }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TickCells | This project |
store | Store | Affected store |
action | remove | removeAll | add | clearchanges | filter | update | dataset | replace | Name of action which triggered the change. May be one of the options listed above. |
record | Model | Changed record, for actions that affects exactly one record ( |
records | Model[] | Changed records, passed for all actions except |
changes | Object | Passed for the |
Event handlers
6
Event handlers
6Called when data store changes.
new TickCells({
onChange({ source, store, action, record, records, changes }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TickCells | This project |
store | Store | Affected store |
action | remove | removeAll | add | clearchanges | filter | update | dataset | replace | Name of action which triggered the change. May be one of the options listed above. |
record | Model | Changed record, for actions that affects exactly one record ( |
records | Model[] | Changed records, passed for all actions except |
changes | Object | Passed for the |