Full Screen Mode

Starting from the version 3.3, the library includes the fullscreen 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 activate the fullscreen support, enable the fullscreen plugin via the gantt.plugins method:

gantt.plugins({
    fullscreen: true
});

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:

• onBeforeExpand
• onBeforeCollapse
• onExpand
• onCollapse

// 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();

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

Why full screen mode doesn't work?

The fullscreen extension can work only if you don't forbid Gantt to expand to the fullscreen mode.

In cases when the gantt is placed into a frame where:

• the allowfullscreen property or the allow="fullscreen" is absent
• or the "fullscreen" value is not specified for the allow property

the gantt won't be able to expand to the fullscreen mode (try it in our snippet tool (Example 1, Example 2)).

Full screen mode in Salesforce

The Fullscreen extension doesn't work in Salesforce applications that use Locker Service, since Locker blocks the ability to switch the element to the full screen mode.

More specifically, the Fullscreen extension won't work with Lightning Aura framework and with Lightning Web Components but may work with Visualforce framework.

You can check the availability of the fullscreen in your app by adding the following code snippet to the configuration code:

console.log("document.body.requestFullscreen", document.body.requestFullscreen)

If you see the undefined value in the output, it means the feature is disabled and there is no possibility to expand Gantt.

Back to top