Export/Import for Excel, Export to iCal

The dhtmlxGantt library allows you to export data from the Gantt chart in the Excel and iCal formats. You can also import data into Gantt from an Excel file.

Limits on request size

There is a common API endpoint https://export.dhtmlx.com/gantt which serves for all export methods (exportToPDF, exportToPNG, exportToMSProject, etc.) and for the importFromExcel method. Max request size is 10 MB.

There is also a separate API endpoint https://export.dhtmlx.com/gantt/project specific for the MSProject export/import services (exportToMSProject/importFromMSProject only). Max request size: 40 MB.

Export to Excel

To export data from the Gantt chart to an Excel document, do the following:

To use the online export service, enable the export_api plugin via the plugins method:

gantt.plugins({
    export_api: true
});

Call the exportToExcel method to export data from the Gantt chart:

<input value="Export to Excel" type="button" onclick='gantt.exportToExcel()'> 
<script>    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Parameters of the export method

The exportToExcel() method takes as a parameter an object with several properties (all the properties are optional):

name - (string) sets the name of the output file with the extension '.xlsx'
columns - (array) allows configuring columns of the output Excel sheet. The properties of the column objects are:
- 'id' - (string,number) a property of the event that will be mapped to the column
- 'header' - (string) the column header
- 'width' - (number) the column width in pixels
- 'type' - (string) the column type
server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/gantt
callback - (function) If you want to receive an url to download a generated XLSX file, the callback property can be used. It receives a JSON object with the url property
visual - (boolean) adds the timeline chart to an exported Excel document. false by default
cellColors - (boolean) if set to true, the cells of the exported document will have the colors defined by the timeline_cell_class template, the color and background-color properties are exported
data - (object) sets a custom data source that will be presented in the output Gantt chart
date_format - (string) sets the format the date will be displayed in the exported Excel document. You can see the full list of the available format code here.

Calling the export method with optional properties

gantt.exportToExcel({
    name:"document.xlsx", 
    columns:[
        { id:"text",  header:"Title", width:150 },
        { id:"start_date",  header:"Start date", width:250, type:"date" }
    ],
    server:"https://myapp.com/myexport/gantt",
    callback: function(res){
        alert(res.url);
    },
    visual:true,
    cellColors:true,
    data:{},
    date_format: "dddd d, mmmm yyyy"
});

Default date parameters

The Export module expects the start_date and end_date columns to have the Date type and the duration column to have the number type.

In case of applying custom templates, it is necessary either to return a value of the expected type or to define a different value in the name property of the column configuration. For instance:

 
gantt.config.columns = [
    ...
    {name: "start_date", align: "center", width: 100, resize: true, 
        editor: start_dateEditor},
    {name: "end_date", align: "center", width: 100, resize: true, 
        editor: end_dateEditor},
    {name: "duration_formatted",         align: "center", width: 40, resize: true, 
        editor: durationEditor, 
        template: function(task){             return formatter.format(task.duration_formatted);         }
    },
    ...
];

Otherwise, the Gantt data won't be exported. Check the related example.

Setting a custom data source to export

To export the Gantt chart with a custom data set (i.e. not with the data presented in the initial Gantt chart), use the data property in the parameter of the exportToExcel method:

gantt.exportToExcel({   
    name:"document.xlsx", 
    data:[
        {id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
        {id:2, text:"Task #1", start_date:"02-04-2020",duration:8, parent:1},
        {id:3, text:"Task #2", start_date:"11-04-2020",duration:8, parent:1}
    ]      
});

Note, you cannot specify some URL as the value of the data parameter, just a data object.

Adding colors of tasks to export

You can add the colors of tasks to the exported Excel file of the Gantt chart via setting the value of the visual property to "base-colors":

gantt.exportToExcel({
    visual: "base-colors",     cellColors: true
})

Related sample: Export colors of tasks

Import from Excel

Since there is no way to automatically map arbitrary columns of the Excel document to Gantt data model, the export service converts a document to an array of rows which is returned in JSON. Conversion of the resulting document to the Gantt data is the responsibility of end developers.

In order to convert an Excel file, you need to send the following request to the export service:

Request URL - https://export.dhtmlx.com/gantt
Request Method - POST
Content-Type - multipart/form-data

The request parameters are:

file - an Excel file
type - "excel-parse"
data - (optional) JSON string with settings

For example:

<form action="https://export.dhtmlx.com/gantt" method="POST" 
    enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="hidden" name="type" value="excel-parse">
    <button type="submit">Get</button>
</form>

Alternatively, you can use the client-side API:

gantt.importFromExcel({
    server:"https://export.dhtmlx.com/gantt",
    data: file,
    callback: function(project){
        console.log(project)
    }
});

Related sample: Import Excel file

Where file is an instance of File which should contain an Excel (xlsx) file.

gantt.importFromExcel requires HTML5 File API support.

Response

The response will contain a JSON with an array of objects:

[
   { "Name": "Task Name", "Start": "2018-08-11 10:00", "Duration": 8 },
   ...
]

where:

Values of the first row are used as property names of imported objects.
Each row is serialized as an individual object.
Date values are serialized in the "%Y-%m-%d %H:%i" format.

Import settings

The import service expects the first row of the imported sheet to be a header row containing column names.
By default, the service returns the first sheet of the document. In order to return a different sheet, use the sheet parameter (zero-based)

gantt.importFromExcel({
    server:"https://export.dhtmlx.com/gantt",
    data: file,
    sheet:2, // print third sheet
    callback: function (rows) {}
});

Export to iCal

To export data from the Gantt chart to an iCal string, do the following:

To use the online export service, enable the export_api plugin via the plugins method:

gantt.plugins({
    export_api: true
});

Call the exportToICal method to export data from the Gantt chart:

<input value="Export to iCal" type="button" onclick='gantt.exportToICal()'> 
<script>    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Parameters of the export method

The exportToICal() method takes as a parameter an object with the following properties (optional):

server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/gantt;
name - (string) allows specifying custom name and extension for the file but the file will still be exported in the iCal format.

Calling the export method with optional properties

gantt.exportToICal({
    server:"https://myapp.com/myexport/gantt"
});