{"repo":"melfore/konva-timeline","free":true,"listed":false,"github":"https://github.com/melfore/konva-timeline","clone":"git clone https://github.com/melfore/konva-timeline.git","description":"@melfore/konva-timeline is a free, open source, TypeScript ReactJS library that uses konva and react-konva to render a scheduler / gantt / calendar component using canvas.","language":"TypeScript","stars":78,"topics":["canvas","gantt","konva","konva-react","reactjs","timeline","typescript","calendar","dnd","scheduler"],"license":"MIT","category":"productivity","readme_excerpt":"@melfore/konva-timeline @melfore/konva-timeline is a TypeScript ReactJS library that uses konva and react-konva to render a timeline component using canvas. Changelog Storybook Features This library is meant to represent data on a time range. It has been developed in a way to be the most generic it could. It can be used to display gantt charts , schedulers and planners . The library follows the concept of organizing data (tasks) belonging to specific groups (resources) over a predefined time window. Interaction There can be from none to many tasks per each resource and tasks can be moved across resources. Tasks can also be resized and hovered. For each user interaction with tasks there is a dedicated hook function exposed by the component's props. This enables various use cases like displaying the details of a task inside a modal or calling an API each time the task is moved. Gantt In order to create and display connection between tasks is neccesary setting dedicated props: - relatedTasks is a string array prop of TaskData that contains Ids of related Tasks. - enableLines is a global prop for the visualization of the connections. In this case OnTasksChange return also array of all tasks id that are inpacted by changed end of a the task at hand, and value of time in milliseconds of this variation. ⚠️ By relatedTasks is mean these tasks that their start can depends of the end of the task in question. Custom display Size of columns and rows can be adjusted using dedicated props:","default_branch":null,"files":null,"tree":[],"storefront":"/r/melfore","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/melfore/konva-timeline/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}