Oh-my-gantt NPM

OH-MY-GANTT

Oh-my-gantt is a simple Gantt chart table tool that does not depend on third-party frameworks and can be integrated with major Javascript frameworks.

Installation

NPM

npm install oh-my-gantt -S
# or 
yarn add oh-my-gantt

// import to your js or ts
import 'oh-my-gantt/dist/index.css'
import { OhMyGantt } from 'oh-my-gantt'

Direct \<script> Include

<link rel="stylesheet"  href="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.css" />
<script src="https://unpkg.com/oh-my-gantt@1.2.7/dist/index.umd.js"></script>
<script>
  var OhMyGantt = OMG.OhMyGantt
<script>

Usage

HTML

<div id="gantt-box"></div>

JavaScript

const data = [
  {
    name: 'Task 1',
    timebar: [
      {
        from: '2021-12-01',
        to: '2021-12-03',
        desc: 'Task 1',
      },
    ]
  },
  {
    name: 'Task 2',
    timebar: [
      {
        from: '2021-12-04',
        to: '2021-12-05',
        desc: 'Task 2',
        __config: { style: { backgroundColor: 'rgb(36, 112, 122)' } }
      },
    ]
  },
]

const gantt = new OhMyGantt('#gantt-box', {
  from: '2021-12-01',
  to: '2021-12-31',
  timeInterval: 'day',
  timeCellWidth: 120,
  columns: [
    {
      name: 'name',
      label: 'Task Name',
      width: 140,
    }
  ],
  data
})

OhMyGantt Instance

The OhMyGantt constructor wraps two parameters: element and Options

const myGanttInstacne = new OhMyGantt(element, {
  // ...Options
})

element

Provide the OhMyGantt instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.

Options

Option	Descript	Type	Default value / Params	Return
from	Set the start time of the Gantt chart table display	Date \| string
to	Set the end time of the Gantt chart table display	Date \| string
timeInterval	Set the time interval of the time column	'day' \|'hour' \| 'week' \| 'month' \| 'year' \| number	'day'
dataGridWidth	The width setting of the data grid(the table on the left).	number	240
timeCellWidth	The width of each column of the time grid	number	120
timebarHeight	height of the timebar	number	32
timebarDraggable	Whether the timebar allows dragging	boolean	false
columns	Data grid field settings	ColumnItem[]
data	Data content for display	MyGanttDataItem
timebarRenderer	A function for customizing the content rendered by the timebar		(TimebarData, OhMyGantt)	string or HTMLElement or null
timeGridCellRenderer	A function to customize the rendered content of `timetable` cells			(data: ColumnItem, columnIndex: number, ctx: OhMyGantt)	string or HTMLElement or null
timeLabelRenderer	The function used to customize the rendered content of the sub-content of the header cell of the `timetable` header		(data: ColumnItem, columnIndex: number, ctx: OhMyGantt)	string or HTMLElement or null
onClickTimebar	Event fired when Timebar is clicked		(TimebarData, Event)
onMouseoverTimebar	Event fired when the mouse passes the Timebar		(TimebarData, Event)
onMouseleaveTimebar	Event fired when the mouse leaves the Timebar		(TimebarData, Event)
onDragTimebar	Event fired when timebar is dragged		(TimebarData, Event)
onDragstartTimebar	Event fired when the timebar starts to be dragged		(TimebarData, Event)
onDragendTimebar	Event fired when the timebar is finished dragging		(TimebarData, Event)
onClickCell	Event fired when cell is clicked		( CellData, Event)
onDropCell	The event fired when the timebar is dragged and dropped to the cell		(CellData, Event)
onDragoverCell	The event fired when the timebar is drag over the cell		(CellData, Event)
onDragenterCell	The event triggered when the timebar is dragged enter the cell		(CellData, Event)
onDragleaveCell	Event fired when timebar is dragged away from cell		(CellData, Event)
onScroll	Event fired when table scrolls		(GridScrollData, Event)
onCreated	Event fired after the line executes `new OhMyGantt(Element, Options)`		(OhMyGantt)
onRendered	Event fired after rendering the table		(OhMyGantt)

Methods and Props

Prop/Method	Descript	Type	Return
element	The target Dom that was mounted when the instance was created	Element
data	The data set when the instance was created	MyGanttDataItem[]
timeList	Time list of all time in the time grid	Date[]
from	Start time of the time grid	Date
to	End time of the time grid	Date
options	Setting items when creating an instance	Options
$elements	The object of the HTMLElement object that stores the data table and the time table after the instance is created	{ dataGrid: HTMLElement \| null, timeGrid: HTMLElement \| null }
renderDataGrid	Method: Render the left table (Data grid	()=>HTMLElement, number
Returns the HTMLElement of the data grid and its width
renderTimeGrid	Method: Render the right table (Time grid)	()=>HTMLElement, number
Returns the HTMLElement of the time grid and its width
render	Method: Render the table (the renderDataGrid and renderTimeGrid methods will be executed)	()=>void
getScrollTop	Method: Get the scroll top of the table	() => number	Return scroll top
getRowDataByIndex	Get the data of the row by the index value of the row	(index: number) => MyGanttDataItem \| null	return the row of data
getRowDataById	Get the row data by row id	(index: number) => MyGanttDataItem \| null	return the row of data
setMarkLine	Set a mark line	(markLine: MarkLine)=> void
removeMarkLine	remove a mark line	(markLine: MarkLine)=> void
scrollToTime	The time grid scrolls horizontally to the specified time	(time: Date	string)=> void
setScrollTop	Scroll the table to the specified height	(top: number)=> void
scrollToRow	Scrolls the table to the specified row by row id or index value	({index: number})=> void \| ({id: string \| number })=> void

Type and interface

MyGanttDataItem

Props	Descript	Type
timebar	timebar设置	TimebarSetting[]
__config	The related settings for this row	{ height?: number, key: string: any}
key: string	数据表格有其它任意数据	any

TimebarSetting

Props	Descript	Type	Required
from	Start time of timebar	Date \| string	Yes
to	End time of timebar	Date \| string	Yes
__config	The relevant settings of the timebar	{ style?: number, key: string: any}

ColumnItem

Props	Descript	Type	Required
name	column name	string	Yes
label	This column displays the content of the header	string	Yes
width	set column width	number
sourceData	Customized data content (if it is in the time table, it will be automatically generated, and its value is the timestamp of the time in this column)	any

CellData

Props	Descript	Type
rowData	Data of the current row	any
$target	The HTMLElement for the current cell	HTMLElement
rowIndex	The index value of the current row	number
value	The value of the current cell	any
columnIndex	The index value of the current column	number
columnName	The name of the current column	any

TimebarData

Props	Descript	Type
rowData	Data of the current row	any
$target	The HTMLElement for the current timebar	HTMLElement
rowIndex	The index value of the row where the current timebar is located	number
value	The value of the current timebar starting cell (usually the timestamp of the column time)	string
columnIndex	The index value of the current timebar starting cell	any
timeColumnsIndex	The index of the field occupied by the current timebar	any
timebarItemData	Current timebar related settings	TimebarSetting

MarkLine instance

import { MarkLine } from 'oh-my-gantt'

const markLineInstance = new MarkLine({
  // ...MarkLine Options
})

// add a markLine
myGanttInstacne.setMarkLine(markLineInstance)

// remove markLine
myGanttInstacne.removeMarkLine(markLineInstance)

MarkLine Options

Option	Descript	Type	Default	Required
time	The time corresponding to the time grid	date \| string		Yes
label	The text content displayed by the marker line label	string		Yes
color	The color of the mark line	string	'#0086d4'
lineStyle	Line style	'solid' \| 'dashed' \| 'dotted'	'solid'
lineWidth	Line width	number	1

The props of the MarkLine instance

Props	Descript	Type
options	Setting items when creating MarkLine	MarkLineOptions
id	Unique ID generated when MarkLine is created	string
$element	HTMLElement generated when MarkLine is created	HTMLElement