License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Vue.js Gantt Chart Component

We will create a simple wrapper that registers the Gantt chart as a Vue.js component. During the component initialization (in "mounted" event handler), we create a DayPilot.Gantt instance linked to the <div> placeholder (see the HTML template). The Gantt chart is configured it using the values specified in the "config" property.

After initialization, the DayPilot.Gantt instance will be stored as "control" property of the Vue component object.

Gantt Chart Configurator

This app lets you customize the Gantt chart appearance and behavior and preview the changes immediately. The preview Gantt chart object is live and fully functional (you can add/remove/update tasks and milestones, add links, change the hierarchy and order of tasks).

The UI Builder generates a configuration object which you can use in your application. You can also download a complete Vue.js project with all dependencies

Loading Gantt Chart Data

You can load the Gantt chart data using DayPilot.Gantt.update() method. This method will load the supplied data and redraws the Gantt chart.

In our Vue.js application, we have two methods that use the update() method to load tasks and links:

In a real application, you'll want to load the tasks from the server using a REST API. In this example, we use a static array to show the expected data structure. It's an array of task objects with the structure described in DayPilot.Task.data property documentation.