Fullscreen mode

Enabling the fullscreen mode

To enable the fullscreen mode, import the Fullscreen component and wrap the Gantt tag into the Fullscreen tag.

Example:

import React from 'react';
import { getData } from "../data";
import { Gantt, Fullscreen } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

function Demo() {
  return (
    <div className="demo">
      <h4>Click the "expand" icon</h4>
      <div className="gtcell">
        <Fullscreen>
          <Gantt tasks={data.tasks} links={data.links} />
        </Fullscreen>
      </div>
    </div>
  );
}

export default Demo;

.demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.gtcell {
  overflow: hidden;
  border: var(--wx-gantt-border);
}

Assigning hotkeys

You can also assign hotkeys for enabling the fullscreen mode. You need to add the value to the hotkey property of the Fullscreen tag:

Example:

import { getData } from "../data";
import { Gantt, Fullscreen } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const data = getData();

function App() {
    return (
        <Fullscreen hotkey="ctrl+f">
            <Gantt tasks={data.tasks} links={data.links} />
        </Fullscreen>
    );
}

export default App;