TimeAxisColumn
A column containing the timeline "viewport", in which tasks, dependencies etc. are drawn. Normally you do not need to interact with or create this column, it is handled by Gantt.
Styling
You can style a timeaxis cell by using the afterRenderCell method.
const gantt = new Gantt({
appendTo : document.body,
columns : [
{
type : 'timeAxis',
afterRenderCell({ cellElement, record }) {
cellElement.style.background = 'rgba(255,200,0,0.15)';
}
}
]
});
Time axis column
//<code-header>
fiddle.title = 'Time axis column';
//</code-header>
const gantt = new Gantt({
appendTo : targetElement,
height : 350,
subGridConfigs : {
locked : { flex : 1 },
normal : { flex : 2 }
},
project : {
startDate : new Date(2020, 0, 1),
events : [
{ id : 1, name : 'Half done task', startDate : '2020-01-02', endDate : '2020-01-05' },
{ id : 2, name : 'Finalized task', startDate : '2020-01-09', endDate : '2020-01-10' },
{ id : 3, name : 'Way more work than needed', startDate : '2020-01-09', endDate : '2020-01-10' }
]
},
columns : [
{ type : 'name', flex : 1 },
{
type : 'timeAxis',
afterRenderCell({ cellElement, record }) {
if (record.id === 1) {
cellElement.style.background = 'rgba(255,200,0,0.15)';
}
else {
cellElement.style.background = 'unset';
}
}
}
]
});Configs
81
Configs
81Common
autoHeightColumn
autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
listenersEvents
maxWidthColumn
textColumn
widgetsWidgetColumn
widthColumn
Menu
Set to false to disable the TaskMenu for the cell elements in this column.
cellMenuItemsColumn
enableHeaderContextMenuColumn
headerMenuItemsColumn
showColumnPickerTimeAxisColumn
Integration
vueColumn
Interaction
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableTimeAxisColumn
editorColumn
filterableTimeAxisColumn
finalizeCellEditColumn
groupableTimeAxisColumn
hideableTimeAxisColumn
invalidActionColumn
managedCellEditingColumn
resizableTimeAxisColumn
revertOnEscapeColumn
sealedColumn
searchableTimeAxisColumn
sortableTimeAxisColumn
toggleAllHiddenColumn
Misc
alwaysClearCellColumn
autoSyncHtmlColumn
bubbleEventsEvents
callOnFunctionsEvents
editTargetSelectorColumn
filterTypeColumn
headerWidgetsColumn
headerWritingModeColumn
htmlEncodeColumn
htmlEncodeHeaderTextColumn
instantUpdateColumn
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
responsiveLevelsColumn
tagsColumn
touchConfigColumn
treeColumn
Rendering
afterRenderCellWidgetColumn
cellClsColumn
clsTimeAxisColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererWidgetColumn
tooltipColumn
tooltipRendererColumn
Properties
152
Properties
152Common
autoHeightColumn
autoWidthColumn
fieldColumn
fitModeColumn
flexColumn
maxWidthColumn
textColumn
widgetsWidgetColumn
widthColumn
Class hierarchy
Identifies an object as an instance of TimeAxisColumn class, or subclass thereof.
Identifies an object as an instance of TimeAxisColumn class, or subclass thereof.
isColumnColumn
isEventsEvents
isLocalizableLocalizable
isModelModel
isModelLinkModelLink
isModelStmModelStm
isTreeNodeTreeNode
isWidgetColumnWidgetColumn
Menu
Set to false to disable the TaskMenu for the cell elements in this column.
cellMenuItemsColumn
enableHeaderContextMenuColumn
headerMenuItemsColumn
showColumnPickerTimeAxisColumn
Editing
copyOfModel
isBatchUpdatingModel
isCommittingModel
isCreatingModel
isModifiedModel
isValidModel
modificationDataModel
modificationsModel
Integration
vueColumn
Interaction
cellEditorColumn
collapsedColumn
collapseModeColumn
collapsibleColumn
draggableTimeAxisColumn
editorColumn
filterableTimeAxisColumn
finalizeCellEditColumn
groupableTimeAxisColumn
hideableTimeAxisColumn
invalidActionColumn
managedCellEditingColumn
resizableTimeAxisColumn
revertOnEscapeColumn
sealedColumn
searchableTimeAxisColumn
sortableTimeAxisColumn
toggleAllHiddenColumn
JSON
jsonModel
Misc
alwaysClearCellColumn
autoSyncHtmlColumn
callOnFunctionsEvents
editTargetSelectorColumn
filterTypeColumn
firstStoreModel
headerWidgetsColumn
headerWritingModeColumn
htmlEncodeColumn
htmlEncodeHeaderTextColumn
instantUpdateColumn
localeHelperLocalizable
localeManagerLocalizable
responsiveLevelsColumn
stmModelStm
tagsColumn
touchConfigColumn
treeColumn
Other
contentElementColumn
defaultsColumn
elementColumn
formulaColumn
gridColumn
isPersistableModel
pinnedColumn
pinnedWidthColumn
readOnlyColumn
subGridColumn
textElementColumn
textWrapperColumn
visibleColumn
Parent & children
allChildrenTreeNode
allUnfilteredChildrenTreeNode
childLevelTreeNode
descendantCountTreeNode
firstChildTreeNode
isLeafTreeNode
isLoadedTreeNode
isParentTreeNode
isRootTreeNode
lastChildTreeNode
nextSiblingTreeNode
parentTreeNode
parentIdTreeNode
previousSiblingTreeNode
previousSiblingsTotalCountTreeNode
visibleDescendantCountTreeNode
Rendering
afterRenderCellWidgetColumn
cellClsColumn
clsTimeAxisColumn
groupRendererColumn
headerRendererColumn
iconColumn
rendererWidgetColumn
tooltipColumn
tooltipRendererColumn
Functions
78
Functions
78Configuration
Editing
beginBatchModel
cancelBatchModel
clearChangesModel
copyModel
endBatchModel
getDataModel
getUnmodifiedModel
hasBatchedChangeModel
isFieldModifiedModel
removeModel
revertChangesModel
setModel
Events
detachListenersBase
Identification
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
equalsModel
linkModelLink
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
getFilterableValueColumn
getRawValueColumn
hasListenerEvents
hideColumn
isEditableModel
onEvents
onAfterWidgetSetValueWidgetColumn
onBeforeWidgetSetValueWidgetColumn
refreshCellColumn
refreshCellsColumn
refreshHeaderTimeAxisColumn
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resizeToFitContentColumn
resumeEventsEvents
showColumn
suspendEventsEvents
toggleColumn
toggleChildrenColumn
triggerEvents
unEvents
Parent & children
ancestorsExpandedTreeNode
appendChildTreeNode
bubbleTreeNode
bubbleWhileTreeNode
clearChildrenTreeNode
containsTreeNode
convertToParentTreeNode
getDescendantCountTreeNode
insertChildColumn
isExpandedTreeNode
removeChildTreeNode
replaceChildrenTreeNode
traverseTreeNode
traverseBeforeTreeNode
traverseWhileTreeNode
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
2
Typedefs
2BryntumListenerConfigEvents
RelationConfigModel