v2.3.1

demos/cases/GanttDurationUnitHour.jsx

@@ -0,0 +1,63 @@
+import { useMemo, useState, useCallback } from 'react';
+import {
+  Gantt,
+  ContextMenu,
+  Editor,
+  defaultEditorItems,
+  defaultColumns,
+} from '../../src';
+import { format } from 'date-fns';
+import { getData } from '../data';
+
+export default function GanttDurationUnitHour({ skinSettings }) {
+  const { tasks, links, scales } = useMemo(() => getData('hour'), []);
+
+  const [api, setApi] = useState(null);
+
+  const items = useMemo(
+    () =>
+      defaultEditorItems.map((ed) => ({
+        ...ed,
+        ...(ed.comp === 'date' && { config: { time: true } }),
+      })),
+    [],
+  );
+
+  const columns = useMemo(
+    () =>
+      defaultColumns.map((col) => ({
+        ...col,
+        ...(col.id === 'start' && {
+          template: (d) => format(d, 'MMM d, HH:mm'),
+          width: 120,
+        }),
+      })),
+    [],
+  );
+
+  const highlightTime = useCallback((date, unit) => {
+    const h = date.getHours();
+    if ((unit === 'hour' && h < 8) || h > 21) return 'wx-weekend';
+    return '';
+  }, []);
+
+  return (
+    <>
+      <ContextMenu api={api}>
+        <Gantt
+          init={setApi}
+          {...(skinSettings || {})}
+          tasks={tasks}
+          links={links}
+          columns={columns}
+          scales={scales}
+          cellWidth={40}
+          durationUnit="hour"
+          lengthUnit="minute"
+          highlightTime={highlightTime}
+        />
+      </ContextMenu>
+      {api && <Editor api={api} items={items} />}
+    </>
+  );
+}