PercentBar
This feature visualizes the percentDone field as a progress bar on the event elements. Each progress bar also optionally has a drag handle which users can drag can change the value.
You can customize data source for the feature with valueField and displayField configs.
//<code-header>
fiddle.title = 'Percent bar';
//</code-header>
const schedulerPro = new SchedulerPro({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
startDate : new Date(2022, 2, 23),
endDate : new Date(2022, 2, 28),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
features : {
percentBar : true
},
project : {
resources : [
{ id : 1, name : 'George', eventColor : 'blue' },
{ id : 2, name : 'Rob', eventColor : 'green' }
],
events : [
{
id : 1,
name : 'Project X',
startDate : '2022-03-24',
duration : 4,
percentDone : 80
},
{
id : 2,
name : 'Customer Project Y',
startDate : '2022-03-23T13:00',
duration : 4,
percentDone : 40
}
],
assignments : [
{ id : 1, event : 1, resource : 1 },
{ id : 2, event : 2, resource : 2 }
]
}
});Restricting resizing for certain tasks
You can prevent certain tasks from having their percent done value changed by overriding the isEditable method on your EventModel or TaskModel.
class MyTaskModel extends TaskModel {
isEditable(field) {
// Add any condition here, `this` refers to the a task instance
return this.field !== 'percentDone' && super.isEditable(field);
}
};
gantt = new Gantt({
project : {
taskModelClass : MyTaskModel
}
});
This feature is enabled by default in Gantt, but off by default in Scheduler Pro.
Configs
14
Configs
14Other
true to allow drag drop resizing to set the % done
Field name to use to display the value
By default, the underlying task record is updated live as the user drags the handle. Set to false
to only update the record upon drop.
true to show a small % done label within the event while drag changing its value
Field name to use as the data source
Misc
Properties
15
Properties
15Common
Class hierarchy
Other
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
9
Events
9Fired on the owning Scheduler or Gantt widget when dragging the percent bar
// Adding a listener using the "on" method
percentBar.on('percentBarDrag', ({ source, taskRecord, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Fired on the owning Scheduler or Gantt widget if a percent bar drag-drop operation is aborted
// Adding a listener using the "on" method
percentBar.on('percentBarDragAbort', ({ source, taskRecord, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Fired on the owning Scheduler or Gantt widget when percent bar dragging starts
// Adding a listener using the "on" method
percentBar.on('percentBarDragStart', ({ source, taskRecord, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Fired on the owning Scheduler or Gantt widget when dropping the percent bar
// Adding a listener using the "on" method
percentBar.on('percentBarDrop', ({ source, taskRecord, domEvent }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Event handlers
9
Event handlers
9Called on the owning Scheduler or Gantt widget when dragging the percent bar
new PercentBar({
onPercentBarDrag({ source, taskRecord, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Called on the owning Scheduler or Gantt widget if a percent bar drag-drop operation is aborted
new PercentBar({
onPercentBarDragAbort({ source, taskRecord, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Called on the owning Scheduler or Gantt widget when percent bar dragging starts
new PercentBar({
onPercentBarDragStart({ source, taskRecord, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Called on the owning Scheduler or Gantt widget when dropping the percent bar
new PercentBar({
onPercentBarDrop({ source, taskRecord, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TimelineBase | SchedulerPro or Gantt instance |
taskRecord | Model | The task record |
domEvent | MouseEvent | Browser event |
Typedefs
1
Typedefs
1CSS variables
4
CSS variables
4| Name | Description |
|---|---|
--b-percent-bar-z-index | Percent bar z-index |
--b-percent-bar-blend-mode | Percent bar blend mode |
--b-percent-bar-handle-text-color | Percent bar handle text color |
--b-percent-bar-background | Percent bar background. Note that for color-mix to work, this var is defined on .b-task-percent-bar |