Overview

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.

How to integrate the Angular Gantt chart into a page with full-screen layout

angular gantt chart full screen layout parent 100 pct

You can control the height and vertical scrollbar of the Angular Gantt chart component using the heightSpec property. Here are the most common settings:

  • The default value of the heightSpec property of the Gantt chart component is "Max". In this mode, the Gantt chart height will grow automatically according to the content until it reaches the height value.

  • If you use the "Auto" value, the height will grow automatically without limitations. This mode doesn’t allow fixing the Gantt chart header and the whole Gantt chart component will scroll with the page.

In this tutorial, you will see how to use the "Parent100Pct" and "Max100Pct" modes to integrate the Gantt chart into a full-screen page layout.

If you use heightSpec: "Parent100Pct" the Gantt chart will automatically adjust its height to fill the available space. The available space must be predefined by setting fixed dimensions for the parent <div> element.

We will start with the following HTML template:

<div class="fullscreen">
    <daypilot-gantt [config]="config" #gantt></daypilot-gantt>
</div>

You need to use CSS to fix the position of the parent element (with the "fullscreen" CSS class) so that it won’t scroll with the page. Set the position value to absolute and define the position using left, top, right, bottom styles (we use 0px but you can adjust it as needed to make space for other elements).

.fullscreen {
  position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
}

Now enable the "Parent100Pct" mode in the Angular Gantt chart configuration:

config: DayPilot.GanttConfig = {
  heightSpec: "Parent100Pct",
  // ...
};

These settings will extend the Gantt chart height to cover full browser viewport. The horizontal scrollbar will be displayed at the bottom of the page (even in case that the Gantt chart displays only a few rows).

How to auto-grow the Gantt chart height until 100% of the parent is reached

angular gantt chart full screen layout max 100 pct

The "Max100Pct" mode behaves like the "Auto" mode until the height reaches the parent height.

config: DayPilot.GanttConfig = {
  heightSpec: "Parent100Pct",
  // ...
};

In this case the horizontal scrollbar will be displayed right below the last Gantt chart row.

How to hide the Gantt chart borders in the full screen mode to make integration easier

The default CSS theme includes a border around the whole Gantt chart component. In the full-screen mode, this is not always desirable. The Gantt chart component includes a special property (hideBorderFor100PctHeight) that lets you hide the border easily. Another option is to create a custom theme without the border specified.

config: DayPilot.GanttConfig = {
  heightSpec: "Parent100Pct",
  hideBorderFor100PctHeight: true,
  // ...
};

For the Max100Pct mode, you may want to add a bottom border. The following example adds the border using a special div which gets hidden if the Gantt chart reaches the full height:

angular gantt chart full screen layout max bottom border

HTML template

<div class="fullscreen">
    <daypilot-gantt [config]="config" #gantt></daypilot-gantt>
    <div class="main-bottom"></div>
</div>

Styles:

.fullscreen {
  position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: hidden;
}
.main-bottom {
  border-top: 1px solid #ccc;
}