Pan
Makes the scheduler's timeline pannable by dragging with the mouse. Try it out in the demo below.
//<code-header>
fiddle.title = 'Pan';
//</code-header>
const scheduler = new Scheduler({
appendTo : targetElement,
autoHeight : true,
features : {
eventDragCreate : false,
pan : true
},
visibleDate : new Date(2021, 2, 1),
startDate : new Date(2021, 0, 1),
endDate : new Date(2021, 3, 1),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' },
{ id : 2, name : 'Bianca' }
]
});// Enable Pan
const scheduler = new Scheduler({
features : {
pan : true,
eventDragCreate : false
}
});
This feature is disabled by default. For info on enabling it, see GridFeatures.
Configs
12
Configs
12Other
Set to false to not pan horizontally when dragging in the time axis header
Set to false to not pan horizontally
Set to false to not pan vertically
Misc
Properties
19
Properties
19Common
Class hierarchy
Other
Set to false to not pan horizontally when dragging in the time axis header
Set to false to not pan horizontally
Yields true if a pan gesture is in process.
Set to false to not pan vertically
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
6
Events
6Fires on the owning Scheduler or Gantt widget before pan starts. Return false to prevent the operation.
// Adding a listener using the "on" method
pan.on('beforePan', ({ event }) => {
});| Parameter | Type | Description |
|---|---|---|
event | Event | The native browser DOM event |
Event handlers
6
Event handlers
6Called on the owning Scheduler or Gantt widget before pan starts. Return false to prevent the operation.
new Pan({
onBeforePan({ event }) {
}
});| Parameter | Type | Description |
|---|---|---|
event | Event | The native browser DOM event |