Full Screen Mode

Starting from the version 3.3, the library includes the ext/dhtmlxgantt_fullscreen.js extension.

This extension provides an API that expands the component to the fullscreen mode, by using FullScreen API whenever possible (the list of supported browsers).

For older browsers it simply allows extending Gantt to 100% of window size.

To enable fullscreen support, include the dhtmlxgantt_fullscreen.js extension on the page:

<script src="../codebase/ext/dhtmlxgantt_fullscreen.js"></script>

The component itself doesn't have a UI control that toggles this mode, you need to add it somewhere to your page or copy the one from example:

<input id="fullscreen_button" type="button" value="Toggle Fullscreen"/>
 
<script>
var button = document.getElementById("fullscreen_button");
    button.addEventListener("click", function(){
        if (!gantt.getState().fullscreen) {
            // expanding the gantt to full screen
            gantt.expand();
        }
        else {
            // collapsing the gantt to the normal mode
            gantt.collapse();
        }
    }, false);
</script>

A click on the ready icon will change the gantt's size from original to 'full screen' and vice versa.

Related sample:  Full Screen

API overview

There are two methods that are used to manipulate the gantt's display mode:

  • expand - expands gantt to the full screen mode
gantt.expand();
  • collapse - collapses gantt from the full screen mode to the normal mode
gantt.collapse();

The list of events

The supported events are enumerated below:

// before gantt is expanded to full screen
gantt.attachEvent("onBeforeExpand",function(){
    // any custom logic here    
    return true;
});
 
// before gantt exits the fullscreen mode
gantt.attachEvent("onBeforeCollapse",function(){
    // any custom logic here    
    return true;
});
 
// when gantt is expended to full screen
gantt.attachEvent("onExpand", function (){
    // any custom logic here
});
 
// when gantt exited the full screen mode
gantt.attachEvent("onCollapse", function (){
    // any custom logic here
});

Fullscreen API

There are four methods of the fullscreen object that are used to manipulate the gantt's display mode together with additional elements:

  • expand() - expands gantt to the full screen mode
gantt.ext.fullscreen.expand();
  • collapse() - collapses gantt from the fullscreen mode to the normal mode
gantt.ext.fullscreen.collapse();
  • toggle() - calls the collapse() method if gantt is expanded to full screen, and the expand() method otherwise
gantt.ext.fullscreen.toggle();
  • getFullscreenElement() - returns a DOM element that will be expanded to full screen by the expand() method.
gantt.ext.fullscreen.getFullscreenElement();

By default the getFullscreenElement() method returns an HTML container of the Gantt chart. You can redefine this method to extend the gannt with additional elements to the fullscreen mode.

Gantt with the header/toolbar in the Fullscreen

Gantt API provides a possibility to extend the gantt to the fullscreen mode via the getFullscreenElement() method of the fullscreen object:

gantt.ext.fullscreen.getFullscreenElement();

By default this method returns an HTML container of the Gantt chart. It means that only Gantt will be expanded to full screen.

In case you want to display the gantt with additional elements (such as a header or toolbar) in the full screen, you need to add a custom container on the page, as in:

<div id="myCover">
    <div class="gantt_control">
        <button id="toggle_fullscreen" 
                onclick="gantt.ext.fullscreen.toggle();">toggle fullscreen</button>
    </div>
        <div id="gantt_here"></div>
</div>

After that you have to redefine the getFullscreenElement() method to return a custom root node that will be expanded to full screen:

gantt.ext.fullscreen.getFullscreenElement = function() {
    return document.getElementById("myCover");
}
gantt.init("gantt_here");

Related sample:  Full Screen with additional elements

Back to top