Verwendung der DHTMLX Gantt-Eigenschaften in ReactGantt

Diese Seite beschreibt die von React Gantt akzeptierten Props und wie sie auf DHTMLX Gantt-Funktionen abgebildet werden.

Verfügbare Props

Eigenschaft	Typ	Beschreibung
tasks	Task[]	Ein Array von Task-Objekten.
links	Link[]	Ein Array von Link-Objekten.
templates	GanttTemplates	Überschreibt gantt.templates, z. B.: task_text, task_class, scale_cell_class.
config	GanttConfig	In gantt.config zusammengeführt, z. B.: scales_config, columns_config, autosize_config.
calendars	Calendar[]	Ein Array von Arbeitskalendern. Beispiel: Arbeitskalender.
resources	Resource[]	Ein Array von Resource-Objekten.
baselines	Baseline[]	Ein Array von Baseline-Objekten.
markers	Marker[]	Ein Array von Marker-Objekten für Timeline-Markierungen.
plugins	GanttPlugins	Gantt-Erweiterungen, die aktiviert werden müssen (z. B.: critical_path, auto_scheduling).
data	( load?: string, save?: string|RouterFunction, batchSave?: BatchChanges)	Erlaubt das Laden von Daten über den integrierten Gantt-Transport und bietet Callback-Funktionen für Änderungen an den Gantt-Daten.
locale	string	Legt gantt.i18n.setLocale(locale) fest. Standardmäßig ist es "en".
theme	string	Anwendet gantt.setSkin(theme). Standardmäßig ist es "terrace".
customLightbox	ReactElement | null	Eine React-Komponente, die das integrierte Lightbox ersetzt (siehe Custom Lightbox.)
inlineEditors	( [editorType: string]: React.ComponentType )	Ermöglicht die Zuordnung Ihrer React-basierten Inline-Editoren zur DHTMLX-Inline-Editor-Schnittstelle.
groupTasks	GroupConfig | boolean | null	Gruppierungskonfigurationsobjekt oder false/null zum Deaktivieren der Gruppierung (siehe Grouping Tasks .).
filter	((task: Task) => boolean) | null	Eine Funktion, die verwendet wird, um Gantt-Aufgaben zu filtern.
resourceFilter	((resource: Resource) => boolean) | null	Eine Funktion, die verwendet wird, um Ressourcen für das Resource Panel. zu filtern.
modals	GanttModals	Ermöglicht das Ersetzen der Modals onBeforeTaskDelete und onBeforeLinkDelete durch benutzerdefinierte Komponenten.
(Event Props)	Funktion	Der Wrapper unterstützt außerdem das Übergeben von Event-Handler-Props, die DHTMLX Gantt-Ereignissen entsprechen. Zum Beispiel onTaskClick, onAfterTaskAdd usw. Wenn der Prop-Name dem Ereignisnamen entspricht, wird es automatisch angehängt.

Beispielverwendung

<ReactGantt
  tasks={tasks}
  links={links}
  theme="material"
  locale="en"
  config={{
    scales: [
      { unit: "year", step: 1, format: "%Y" },
      { unit: "month", step: 1, format: "%M" }
    ],
    columns: [
      { name: "text", tree: true, width: '*' },
      { name: "start_date", align: "center" },
      { name: "duration", align: "center" },
      { name: "add" }
    ],
    // any other gantt.config you want
  }}
  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}
  templates={{
    task_text: (start, end, task) => `#${task.id}: ${task.text}`,
  }}
/>

Verwendung von Event-Props

Sie können jedes DHTMLX Gantt-Ereignis auch als Prop übergeben. Zum Beispiel:

<ReactGantt

  onTaskClick={(id, e) => {
    console.log('Task clicked:', id);
    return true; 
  }}/>

Internally, the wrapper calls gantt.attachEvent("onBeforeTaskAdd", handler) if you pass a prop named onBeforeTaskAdd. For a full event list, see DHTMLX Gantt API.

Kombination von Props und der DHTMLX API

Die Bibliothek @dhx/react-gantt ist darauf ausgelegt, so deklariert wie möglich zu sein – die meisten Anwendungsfälle lassen sich über die Standard-Props abdecken (wie tasks, links, resources, templates usw.). Dennoch kann es Szenarien geben, in denen Sie tieferen Zugriff auf die Gantt-Engine benötigen. Zum Beispiel für:

• Arbeitszeitberechnungen
• Automatische Terminplanung
• Logik oder fortgeschrittene Funktionen wie Ressourcenberechnungen

In diesen Fällen können Sie zwei zusätzliche Ansätze verwenden, um die zugrunde liegende DHTMLX Gantt-Funktionalität anzuzapfen:

• React-Hooks speziell von dem Wrapper bereitgestellte Brückenhooks, um die Datenspeicher und Planungslogik von Gantt zu verbinden

• Direkter Zugriff auf die Gantt-Instanz über eine \ref, falls die integrierten Hooks nicht alle Ihre Bedürfnisse abdecken

Verwendung integrierter Hooks

Die Bibliothek @dhx/react-gantt stellt eine Reihe optionaler Hooks bereit, die React-Komponenten mit den internen Gantt-APIs verbinden. Diese Hooks bieten eine „Brücke“ zu den zugrunde liegenden Methoden und Daten speichern von Gantt. Sie können diese Hooks direkt in Ihren Komponenten verwenden oder zu eigenen, benutzerdefinierten Hooks kombinieren, um spezialisierte Features wie Ressourcen-Histogramme zu realisieren.

useGanttDatastore<T>(ganttRef, storeName)

Der useGanttDatastore-Hook gewährt Lesezugriff auf einen bestimmten Gantt-Datenspeicher. Häufig wird auf den Ressourcen-Datenspeicher, Baseline oder jeden anderen eingebauten oder benutzerdefinierten Speichertypen zugegriffen.

Er bietet die folgenden Funktionen:

• getItem(id) - gibt ein bestimmtes Element aus dem Datenspeicher zurück

• getItems() - gibt alle Elemente im angegebenen Datenspeicher zurück

• hasChild(id: string | number) - prüft, ob ein Element Kinder hat

• getChildren(id: string | number) - ruft Kind-Elemente ab

import { useMemo } from 'react';
import { useGanttDatastore } from '@dhx/react-gantt';

function MyResourceList({ ganttRef }) {
  const resourceStore = useGanttDatastore(ganttRef, 'resource');

  const resourceIds = resourceStore.getItems().map(item => item.id);

  // zur Demonstration einfach Daten protokollieren
  useMemo(() => {
    console.log('Resource IDs:', resourceIds);
  }, [resourceIds]);

  return null; 
}

Du kannst diesen Hook verwenden, wann immer du direkte Low-Level-Daten aus einem bestimmten Datenspeicher benötigst. Zum Beispiel, um zu prüfen, ob eine Ressource eine Gruppe ist oder eine Einzelressource.

useResourceAssignments(ganttRef)

Der useResourceAssignments-Hook stellt Gantts ressourcenbezogene Methoden bereit, z. B. das Abrufen von Zuordnungen für eine Ressource oder das Auflisten, welche Ressourcen einem bestimmten Task zugewiesen sind.

Es bietet die folgenden Funktionen:

• getResourceAssignments(resourceId, taskId?) - Brücke zu
• getTaskResources(taskId) - Brücke zu

import React from 'react';
import { useResourceAssignments } from '@dhx/react-gantt';

export function ResourceUsage({ ganttRef, taskId }) {
  const { getTaskResources } = useResourceAssignments(ganttRef);

  const resources = getTaskResources(taskId);
  return (
    <div>
      Task {taskId} assigned to: 
      {resources.map(r => r.text).join(', ')}
    </div>
  );
}

Sie benötigen diesen Hook möglicherweise für benutzerdefinierte Logik rund um die Ressourcennutzung, z. B. Berechnung von zugewiesenen Stunden oder Gruppierung von Aufgaben nach Eigentümer.

useWorkTime(ganttRef)

Stellt eine direkte Brücke zu eingebauten DHTMLX Gantt-Arbeitszeit-Funktionen bereit, wie , , .

Sie benötigen diesen Hook, um die Arbeits-/Nicht-Arbeitszeit gemäß den Gantt-Arbeitskalender-Einstellungen hervorzuheben, sowie für Datumsoperationen im Einklang mit Arbeitskalendern.

Er bietet die folgenden Funktionen:

• isWorkTime({ date:Date, unit?: string, task?:Task }) - Brücke zu
• calculateEndDate({start:Date, duration:number, unit?: string, task?: Task}) - Brücke zu
• calculateDuration({start:Date, end:Date, task?: Task}) - Brücke zu
• getClosestWorkTime({ date:Date, unit?: string, task?: Task, dir?: "past"|"future" }) - Brücke zu

import { useEffect, useRef, useState } from 'react';
import ReactGantt, {GanttTemplates, useWorkTime} from "@dhx/react-gantt";
import "@dhx/react-gantt/dist/react-gantt.css";

export default function GanttTemplatesDemo() {
  const ganttRef = useRef<ReactGanttRef>(null);

  const { isWorkTime }= useWorkTime(ganttRef);
  ...
  const templates: GanttTemplates = {
    timeline_cell_class: (task: Task, date: Date) => {
      return isWorkTime({date, task}) ? "" : "weekend";
    }
  };
  ...

Komposition von Hooks in eigene, benutzerdefinierte Hooks

Eine gute Praxis besteht darin, eigene domänen- oder projektbezogene Hooks mithilfe dieser grundlegenden Bridging-Hooks zu erstellen. Zum Beispiel, wenn du ein Ressourcen-Histogramm erstellen möchtest, könntest du einen eigenen Hook erstellen, der Kapazitätswerte cacht, Ressourcennutzung summiert usw.:

import { useMemo } from 'react';
import { useGanttDatastore, useResourceAssignments } from '@dhx/react-gantt';

export function useResourceHistogram(ganttRef) {
  const resourceStore = useGanttDatastore(ganttRef, 'resource');
  const { getResourceAssignments } = useResourceAssignments(ganttRef);

  // Benutzerdefinierte Logik: Kapazität-Caching, Gruppenerkennung, etc.
  // ...
  return {
    // z. B. getCapacity, getAllocatedValue
  };
}

Direkter Zugriff auf die Gantt-Instanz per ref

Obwohl diese Hooks die meisten fortgeschrittenen Bedürfnisse abdecken, möchtest du möglicherweise den direkten Zugriff auf die gesamte Gantt-Instanz behalten. Dafür bleibt der Ref-Ansatz verfügbar:

import React, { useRef, useEffect } from 'react';
import ReactGantt, { ReactGanttRef } from '@dhx/react-gantt';

export function DirectRefExample({ tasks, links }) {
  const ganttRef = useRef<ReactGanttRef>(null);

  useEffect(() => {
    const gantt = ganttRef.current?.instance;
    if (!gantt) return;

    // hier kannst du JEDE Gantt-API-Methode aufrufen
    console.log('All tasks:', gantt.getTaskByTime());
    gantt.showDate(new Date());
  }, []);

  return (
    <ReactGantt
      ref={ganttRef}
      tasks={tasks}
      links={links}
    />
  );
}

Hinweis

info Beachten Sie, dass wenn Sie Aufgaben/Links in der direkten Gantt-Instanz ändern, während Sie sie gleichzeitig als React-Props übergeben, Sie sie synchron halten oder die Daten erneut parsen sollten. Andernfalls könnte das nächste React-Re-Rendern Ihre manuellen Änderungen überschreiben.

Wenn du etwas tun möchtest, das durch eine Prop nicht abgedeckt wird, kannst du dennoch Gantt-Methoden direkt aufrufen. Siehe Accessing the Underlying Gantt API für weitere Details.