Fullscreen mode

Enabling the fullscreen mode

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

Example:

import { getData } from "../data";
import { Gantt, Fullscreen } from "@svar-ui/react-gantt";

const data = getData();

export default 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>
  );
}

CSS:

.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. Add the value to the hotkey prop of the Fullscreen component:

Example:

import { getData } from "../data";
import { Gantt, Fullscreen } from "@svar-ui/react-gantt";

const data = getData();

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