Furthermore, changing the duration should be possible only in steps corresponding to the size of the time segments in the currently active view. The user should be able to increase or decrease the duration of a job by dragging the right outer edge of a job bar. Var jobElement = document.createElement("gantt-job") Įv.tData("job", ev.target.id) Template.innerHTML "./styles/GanttJob.css" Įxport default class GanttJob extends HTMLElement "]`) const template = document.createElement('template') Note: Check some minor changes in the CSS style of the component VanillaGanttChart. The length of the job bar is calculated in the render function depending on the zoom level and the duration of the job.Ĭompared to Part 1 of this article, I have changed the styling of the jobs a bit. It renders a job as a simple div element. The component contains setters and getters for a job object and for the selected zoom level of the Gantt Chart’s time axis ( year-month or day).
#Gantt chart maker open source code
A Web Component For Jobsīefore we extend the functionality of jobs, we move the source code related to jobs into a separate component with the name GanttJob.
#Gantt chart maker open source install
For testing on your local PC, I’d recommend the module live-server, which you can install via npm.Īlternatively, you can try out the example here directly in your browser without installation. Since the code contains JavaScript modules, you can only run the example from an HTTP server and not from the local file system. The source code of the finished solution can be found in my GitHub repository. To follow the instructions in this article, you can use the files from the previous article as a starting point. The new interface of the Gantt Chart with job editing features In the next step, we will further extend the behavior of the jobs so that double-clicking on a job bar opens an editing dialogue. First, we will add a drag handle on the right-hand side of each job that can be used for resizing the job bar (in the picture, it’s shown as a narrow gray vertical bar). The following video shows what we are going to build in this article. In the end, we will look at some JavaScript libraries that can greatly simplify the effort of developing a fully functional Gantt Chart. In doing so, we will continue to work with Vanilla JS and Web Components. Now we will enhance the Gantt Chart component with some interaction possibilities for editing the jobs: the job bars are made resizable by mouse-dragging, and we also implement an editing dialogue that can be used to modify the start and end dates of a job. In Part 1 of this article, we developed a web component for an interactive Gantt Chart. This article has been kindly supported by our dear friends at Bryntum who are strong believers in the web as an application platform and provide advanced UI components and dev tools for over 5000 companies in 70+ countries.