Appearance and Styling

The look and feel of the Gantt control can be customized by applying themes and formatting the schedule header.

Schedule Header Customization

Schedule Header Unit Format

You can change the format of schedule headers in various timescale modes by using dayHeaderFormat, hourHeaderFormat, weekHeaderFormat, monthHeaderFormat and yearHeaderFormat properties available in scheduleHeaderSettings property.
And you can change the background of weekends available in timescale by using weekendBackground property, please refer the following code example.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            scheduleHeaderSettings: {
                weekHeaderFormat: "MMM yyyy",
                dayHeaderFormat: "d",
                hourHeaderFormat: "HH",
                monthHeaderFormat: "MMM",
                yearHeaderFormat : "yyyy", 
                weekendBackground: '#F2F2F2'
            }
        });

    The following screenshot shows the customized format schedule header in Gantt control.

    Schedule Header Unit Width

    Schedule header units width value can be customized by using scheduleHeaderSettings.timescaleUnitSize property. The default value of this property was 100%, we can set value for this property from 50% to 500%.
    The following code example shows how to use this properties.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            scheduleHeaderSettings: {
                timescaleUnitSize: "70%",
            }
        });

    The following screenshot shows the output of above code example.

    Schedule header units with 300% width value

    Schedule header units with 70% width value

    You can find the JS playground sample for this properties here.

    Taskbar Customization

    Taskbar Background

    Background color of child taskbars and parent taskbars can be customized by using taskbarBackground and parentTaskbarBackground properties. The following code example shows how to use this properties.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            taskbarBackground: "#1764d7",
            parentTaskbarBackground: "#91dc88",
        });

    The following screenshot shows the customized parent and child taskbars in Gantt.

    You can find the JS playground sample for this properties here.

    Taskbar Height

    Height of child taskbars and parent taskbars can be customized by using taskbarHeight property. The following code example shows how to use the property.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            taskbarHeight: 30,
            rowHeight: 40
        });

    The following screenshot shows the output of above code example.

    You can find the JS playground sample for this properties here.

    NOTE

    taskbarHeight value should be lower than rowHeight property value.

    Progressbar Customization

    Background color of child task’s progress bar and parent task’s progress bar can be customized by using progressbarBackground and parentProgressbarBackground properties. Progress bars height can be changed by using progressbarHeight property. The visibility of progress status label inside the taskbars can be changed by using showProgressStatus property.
    The following code example shows how to use this properties.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            progressbarBackground: "#8c83b1",
            parentProgressbarBackground: "#af2f2f",
            progressbarHeight: 80,
            showProgressStatus: true,
        });

    The following screenshot shows the customized progress bar of parent and child tasks in Gantt.

    You can find the JS playground sample for this properties here.

    NOTE

    progressbarHeight property value should be in 0 to 100, because this value was considered as percentage value of taskbar height value.

    Conditional Formatting

    The Taskbar can be customized based on the task information in Gantt control by using queryTaskbarInfo event. The following code example shows how to customize the Taskbar in Gantt control.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            queryTaskbarInfo: function(args) {
                //queryTaskbarInfo will be triggered when a taskbar is rendered
    
                if (args.data.level === 0) {
                    args.parentTaskbarBackground = "pink";
                    args.parentProgressbarBackground = "cyan";
                } else {
                    if (args.data.status == "60") {
                        args.progressbarBackground = "red";
                    } else if (args.data.status == "70") {
                        args.progressbarBackground = "yellow";
                    } else if (args.data.status == "80") {
                        args.progressbarBackground = "green";
                    }
                }
            }
    
        });

    The following screenshot shows the customized taskbar in Gantt control.

    Dependency line customization

    Width and background color of dependency line in Gantt can be customized by using connectorlineWidth and connectorLineBackground properties. The following code example shows how to use this properties.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            connectorlineWidth :2,
            connectorLineBackground: "#0aecb8",
        });

    The following screenshot shows the customized dependency lines in Gantt.

    You can find the JS playground sample for this properties here.

    Weekend background

    Background color of weekends in Gantt can be changed by using weekendBackground property. The following code example shows how to use this properties.

  • javascript
  • $("#GanttContainer").ejGantt({
            //...
            weekendBackground: "rgba(116, 195, 231, 0.26)",
        });

    The following screenshot shows the customized dependency lines in Gantt.

    You can find the JS playground sample for this properties here.

    Themes

    The following are the types of themes available in Gantt control.

    1.Flat Azure
    2.Flat Azure Dark
    3.Flat Lime
    4.Flat Lime Dark
    5.Flat Saffron
    6.Flat Saffron Dark
    7.Gradient Azure
    8.Gradient Azure Dark
    9.Gradient Lime
    10.Gradient Lime Dark
    11.Gradient Saffron
    12.Gradient Saffron Dark
    13.Bootstrap
    14.High Contrast 01
    15.High Contrast 02
    16.Material
    17.Office-365

    The theme (Gradient lime) can be applied to the Gantt control by using the style sheet from the online link as follows.

  • html
  • <!DOCTYPE html>
    
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <title>Getting Started with Gantt Control for JavaScript</title>
            <!-- style sheet for default theme(gradient lime) -->
            <link href="http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" /> 
            //...
        </html>

    The following screenshot shows the Gantt control with Gradient-lime theme.

    Configuring CSS Class

    In Gantt cssClass property was used to apply different customized styles to multiple Gantt controls available in same page. The following code example shows how to apply different background color for each Gantt control’s toolbar element.

  • html
  • <style>
            .c-class1.e-gantt .e-toolbar {
                background-color: rgba(169, 45, 45, 0.31);
            }
            .c-class2.e-gantt .e-toolbar {
                background-color: rgba(0, 128, 0, 0.2);
            }
        </style>
        <div>
            <div id="GanttContainer"></div>
        </div>
    
        <div>
            <div id="GanttContainer1"></div>
        </div>
        <script>
        $("#GanttContainer").ejGantt({
            //...
            cssClass: "c-class1",
        });
    
         $("#GanttContainer1").ejGantt({
            //...
            cssClass: "c-class2",
        });
        </script>

    The below screenshot shows the output of above code example.

    Customize rows and cells

    While rendering the rows in Grid part of Gantt rowDataBound event and queryCellInfo event will be triggered for each rows and cells. Using this event we can customize the rows and cells. The below code example shows how to customize the cell and row element using this events.

  • javascript
  • $("#GanttContainer").ejGantt({
        //...
        queryCellInfo: function (args) {
            if (args.column.mappingName == "progress") {
                if (args.data.item["progress"] < 80)
                    $(args.cellElement).css("background-color", "rgba(255, 0, 0, 0.12)");
                else
                    $(args.cellElement).css("background-color", "rgba(86, 226, 86, 0.25)");
            } 
        },
        rowDataBound: function (args) {
            if (args.data.item["taskID"] == 5)
                $(args.rowElement).css("background-color", "rgba(251, 255, 0, 0.24)");
        },
    });

    The below screenshot shows the output of above code example.