feat: gantt block (#1393)

* feat: add Gantt block

* feat:  gantt block congiure action

* feat:  gantt block congiure fields

* feat:  gantt block congiure fields

* feat:  gantt block congiure fields

* feat:  gantt block code improve

* feat:  gantt block code improve

* feat:  gantt block code improve

* feat:  gantt block time range

* feat:  gantt block date change

* feat:  gantt block progress change

* feat:  gantt block columnWidth fix

* feat:  gantt block action configure

* feat: gant block init fix

* feat: gant block table configure

* feat: gant block table configure

* feat: gant block table configure

* feat: gant expend when table expend

* feat: modulecss ->less

* feat: style improve

* feat: style module -> emotion css

* feat: gantt process handle

* feat: gantt block empty state placeholder

* feat: table actions suport config

* feat: gantt block suprt  time range change

* feat: gantt block suprt process update

* feat: gantt block suprt process update

* feat: gantt block suprt process update

* feat: gantt block suprt process update

* feat: gantt block configure actions

* feat: gantt block style improve

* feat: gantt table actions column is configured by default

* feat: gantt block surport bulk update

* feat: gantt block surport bulk update&bulk edit

* feat: gantt block action configure fix

* feat: gant block code improve

* feat: do not display  gantt bar when the start date is empty

* feat: gant configure actions

* feat: gant task change

* feat: gant calendar style improve

* style: gant local

* style: gant grid style improve

* style: gant calendar style improve

* style: gant style improve

* refactor: gant bar suport click

* feat: adjacency list

* fix: error

* feat: collection extender

* Revert "feat: collection extender"

This reverts commit a942eee7699724fe831a98bae3f67a42db91a28b.

* fix: registerBuiltInListeners

* chore: getAllNodeIds

# Conflicts:
#	packages/plugins/acl/src/server.ts

* fix: get list data tree ids

# Conflicts:
#	packages/plugins/acl/src/__tests__/list-action.test.ts

* feat: suport add child

* feat: demo3

* feat: suport add child

* feat: support add child

* feat: support add child

* fix: tree true

* feat: suport expend and collapse

* feat: support expend and collapse

* feat: support expend and collapse

* feat:  table block of the selector supports tree table

* feat: expand and collapse are only displayed in the tree table

* fix: when the tree table is closed and opened, it needs to be refreshed to take effect

* fix: test

* refactor: add child is hidden when the tree table is closed

* refactor: tree table filter the children field

* refactor: tree table filter the children field

* refactor: tree table filter the children field

* refactor: expand and collapse button does not support modify name and icon

* refactor: parent cannot be modified when adding child

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: expand and collapse button hide when treetable is closed

* refactor: filter out the node itself when selecting parent

* refactor: filter out the node itself when selecting parent

* refactor:  tree collection locale

* refactor:  tree collection locale

* feat: gantt block support tree collection

* fix: parameter exception when creating data selector

* feat: gantt block support tree collection

* feat: gantt block support tree collection

* fix: tableActionColumnInitializers

* style: style improve

* fix: gantt  expansion exception

* style: style improve

* style: style improve

* style: calendar style improve

* style: style improve

* style: code  improve

* refactor: gantt chart also highlights when table rows are selected

* fix: time scale default value

* fix: end field is nor requried to set

* fix:  detailed blocks not appear when child record is clicked

* fix:  detailed blocks not appear when child record is clicked

* refactor: gantt default  expand all

* feat: gantt adapt to compact themes

* feat: gantt adapt to compact themes

* refactor: style improve

* refactor: style improve

* refactor: style improve

* refactor: style improve

* refactor: style improve

* refactor: style improve

* refactor: style improve

* refactor: sort by start date

* refactor: style improve

* refactor: style improve

* fix: styling

* fix: font-family

* fix: font-weight: 400

* feat: custom color

* fix: styling

* fix: style

* refactor: style improve

* refactor: style improve

---------

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/block-provider/BlockSchemaComponentProvider.tsx

@@ -5,17 +5,19 @@ import { CalendarBlockProvider, useCalendarBlockProps } from './CalendarBlockPro
 import { DetailsBlockProvider, useDetailsBlockProps } from './DetailsBlockProvider';
 import { FilterFormBlockProvider } from './FilterFormBlockProvider';
 import { FormBlockProvider, useFormBlockProps } from './FormBlockProvider';
-import { FormFieldProvider, useFormFieldProps } from './FormFieldProvider';
 import * as bp from './hooks';
 import { KanbanBlockProvider, useKanbanBlockProps } from './KanbanBlockProvider';
 import { TableBlockProvider, useTableBlockProps } from './TableBlockProvider';
 import { TableFieldProvider, useTableFieldProps } from './TableFieldProvider';
 import { TableSelectorProvider, useTableSelectorProps } from './TableSelectorProvider';
+import { FormFieldProvider, useFormFieldProps } from './FormFieldProvider';
+import { GanttBlockProvider, useGanttBlockProps } from './GanttBlockProvider';
 
 export const BlockSchemaComponentProvider: React.FC = (props) => {
   return (
     <SchemaComponentOptions
       components={{
+        GanttBlockProvider,
         CalendarBlockProvider,
         TableFieldProvider,
         TableBlockProvider,
@@ -40,6 +42,7 @@ export const BlockSchemaComponentProvider: React.FC = (props) => {
         useTableBlockProps,
         useTableSelectorProps,
         useKanbanBlockProps,
+        useGanttBlockProps,
       }}
     >
       {props.children}

packages/core/client/src/block-provider/GanttBlockProvider.tsx

@@ -0,0 +1,108 @@
+import { useField } from '@formily/react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { BlockProvider, useBlockRequestContext } from './BlockProvider';
+import { TableBlockProvider } from './TableBlockProvider';
+
+export const GanttBlockContext = createContext<any>({});
+
+const formatData = (
+  data = [],
+  fieldNames,
+  tasks: any[] = [],
+  projectId: any = undefined,
+  hideChildren: boolean = false,
+) => {
+  data.forEach((item: any) => {
+    if (item.children && item.children.length) {
+      tasks.push({
+        start: new Date(item[fieldNames.start]),
+        end: new Date(item[fieldNames.end]),
+        name: item[fieldNames.title],
+        id: item.id + '',
+        type: 'project',
+        progress: item[fieldNames.progress] * 100 || 0,
+        hideChildren: hideChildren,
+        project: projectId,
+        color: item.color,
+      });
+      formatData(item.children, fieldNames, tasks, item.id + '', hideChildren);
+    } else {
+      tasks.push({
+        start: item[fieldNames.start] ? new Date(item[fieldNames.start]) : undefined,
+        end: new Date(item[fieldNames.end] || item[fieldNames.start]),
+        name: item[fieldNames.title],
+        id: item.id + '',
+        type: fieldNames.end ? 'task' : 'milestone',
+        progress: item[fieldNames.progress] * 100 || 0,
+        project: projectId,
+        color: item.color,
+      });
+    }
+  });
+  return tasks;
+};
+const InternalGanttBlockProvider = (props) => {
+  const { fieldNames, timeRange, resource } = props;
+  const field = useField();
+  const { service } = useBlockRequestContext();
+  // if (service.loading) {
+  //   return <Spin />;
+  // }
+  return (
+    <GanttBlockContext.Provider
+      value={{
+        field,
+        service,
+        resource,
+        fieldNames,
+        timeRange,
+      }}
+    >
+      {props.children}
+    </GanttBlockContext.Provider>
+  );
+};
+
+export const GanttBlockProvider = (props) => {
+  return (
+    <BlockProvider {...props} params={{ tree:true, paginate: false, sort: props.fieldNames.start }}>
+      <TableBlockProvider {...props} params={{ tree:true, paginate: false, sort: props.fieldNames.start }}>
+        <InternalGanttBlockProvider {...props} />
+      </TableBlockProvider>
+    </BlockProvider>
+  );
+};
+
+export const useGanttBlockContext = () => {
+  return useContext(GanttBlockContext);
+};
+
+export const useGanttBlockProps = () => {
+  const ctx = useGanttBlockContext();
+  const [tasks, setTasks] = useState<any>([]);
+  const onExpanderClick = (task: any) => {
+    const data = ctx.field.data;
+    const tasksData = data.map((t: any) => (t.id === task.id ? task : t));
+    setTasks(tasksData);
+    ctx.field.data = tasksData;
+  };
+  const expandAndCollapseAll = (flag) => {
+    const data = formatData(ctx.service.data?.data, ctx.fieldNames, [], undefined, flag);
+    setTasks(data);
+    ctx.field.data = data;
+  };
+  useEffect(() => {
+    if (!ctx?.service?.loading) {
+      const data = formatData(ctx.service.data?.data, ctx.fieldNames);
+      setTasks(data);
+      ctx.field.data = data;
+    }
+  }, [ctx?.service?.loading]);
+  return {
+    fieldNames: ctx.fieldNames,
+    timeRange: ctx.timeRange,
+    onExpanderClick,
+    expandAndCollapseAll,
+    tasks,
+  };
+};

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const InternalTableBlockProvider = (props: Props) => {
   const { params, showIndex, dragSort, rowKey, childrenColumnName } = props;
-  const field = useField();
+  const field: any = useField();
   const { resource, service } = useBlockRequestContext();
   const [expandFlag, setExpandFlag] = useState(false);
   return (
@@ -66,6 +66,9 @@ export const useAssociationNames = (collection) => {
     if (schema['x-component'] === 'TableV2') {
       return schema;
     }
+    if (schema['x-component'] === 'Gantt') {
+      return schema.properties?.table;
+    }
     return buf;
   }, new Schema({}));
   return uniq(
@@ -174,6 +177,7 @@ export const useTableBlockProps = () => {
       console.log(selectedRowKeys);
       ctx.field.data = ctx?.field?.data || {};
       ctx.field.data.selectedRowKeys = selectedRowKeys;
+      ctx?.field?.onRowSelect?.(selectedRowKeys);
     },
     async onRowDragEnd({ from, to }) {
       await ctx.resource.move({
@@ -244,5 +248,8 @@ export const useTableBlockProps = () => {
       // 更新表格的选中状态
       setSelectedRow((prev) => (prev?.includes(record[ctx.rowKey]) ? [] : [...value]));
     },
+    onExpand(expanded, record) {
+      ctx?.field.onExpandClick?.(expanded, record);
+    },
   };
 };

packages/core/client/src/block-provider/hooks/index.ts

@@ -775,6 +775,8 @@ export const useRefreshActionProps = () => {
   };
 };
 
+
+
 export const useDetailsPaginationProps = () => {
   const ctx = useDetailsBlockContext();
   const count = ctx.service?.data?.meta?.count || 0;

packages/core/client/src/block-provider/index.tsx

@@ -3,10 +3,11 @@ export * from './BlockSchemaComponentProvider';
 export * from './CalendarBlockProvider';
 export * from './FilterFormBlockProvider';
 export * from './FormBlockProvider';
-export * from './FormFieldProvider';
 export * from './KanbanBlockProvider';
 export * from './SharedFilterProvider';
 export * from './TableBlockProvider';
 export * from './TableFieldProvider';
 export * from './TableSelectorProvider';
-
+export * from './FormFieldProvider';
+export * from './GanttBlockProvider'
+export * from './SharedFilterProvider';

packages/core/client/src/locale/en_US.ts

@@ -112,6 +112,15 @@ export default {
   "Delete this event?": "Delete this event?",
   "Delete Event": "Delete Event",
   "Kanban": "Kanban",
+  "Gantt":"Gantt",
+  "Create gantt block":"Create gantt block",
+  "Progress field":"Progress field",
+  "Time scale":"Time scale",
+  "Hour":"Hour",
+  "Quarter of day":"Quarter of day",
+  "Half of day":"Half of day",
+  "Year":"Year",
+  "QuarterYear":"QuarterYear",
   "Select grouping field": "Select grouping field",
   "Media": "Media",
   "Markdown": "Markdown",

packages/core/client/src/locale/ja_JP.ts

@@ -109,6 +109,15 @@ export default {
   "Select data source": "データソースを選択",
   "Calendar": "カレンダー",
   "Kanban": "かんばん",
+  "Gantt":"ガント図",
+  "Create gantt block":"ガントチャートブロックの作成",
+  "Progress field":"進捗フィールド",
+  "Time scale":"時間スケールレベル",
+  "Hour":"時間",
+  "Quarter of day":"四分の一日",
+  "Half of day":"半日",
+  "Year":"年",
+  "QuarterYear":"四半期",
   "Select grouping field": "グループフィールドを選択してください",
   "Media": "メディア",
   "Markdown": "マークダウン",

packages/core/client/src/locale/zh_CN.ts

@@ -125,6 +125,15 @@ export default {
   'Delete this event?': '是否删除这个日程？',
   'Delete Event': '删除日程',
   "Kanban": "看板",
+  "Gantt":"甘特图",
+  "Create gantt block":"创建甘特图区块",
+  "Progress field":"进度字段",
+  "Time scale":"时间缩放等级",
+  "Hour":"小时",
+  "Quarter of day":"四分之一天",
+  "Half of day":"半天",
+  "Year":"年",
+  "QuarterYear":"季度",
   "Select grouping field": "选择分组字段",
   "Media": "多媒体",
   "Markdown": "Markdown",

packages/core/client/src/schema-component/antd/gantt/Gantt.Designer.tsx

@@ -0,0 +1,196 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCompile, useDesignable } from '../..';
+import { useGanttBlockContext } from '../../../block-provider';
+import { useCollection } from '../../../collection-manager';
+import { useCollectionFilterOptions } from '../../../collection-manager/action-hooks';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+import { useSchemaTemplate } from '../../../schema-templates';
+
+const useOptions = (type = 'string') => {
+  const compile = useCompile();
+  const { fields } = useCollection();
+  const options = fields
+    ?.filter((field) => field.type === type)
+    ?.map((field) => {
+      return {
+        value: field.name,
+        label: compile(field?.uiSchema?.title),
+      };
+    });
+  return options;
+};
+
+export const GanttDesigner = () => {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { name, title, fields } = useCollection();
+  const dataSource = useCollectionFilterOptions(name);
+  const { service } = useGanttBlockContext();
+  const { dn } = useDesignable();
+  const compile = useCompile();
+  const { t } = useTranslation();
+  const template = useSchemaTemplate();
+  const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
+  const fieldNames = fieldSchema?.['x-decorator-props']?.['fieldNames'] || {};
+  const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
+  return (
+    <GeneralSchemaDesigner template={template} title={title || name}>
+      <SchemaSettings.BlockTitleItem />
+      <SchemaSettings.SelectItem
+        title={t('Title field')}
+        value={fieldNames.title}
+        options={useOptions('string')}
+        onChange={(title) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['title'] = title;
+          field.decoratorProps.params = fieldNames;
+          fieldSchema['x-decorator-props']['params'] = fieldNames;
+          // Select切换option后value未按照预期切换，固增加以下代码
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.SelectItem
+        title={t('Time scale')}
+        value={fieldNames.range||'day'}
+        options={[
+          { label: compile('{{t("Hour")}}'), value: 'hour', color: 'orange' },
+          { label: compile('{{t("Quarter of day")}}'), value: 'quarterDay', color: 'default' },
+          { label: compile('{{t("Half of day")}}'), value: 'halfDay', color: 'blue' },
+          { label: compile('{{t("Day")}}'), value: 'day', color: 'yellow' },
+          { label: compile('{{t("Week")}}'), value: 'week', color: 'pule' },
+          { label: compile('{{t("Month")}}'), value: 'month', color: 'green' },
+          { label: compile('{{t("QuarterYear")}}'), value: 'quarterYear', color: 'red' },
+          { label: compile('{{t("Year")}}'), value: 'year', color: 'green' },
+        ]}
+        onChange={(range) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['range'] = range;
+          field.decoratorProps.params = fieldNames;
+          fieldSchema['x-decorator-props']['params'] = fieldNames;
+          // Select切换option后value未按照预期切换，固增加以下代码
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.SelectItem
+        title={t('Start date field')}
+        value={fieldNames.start}
+        options={useOptions('date')}
+        onChange={(start) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['start'] = start;
+          field.decoratorProps.fieldNames = fieldNames;
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.SelectItem
+        title={t('End date field')}
+        value={fieldNames.end}
+        options={useOptions('date')}
+        onChange={(end) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['end'] = end;
+          field.decoratorProps.fieldNames = fieldNames;
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+       <SchemaSettings.SelectItem
+        title={t('Progress field')}
+        value={fieldNames.progress}
+        options={useOptions('float')}
+        onChange={(progress) => {
+          const fieldNames = field.decoratorProps.fieldNames || {};
+          fieldNames['progress'] = progress;
+          field.decoratorProps.fieldNames = fieldNames;
+          fieldSchema['x-decorator-props']['fieldNames'] = fieldNames;
+          service.refresh();
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.ModalItem
+        title={t('Set the data scope')}
+        schema={
+          {
+            type: 'object',
+            title: t('Set the data scope'),
+            properties: {
+              filter: {
+                default: defaultFilter,
+                enum: dataSource,
+                'x-component': 'Filter',
+                'x-component-props': {},
+              },
+            },
+          } as ISchema
+        }
+        initialValues={
+          {
+            // title: field.title,
+            // icon: field.componentProps.icon,
+          }
+        }
+        onSubmit={({ filter }) => {
+          const params = field.decoratorProps.params || {};
+          params.filter = filter;
+          field.decoratorProps.params = params;
+          fieldSchema['x-decorator-props']['params'] = params;
+          service.run({ ...service?.params?.[0], filter });
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              'x-decorator-props': field.decoratorProps,
+            },
+          });
+        }}
+      />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Template componentName={'Gantt'} collectionName={name} resourceName={defaultResource} />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/calendar/calendar.tsx

@@ -0,0 +1,380 @@
+import React, { ReactChild } from 'react';
+import { cx } from '@emotion/css';
+import { DateSetup } from '../../types/date-setup';
+import { ViewMode } from '../../types/public-types';
+import { TopPartOfCalendar } from './top-part-of-calendar';
+import {
+  getCachedDateTimeFormat,
+  getDaysInMonth,
+  getLocalDayOfWeek,
+  getLocaleMonth,
+  getWeekNumberISO8601,
+} from '../../helpers/date-helper';
+import { calendarBottomText, calendarHeader } from './style';
+
+export type CalendarProps = {
+  dateSetup: DateSetup;
+  locale: string;
+  viewMode: ViewMode;
+  rtl: boolean;
+  headerHeight: number;
+  columnWidth: number;
+  fontFamily: string;
+  fontSize: string;
+};
+
+export const Calendar: React.FC<CalendarProps> = ({
+  dateSetup,
+  locale,
+  viewMode,
+  rtl,
+  headerHeight,
+  columnWidth,
+  fontFamily,
+  fontSize,
+}) => {
+  const getCalendarValuesForYear = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = date.getFullYear();
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={cx(calendarBottomText)}
+        >
+          {bottomValue}
+        </text>,
+      );
+      if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
+        const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getFullYear() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getFullYear()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={headerHeight}
+            xText={xText}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForQuarterYear = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      // const bottomValue = getLocaleMonth(date, locale);
+      const quarter = 'Q' + Math.floor((date.getMonth() + 3) / 3);
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={cx(calendarBottomText)}
+        >
+          {quarter}
+        </text>,
+      );
+      if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
+        const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getMonth() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getMonth()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={Math.abs(xText)}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForMonth = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = getLocaleMonth(date, locale);
+      bottomValues.push(
+        <text
+          key={bottomValue + date.getFullYear()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={cx(calendarBottomText)}
+        >
+          {bottomValue}
+        </text>,
+      );
+      if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
+        const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getMonth() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getMonth()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={xText}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForWeek = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    let weeksCount: number = 1;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    for (let i = dates.length - 1; i >= 0; i--) {
+      const date = dates[i];
+      let topValue = '';
+      if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
+        // top
+        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
+      }
+      // bottom
+      const bottomValue = `W${getWeekNumberISO8601(date)}`;
+
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * (i + +rtl)}
+          className={cx(calendarBottomText)}
+        >
+          {bottomValue}
+        </text>,
+      );
+
+      if (topValue) {
+        // if last day is new month
+        if (i !== dates.length - 1) {
+          topValues.push(
+            <TopPartOfCalendar
+              key={topValue}
+              value={topValue}
+              x1Line={columnWidth * i + weeksCount * columnWidth}
+              y1Line={0}
+              y2Line={topDefaultHeight}
+              xText={columnWidth * i + columnWidth * weeksCount * 0.5}
+              yText={topDefaultHeight * 0.9}
+            />,
+          );
+        }
+        weeksCount = 0;
+      }
+      weeksCount++;
+    }
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForDay = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      // const bottomValue = `${getLocalDayOfWeek(date, locale, 'short')}, ${date.getDate().toString()}`;
+      const bottomValue = `${date.getDate().toString()}`;
+
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={cx(calendarBottomText)}
+        >
+          {bottomValue}
+        </text>,
+      );
+      if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
+        const topValue = getLocaleMonth(date, locale);
+
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + date.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * (i + 1)}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * (i + 1) - getDaysInMonth(date.getMonth(), date.getFullYear()) * columnWidth * 0.5}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForPartOfDay = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
+        hour: 'numeric',
+      })
+        //@ts-ignore
+        .format(date)
+        .replace('时', '');
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * (i + +rtl)}
+          className={cx(calendarBottomText)}
+          fontFamily={fontFamily}
+        >
+          {bottomValue}
+        </text>,
+      );
+      if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
+        const topValue = `${getLocalDayOfWeek(date, locale, 'short')}, ${date.getDate()} ${getLocaleMonth(
+          date,
+          locale,
+        )}`;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + date.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * i + ticks * columnWidth}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * i + ticks * columnWidth * 0.5}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+
+    return [topValues, bottomValues];
+  };
+
+  const getCalendarValuesForHour = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
+        hour: 'numeric',
+      })
+        //@ts-ignore
+        .format(date)
+        ?.replace('时', '');
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * (i + +rtl)}
+          className={cx(calendarBottomText)}
+          fontFamily={fontFamily}
+        >
+          {bottomValue}
+        </text>,
+      );
+      if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
+        const displayDate = dates[i - 1];
+        const topValue = `${getLocalDayOfWeek(displayDate, locale, 'long')}, ${displayDate.getDate()} ${getLocaleMonth(
+          displayDate,
+          locale,
+        )}`;
+        const topPosition = (date.getHours() - 24) / 2;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + displayDate.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * (i + topPosition)}
+            yText={topDefaultHeight * 0.9}
+          />,
+        );
+      }
+    }
+
+    return [topValues, bottomValues];
+  };
+
+  let topValues: ReactChild[] = [];
+  let bottomValues: ReactChild[] = [];
+  switch (dateSetup.viewMode) {
+    case ViewMode.Year:
+      [topValues, bottomValues] = getCalendarValuesForYear();
+      break;
+    case ViewMode.QuarterYear:
+      [topValues, bottomValues] = getCalendarValuesForQuarterYear();
+      break;
+    case ViewMode.Month:
+      [topValues, bottomValues] = getCalendarValuesForMonth();
+      break;
+    case ViewMode.Week:
+      [topValues, bottomValues] = getCalendarValuesForWeek();
+      break;
+    case ViewMode.Day:
+      [topValues, bottomValues] = getCalendarValuesForDay();
+      break;
+    case ViewMode.QuarterDay:
+    case ViewMode.HalfDay:
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
+      break;
+    case ViewMode.Hour:
+      [topValues, bottomValues] = getCalendarValuesForHour();
+  }
+  return (
+    <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
+      <rect
+        x={0}
+        y={0}
+        width={columnWidth * dateSetup.dates.length}
+        height={headerHeight}
+        className={cx(calendarHeader)}
+      />
+      {bottomValues} {topValues}
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/calendar/style.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/css';
+
+export const calendarBottomText = css`
+  text-anchor: middle;
+  fill: rgba(0, 0, 0, 0.85);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  font-weight: 500;
+`;
+
+export const calendarTopTick = css`
+  stroke: #f0f0f0;
+  stroke-width: 0;
+`;
+
+export const calendarTopText = css`
+  text-anchor: middle;
+  /* fill: #555; */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  font-weight: 500;
+`;
+
+export const calendarHeader = css`
+  fill: #fafafa;
+  // stroke: #e0e0e0;
+  stroke-width: 1.4;
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+`;

packages/core/client/src/schema-component/antd/gantt/components/calendar/top-part-of-calendar.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { cx } from '@emotion/css';
+import { calendarTopTick, calendarTopText } from './style';
+
+
+type TopPartOfCalendarProps = {
+  value: string;
+  x1Line: number;
+  y1Line: number;
+  y2Line: number;
+  xText: number;
+  yText: number;
+};
+
+export const TopPartOfCalendar: React.FC<TopPartOfCalendarProps> = ({
+  value,
+  x1Line,
+  y1Line,
+  y2Line,
+  xText,
+  yText,
+}) => {
+  return (
+    <g className="calendarTop">
+      <line
+        x1={x1Line}
+        y1={y1Line}
+        x2={x1Line}
+        y2={y2Line}
+        className={cx(calendarTopTick)}
+        key={value + "line"}
+      />
+      <text
+        key={value + "text"}
+        y={yText}
+        x={xText}
+        className={cx(calendarTopText)}
+      >
+        {value}
+      </text>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/gantt/Event.tsx

@@ -0,0 +1,6 @@
+import { observer } from '@formily/react';
+import React from 'react';
+
+export const Event = observer((props) => {
+  return <>{props.children}</>;
+});

packages/core/client/src/schema-component/antd/gantt/components/gantt/gantt.tsx

@@ -0,0 +1,546 @@
+import { css, cx } from '@emotion/css';
+import { createForm } from '@formily/core';
+import { RecursionField, Schema, useFieldSchema } from '@formily/react';
+import { message } from 'antd';
+import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCurrentAppInfo } from '../../../../../appInfo';
+import { useBlockRequestContext, useGanttBlockContext, useTableBlockContext } from '../../../../../block-provider';
+import { RecordProvider } from '../../../../../record-provider';
+import { useDesignable } from '../../../../../schema-component';
+import { ActionContext } from '../../../action';
+import { convertToBarTasks } from '../../helpers/bar-helper';
+import { ganttDateRange, seedDates } from '../../helpers/date-helper';
+import { removeHiddenTasks, sortTasks } from '../../helpers/other-helper';
+import { BarTask } from '../../types/bar-task';
+import { DateSetup } from '../../types/date-setup';
+import { GanttEvent } from '../../types/gantt-task-actions';
+import { Task } from '../../types/public-types';
+import { CalendarProps } from '../calendar/calendar';
+import { GridProps } from '../grid/grid';
+import { HorizontalScroll } from '../other/horizontal-scroll';
+import { StandardTooltipContent, Tooltip } from '../other/tooltip';
+import { VerticalScroll } from '../other/vertical-scroll';
+import { wrapper } from './style';
+import { TaskGantt } from './task-gantt';
+import { TaskGanttContentProps } from './task-gantt-content';
+
+const getColumnWidth = (dataSetLength: any, clientWidth: any) => {
+  const columnWidth = clientWidth / dataSetLength > 50 ? Math.floor(clientWidth / dataSetLength) + 20 : 50;
+  return columnWidth;
+};
+export const DeleteEventContext = React.createContext({
+  close: () => {},
+});
+const GanttRecordViewer = (props) => {
+  const { visible, setVisible, record } = props;
+  const form = useMemo(() => createForm(), [record]);
+  const fieldSchema = useFieldSchema();
+  const eventSchema: Schema = fieldSchema.properties.detail;
+  const close = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return (
+    eventSchema && (
+      <DeleteEventContext.Provider value={{ close }}>
+        <ActionContext.Provider value={{ visible, setVisible }}>
+          <RecordProvider record={record}>
+            <RecursionField schema={eventSchema} name={eventSchema.name} />
+          </RecordProvider>
+        </ActionContext.Provider>
+      </DeleteEventContext.Provider>
+    )
+  );
+};
+export const Gantt: any = (props: any) => {
+  const { designable } = useDesignable();
+  const currentTheme = localStorage.getItem('NOCOBASE_THEME');
+  const {
+    headerHeight = currentTheme === 'compact' ? (designable ? 53 : 45) : designable ? 65 : 55,
+    listCellWidth = '155px',
+    rowHeight = currentTheme === 'compact' ? 45 : 55.56,
+    ganttHeight = 0,
+    preStepsCount = 1,
+    barFill = 60,
+    barCornerRadius = 2,
+    barProgressColor = '#1890ff',
+    barProgressSelectedColor = '#1890ff',
+    barBackgroundColor = '#1890ff',
+    barBackgroundSelectedColor = '#1890ff',
+    projectProgressColor = '#1890ff',
+    projectProgressSelectedColor = '#1890ff',
+    projectBackgroundColor = '#1890ff',
+    projectBackgroundSelectedColor = '#1890ff',
+    milestoneBackgroundColor = '#f1c453',
+    milestoneBackgroundSelectedColor = '#f29e4c',
+    rtl = false,
+    handleWidth = 8,
+    timeStep = 300000,
+    arrowColor = 'grey',
+    fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
+    fontSize = currentTheme === 'compact' ? '12px' : '14px',
+    arrowIndent = 20,
+    todayColor = 'rgba(252, 248, 227, 0.5)',
+    viewDate,
+    TooltipContent = StandardTooltipContent,
+    onDoubleClick,
+    onClick,
+    onDelete,
+    onSelect,
+    useProps,
+  } = props;
+  const { onExpanderClick, tasks, expandAndCollapseAll } = useProps();
+  const ctx = useGanttBlockContext();
+  const appInfo = useCurrentAppInfo();
+  const { t } = useTranslation();
+  const locale = appInfo.data?.lang;
+  const tableCtx = useTableBlockContext();
+  const { resource, service } = useBlockRequestContext();
+  const fieldSchema = useFieldSchema();
+  const { fieldNames } = useProps(props);
+  const viewMode = fieldNames.range || 'day';
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const taskListRef = useRef<HTMLDivElement>(null);
+  const verticalGanttContainerRef = useRef<HTMLDivElement>(null);
+  const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
+    const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount);
+    return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
+  });
+  const [visible, setVisible] = useState(false);
+  const [record, setRecord] = useState<any>({});
+  const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(undefined);
+  const [taskListWidth, setTaskListWidth] = useState(0);
+  const [svgContainerWidth, setSvgContainerWidth] = useState(0);
+  const [svgContainerHeight, setSvgContainerHeight] = useState(ganttHeight);
+  const [barTasks, setBarTasks] = useState<BarTask[]>([]);
+  const [ganttEvent, setGanttEvent] = useState<GanttEvent>({
+    action: '',
+  });
+  const taskHeight = useMemo(() => (rowHeight * barFill) / 100, [rowHeight, barFill]);
+  const [selectedTask, setSelectedTask] = useState<BarTask>();
+  const [failedTask, setFailedTask] = useState<BarTask | null>(null);
+  const [scrollY, setScrollY] = useState(0);
+  const [scrollX, setScrollX] = useState(-1);
+  const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
+  const columnWidth: number = getColumnWidth(dateSetup.dates.length, verticalGanttContainerRef.current?.clientWidth);
+  const svgWidth = dateSetup.dates.length * columnWidth;
+  const ganttFullHeight = barTasks.length * rowHeight;
+  const { expandFlag } = tableCtx;
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+  useEffect(() => {
+    tableCtx.field.onExpandClick = handleTableExpanderClick;
+    tableCtx.field.onRowSelect = handleRowSelect;
+    tableCtx.setExpandFlag(true);
+  }, []);
+  useEffect(() => {
+    expandAndCollapseAll?.(!expandFlag);
+  }, [expandFlag]);
+  // task change events
+  useEffect(() => {
+    let filteredTasks: Task[];
+    if (onExpanderClick) {
+      filteredTasks = removeHiddenTasks(tasks);
+    } else {
+      filteredTasks = tasks;
+    }
+    filteredTasks = filteredTasks.sort(sortTasks);
+    const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode, preStepsCount);
+    let newDates = seedDates(startDate, endDate, viewMode);
+    if (rtl) {
+      newDates = newDates.reverse();
+      if (scrollX === -1) {
+        setScrollX(newDates.length * columnWidth);
+      }
+    }
+    setDateSetup({ dates: newDates, viewMode });
+    setBarTasks(
+      convertToBarTasks(
+        filteredTasks,
+        newDates,
+        columnWidth,
+        rowHeight,
+        taskHeight,
+        barCornerRadius,
+        handleWidth,
+        rtl,
+        barProgressColor,
+        barProgressSelectedColor,
+        barBackgroundColor,
+        barBackgroundSelectedColor,
+        projectProgressColor,
+        projectProgressSelectedColor,
+        projectBackgroundColor,
+        projectBackgroundSelectedColor,
+        milestoneBackgroundColor,
+        milestoneBackgroundSelectedColor,
+      ),
+    );
+  }, [
+    tasks,
+    viewMode,
+    preStepsCount,
+    rowHeight,
+    barCornerRadius,
+    columnWidth,
+    taskHeight,
+    handleWidth,
+    barProgressColor,
+    barProgressSelectedColor,
+    barBackgroundColor,
+    barBackgroundSelectedColor,
+    projectProgressColor,
+    projectProgressSelectedColor,
+    projectBackgroundColor,
+    projectBackgroundSelectedColor,
+    milestoneBackgroundColor,
+    milestoneBackgroundSelectedColor,
+    rtl,
+    scrollX,
+  ]);
+
+  useEffect(() => {
+    if (
+      viewMode === dateSetup.viewMode &&
+      ((viewDate && !currentViewDate) || (viewDate && currentViewDate?.valueOf() !== viewDate.valueOf()))
+    ) {
+      const dates = dateSetup.dates;
+      const index = dates.findIndex(
+        (d, i) =>
+          viewDate.valueOf() >= d.valueOf() && i + 1 !== dates.length && viewDate.valueOf() < dates[i + 1].valueOf(),
+      );
+      if (index === -1) {
+        return;
+      }
+      setCurrentViewDate(viewDate);
+      setScrollX(columnWidth * index);
+    }
+  }, [viewDate, columnWidth, dateSetup.dates, dateSetup.viewMode, viewMode, currentViewDate, setCurrentViewDate]);
+
+  useEffect(() => {
+    const { changedTask, action } = ganttEvent;
+    if (changedTask) {
+      if (action === 'delete') {
+        setGanttEvent({ action: '' });
+        setBarTasks(barTasks.filter((t) => t.id !== changedTask.id));
+      } else if (action === 'move' || action === 'end' || action === 'start' || action === 'progress') {
+        const prevStateTask = barTasks.find((t) => t.id === changedTask.id);
+        if (
+          prevStateTask &&
+          (prevStateTask.start.getTime() !== changedTask.start.getTime() ||
+            prevStateTask.end.getTime() !== changedTask.end.getTime() ||
+            prevStateTask.progress !== changedTask.progress)
+        ) {
+          // actions for change
+          const newTaskList = barTasks.map((t) => (t.id === changedTask.id ? changedTask : t));
+          setBarTasks(newTaskList);
+        }
+      }
+    }
+  }, [ganttEvent, barTasks]);
+
+  useEffect(() => {
+    if (failedTask) {
+      setBarTasks(barTasks.map((t) => (t.id !== failedTask.id ? t : failedTask)));
+      setFailedTask(null);
+    }
+  }, [failedTask, barTasks]);
+
+  useEffect(() => {
+    if (!listCellWidth) {
+      setTaskListWidth(0);
+    }
+    if (taskListRef.current) {
+      setTaskListWidth(taskListRef.current.offsetWidth);
+    }
+  }, [taskListRef, listCellWidth]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
+    }
+  }, [wrapperRef, taskListWidth]);
+
+  useEffect(() => {
+    if (ganttHeight) {
+      setSvgContainerHeight(ganttHeight + headerHeight);
+    } else {
+      setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
+    }
+  }, [ganttHeight, tasks, headerHeight, rowHeight]);
+
+  // scroll events
+  useEffect(() => {
+    const handleWheel = (event: WheelEvent) => {
+      if (event.shiftKey || event.deltaX) {
+        const scrollMove = event.deltaX ? event.deltaX : event.deltaY;
+        let newScrollX = scrollX + scrollMove;
+        if (newScrollX < 0) {
+          newScrollX = 0;
+        } else if (newScrollX > svgWidth) {
+          newScrollX = svgWidth;
+        }
+        setScrollX(newScrollX);
+        event.preventDefault();
+      } else if (ganttHeight) {
+        let newScrollY = scrollY + event.deltaY;
+        if (newScrollY < 0) {
+          newScrollY = 0;
+        } else if (newScrollY > ganttFullHeight - ganttHeight) {
+          newScrollY = ganttFullHeight - ganttHeight;
+        }
+        if (newScrollY !== scrollY) {
+          setScrollY(newScrollY);
+          event.preventDefault();
+        }
+      }
+
+      setIgnoreScrollEvent(true);
+    };
+
+    // subscribe if scroll is necessary
+    wrapperRef.current?.addEventListener('wheel', handleWheel, {
+      passive: false,
+    });
+    return () => {
+      wrapperRef.current?.removeEventListener('wheel', handleWheel);
+    };
+  }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
+
+  const handleScrollY = (event: SyntheticEvent<HTMLDivElement>) => {
+    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
+      setScrollY(event.currentTarget.scrollTop);
+      setIgnoreScrollEvent(true);
+    } else {
+      setIgnoreScrollEvent(false);
+    }
+  };
+
+  const handleScrollX = (event: SyntheticEvent<HTMLDivElement>) => {
+    if (scrollX !== event.currentTarget.scrollLeft && !ignoreScrollEvent) {
+      setScrollX(event.currentTarget.scrollLeft);
+      setIgnoreScrollEvent(true);
+    } else {
+      setIgnoreScrollEvent(false);
+    }
+  };
+
+  /**
+   * Handles arrow keys events and transform it to new scroll
+   */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    let newScrollY = scrollY;
+    let newScrollX = scrollX;
+    let isX = true;
+    switch (event.key) {
+      case 'Down': // IE/Edge specific value
+      case 'ArrowDown':
+        newScrollY += rowHeight;
+        isX = false;
+        break;
+      case 'Up': // IE/Edge specific value
+      case 'ArrowUp':
+        newScrollY -= rowHeight;
+        isX = false;
+        break;
+      case 'Left':
+      case 'ArrowLeft':
+        newScrollX -= columnWidth;
+        break;
+      case 'Right': // IE/Edge specific value
+      case 'ArrowRight':
+        newScrollX += columnWidth;
+        break;
+    }
+    if (isX) {
+      if (newScrollX < 0) {
+        newScrollX = 0;
+      } else if (newScrollX > svgWidth) {
+        newScrollX = svgWidth;
+      }
+      setScrollX(newScrollX);
+    } else {
+      if (newScrollY < 0) {
+        newScrollY = 0;
+      } else if (newScrollY > ganttFullHeight - ganttHeight) {
+        newScrollY = ganttFullHeight - ganttHeight;
+      }
+      setScrollY(newScrollY);
+    }
+    setIgnoreScrollEvent(true);
+  };
+
+  /**
+   * Task select event
+   */
+  const handleSelectedTask = (taskId: string) => {
+    const newSelectedTask = barTasks.find((t) => t.id === taskId);
+    const oldSelectedTask = barTasks.find((t) => !!selectedTask && t.id === selectedTask.id);
+    if (onSelect) {
+      if (oldSelectedTask) {
+        onSelect(oldSelectedTask, false);
+      }
+      if (newSelectedTask) {
+        onSelect(newSelectedTask, true);
+      }
+    }
+    setSelectedTask(newSelectedTask);
+  };
+  const handleTableExpanderClick = (expanded: boolean, record: any) => {
+    const task = ctx?.field?.data.find((v: any) => v.id === record.id + '');
+    if (onExpanderClick && record.children.length) {
+      onExpanderClick({ ...task, hideChildren: !expanded });
+    }
+  };
+
+  const handleRowSelect = (keys) => {
+    setSelectedRowKeys(keys);
+  };
+  const handleProgressChange = async (task: Task) => {
+    await resource.update({
+      filterByTk: task.id,
+      values: {
+        ...task,
+        [fieldNames.progress]: task.progress / 100,
+      },
+    });
+    message.success(t('Saved successfully'));
+    await service?.refresh();
+  };
+  const handleTaskChange = async (task: Task) => {
+    await resource.update({
+      filterByTk: task.id,
+      values: {
+        ...task,
+        [fieldNames.start]: task.start,
+        [fieldNames.end]: task.end,
+      },
+    });
+    message.success(t('Saved successfully'));
+    await service?.refresh();
+  };
+  const handleBarClick = (data) => {
+    const flattenTree = (treeData) => {
+      return treeData.reduce((acc, node) => {
+        if (node.children) {
+          return acc.concat([node, ...flattenTree(node.children)]);
+        } else {
+          return acc.concat(node);
+        }
+      }, []);
+    };
+    const flattenedData = flattenTree(service?.data?.data);
+    const recordData = flattenedData?.find((item) => item.id === +data.id);
+    if (!recordData) {
+      return;
+    }
+    setRecord(recordData);
+    setVisible(true);
+  };
+  const gridProps: GridProps = {
+    columnWidth,
+    svgWidth,
+    tasks: tasks,
+    rowHeight,
+    dates: dateSetup.dates,
+    todayColor,
+    rtl,
+    selectedRowKeys,
+  };
+  const calendarProps: CalendarProps = {
+    dateSetup,
+    locale,
+    viewMode,
+    headerHeight,
+    columnWidth,
+    fontFamily,
+    fontSize,
+    rtl,
+  };
+  const barProps: TaskGanttContentProps = {
+    tasks: barTasks,
+    dates: dateSetup.dates,
+    ganttEvent,
+    selectedTask,
+    rowHeight,
+    taskHeight,
+    columnWidth,
+    arrowColor,
+    timeStep,
+    fontFamily,
+    fontSize,
+    arrowIndent,
+    svgWidth,
+    rtl,
+    setGanttEvent,
+    setFailedTask,
+    setSelectedTask: handleSelectedTask,
+    onDateChange: handleTaskChange,
+    onProgressChange: fieldNames.progress && handleProgressChange,
+    onDoubleClick,
+    onClick: handleBarClick,
+    onDelete,
+  };
+  return (
+    <div>
+      <div
+        className={css`
+          .ant-table-container::after {
+            box-shadow: none !important;
+          }
+        `}
+      >
+        <GanttRecordViewer visible={visible} setVisible={setVisible} record={record} />
+        <RecursionField name={'anctionBar'} schema={fieldSchema.properties.toolBar} />
+        <RecursionField name={'table'} schema={fieldSchema.properties.table} />
+        <div className={cx(wrapper)} onKeyDown={handleKeyDown} tabIndex={0} ref={wrapperRef}>
+          <TaskGantt
+            gridProps={gridProps}
+            calendarProps={calendarProps}
+            barProps={barProps}
+            ganttHeight={ganttHeight}
+            scrollY={scrollY}
+            scrollX={scrollX}
+            ref={verticalGanttContainerRef}
+          />
+
+          {ganttEvent.changedTask && (
+            <Tooltip
+              arrowIndent={arrowIndent}
+              rowHeight={rowHeight}
+              svgContainerHeight={svgContainerHeight}
+              svgContainerWidth={svgContainerWidth}
+              fontFamily={fontFamily}
+              fontSize={fontSize}
+              scrollX={scrollX}
+              scrollY={scrollY}
+              task={ganttEvent.changedTask}
+              headerHeight={headerHeight}
+              taskListWidth={taskListWidth}
+              TooltipContent={TooltipContent}
+              rtl={rtl}
+              svgWidth={svgWidth}
+            />
+          )}
+          <VerticalScroll
+            ganttFullHeight={ganttFullHeight}
+            ganttHeight={ganttHeight}
+            headerHeight={headerHeight}
+            scroll={scrollY}
+            onScroll={handleScrollY}
+            rtl={rtl}
+          />
+        </div>
+      </div>
+      <HorizontalScroll
+        svgWidth={svgWidth}
+        taskListWidth={taskListWidth}
+        scroll={scrollX}
+        rtl={rtl}
+        onScroll={handleScrollX}
+      />
+    </div>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/gantt/style.tsx

@@ -0,0 +1,26 @@
+
+import { css } from '@emotion/css';
+
+export const ganttVerticalContainer=css `
+  overflow: hidden;
+  font-size: 0;
+  margin: 0;
+  padding: 0;
+  width:100%;
+  border-left:2px solid #f4f2f2
+`
+
+export const horizontalContainer=css `
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+`
+
+export const wrapper =css`
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  outline: none;
+  position: relative;
+`

packages/core/client/src/schema-component/antd/gantt/components/gantt/task-gantt-content.tsx

@@ -0,0 +1,299 @@
+import React, { useEffect, useState } from 'react';
+import { EventOption } from '../../types/public-types';
+import { BarTask } from '../../types/bar-task';
+import { Arrow } from '../other/arrow';
+import { handleTaskBySVGMouseEvent } from '../../helpers/bar-helper';
+import { isKeyboardEvent } from '../../helpers/other-helper';
+import { TaskItem } from '../task-item/task-item';
+import { BarMoveAction, GanttContentMoveAction, GanttEvent } from '../../types/gantt-task-actions';
+
+let lastAction = null;
+let lastStart = null;
+export type TaskGanttContentProps = {
+  tasks: BarTask[];
+  dates: Date[];
+  ganttEvent: GanttEvent;
+  selectedTask: BarTask | undefined;
+  rowHeight: number;
+  columnWidth: number;
+  timeStep: number;
+  svg?: React.RefObject<SVGSVGElement>;
+  svgWidth: number;
+  taskHeight: number;
+  arrowColor: string;
+  arrowIndent: number;
+  fontSize: string;
+  fontFamily: string;
+  rtl: boolean;
+  setGanttEvent: (value: GanttEvent) => void;
+  setFailedTask: (value: BarTask | null) => void;
+  setSelectedTask: (taskId: string) => void;
+} & EventOption;
+
+export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
+  tasks,
+  dates,
+  ganttEvent,
+  selectedTask,
+  rowHeight,
+  columnWidth,
+  timeStep,
+  svg,
+  taskHeight,
+  arrowColor,
+  arrowIndent,
+  fontFamily,
+  fontSize,
+  rtl,
+  setGanttEvent,
+  setFailedTask,
+  setSelectedTask,
+  onDateChange,
+  onProgressChange,
+  onDoubleClick,
+  onClick,
+  onDelete,
+}) => {
+  const point = svg?.current?.createSVGPoint();
+  const [xStep, setXStep] = useState(0);
+  const [initEventX1Delta, setInitEventX1Delta] = useState(0);
+  const [isMoving, setIsMoving] = useState(false);
+
+  // create xStep
+  useEffect(() => {
+    const dateDelta =
+      dates[1]?.getTime() -
+      dates[0]?.getTime() -
+      dates[1]?.getTimezoneOffset() * 60 * 1000 +
+      dates[0]?.getTimezoneOffset() * 60 * 1000;
+    const newXStep = (timeStep * columnWidth) / dateDelta;
+    setXStep(newXStep);
+  }, [columnWidth, dates, timeStep]);
+
+  useEffect(() => {
+    const handleMouseMove = async (event: MouseEvent) => {
+      if (!ganttEvent.changedTask || !point || !svg?.current) return;
+      event.preventDefault();
+
+      point.x = event.clientX;
+      const cursor = point.matrixTransform(svg?.current.getScreenCTM()?.inverse());
+
+      const { isChanged, changedTask } = handleTaskBySVGMouseEvent(
+        cursor.x,
+        ganttEvent.action as BarMoveAction,
+        ganttEvent.changedTask,
+        xStep,
+        timeStep,
+        initEventX1Delta,
+        rtl,
+      );
+      if (isChanged) {
+        setGanttEvent({ action: ganttEvent.action, changedTask });
+      }
+    };
+
+    const handleMouseUp = async (event: MouseEvent) => {
+      const { action, originalSelectedTask, changedTask } = ganttEvent;
+      if (!changedTask || !point || !svg?.current || !originalSelectedTask) return;
+      event.preventDefault();
+
+      point.x = event.clientX;
+      const cursor = point.matrixTransform(svg?.current.getScreenCTM()?.inverse());
+      const { changedTask: newChangedTask } = handleTaskBySVGMouseEvent(
+        cursor.x,
+        action as BarMoveAction,
+        changedTask,
+        xStep,
+        timeStep,
+        initEventX1Delta,
+        rtl,
+      );
+
+      const isNotLikeOriginal =
+        originalSelectedTask.start !== newChangedTask.start ||
+        originalSelectedTask.end !== newChangedTask.end ||
+        originalSelectedTask.progress !== newChangedTask.progress;
+
+      // remove listeners
+      svg.current.removeEventListener('mousemove', handleMouseMove);
+      svg.current.removeEventListener('mouseup', handleMouseUp);
+      setGanttEvent({ action: '' });
+      setIsMoving(false);
+
+      // custom operation start
+      let operationSuccess: any = true;
+      if ((action === 'move' || action === 'end' || action === 'start') && onDateChange && isNotLikeOriginal) {
+        try {
+          const result = await onDateChange(newChangedTask, newChangedTask.barChildren);
+          if (result !== undefined) {
+            operationSuccess = result;
+          }
+        } catch (error) {
+          operationSuccess = false;
+        }
+      } else if (onProgressChange && isNotLikeOriginal) {
+        try {
+          const result = await onProgressChange(newChangedTask, newChangedTask.barChildren);
+          if (result !== undefined) {
+            operationSuccess = result;
+          }
+        } catch (error) {
+          operationSuccess = false;
+        }
+      }
+
+      // If operation is failed - return old state
+      if (!operationSuccess) {
+        setFailedTask(originalSelectedTask);
+      }
+    };
+
+    if (
+      !isMoving &&
+      (ganttEvent.action === 'move' ||
+        ganttEvent.action === 'end' ||
+        ganttEvent.action === 'start' ||
+        ganttEvent.action === 'progress') &&
+      svg?.current
+    ) {
+      svg.current.addEventListener('mousemove', handleMouseMove);
+      svg.current.addEventListener('mouseup', handleMouseUp);
+      setIsMoving(true);
+    }
+  }, [
+    ganttEvent,
+    xStep,
+    initEventX1Delta,
+    onProgressChange,
+    timeStep,
+    onDateChange,
+    svg,
+    isMoving,
+    point,
+    rtl,
+    setFailedTask,
+    setGanttEvent,
+  ]);
+
+  /**
+   * Method is Start point of task change
+   */
+  const handleBarEventStart = async (
+    action: GanttContentMoveAction,
+    task: BarTask,
+    event?: React.MouseEvent | React.KeyboardEvent,
+  ) => {
+    if (!event) {
+      if (action === 'select') {
+        setSelectedTask(task.id);
+      }
+    }
+    // Keyboard events
+    else if (isKeyboardEvent(event)) {
+      if (action === 'delete') {
+        if (onDelete) {
+          try {
+            const result = await onDelete(task);
+            if (result !== undefined && result) {
+              setGanttEvent({ action, changedTask: task });
+            }
+          } catch (error) {
+            console.error('Error on Delete. ' + error);
+          }
+        }
+      }
+    }
+    // Mouse Events
+    else if (action === 'mouseenter') {
+      if (!ganttEvent.action) {
+        setGanttEvent({
+          action,
+          changedTask: task,
+          originalSelectedTask: task,
+        });
+      }
+    } else if (action === 'mouseleave') {
+      if (ganttEvent.action === 'mouseenter') {
+        setGanttEvent({ action: '' });
+      }
+    } else if (action === 'dblclick') {
+      !!onDoubleClick && onDoubleClick(task);
+    } else if (action === 'click') {
+      !!onClick && onClick(task);
+    }
+    // Change task event start
+    else if (action === 'move') {
+      if (!svg?.current || !point) return;
+      point.x = event.clientX;
+      const cursor = point.matrixTransform(svg.current.getScreenCTM()?.inverse());
+      setInitEventX1Delta(cursor.x - task.x1);
+      setGanttEvent({
+        action,
+        changedTask: task,
+        originalSelectedTask: task,
+      });
+    } else {
+      setGanttEvent({
+        action,
+        changedTask: task,
+        originalSelectedTask: task,
+      });
+    }
+  };
+
+  const handleBarEvent = (action, task, event) => {
+    if (['click'].includes(action)) {
+      if (!['start', 'end', 'progress'].includes(lastAction) && (!lastStart || lastStart === task.start)) {
+        handleBarEventStart(action, task, event);
+      }
+      lastAction = null;
+      lastStart = null;
+    } else if (['move', 'select'].includes(action)) {
+      lastStart = task.start;
+      handleBarEventStart(action, task, event);
+    } else {
+      lastStart = task.start;
+      lastAction = action;
+      handleBarEventStart(action, task, event);
+    }
+  };
+  return (
+    <g className="content">
+      <g className="arrows" fill={arrowColor} stroke={arrowColor}>
+        {tasks.map((task) => {
+          return task.barChildren.map((child) => {
+            return (
+              <Arrow
+                key={`Arrow from ${task.id} to ${tasks[child.index].id}`}
+                taskFrom={task}
+                taskTo={tasks[child.index]}
+                rowHeight={rowHeight}
+                taskHeight={taskHeight}
+                arrowIndent={arrowIndent}
+                rtl={rtl}
+              />
+            );
+          });
+        })}
+      </g>
+      <g className="bar" fontFamily={fontFamily} fontSize={fontSize}>
+        {tasks.map((task) => {
+          return (
+            <TaskItem
+              task={task}
+              arrowIndent={arrowIndent}
+              taskHeight={taskHeight}
+              isProgressChangeable={!!onProgressChange && !task.isDisabled}
+              isDateChangeable={!!onDateChange && !task.isDisabled}
+              isDelete={!task.isDisabled}
+              onEventStart={handleBarEvent}
+              key={task.id}
+              isSelected={!!selectedTask && task.id === selectedTask.id}
+              rtl={rtl}
+            />
+          );
+        })}
+      </g>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/gantt/task-gantt.tsx

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect, forwardRef } from 'react';
+import { cx } from '@emotion/css';
+import { GridProps, Grid } from '../grid/grid';
+import { CalendarProps, Calendar } from '../calendar/calendar';
+import { TaskGanttContentProps, TaskGanttContent } from './task-gantt-content';
+import { ganttVerticalContainer, horizontalContainer } from './style';
+
+export type TaskGanttProps = {
+  gridProps: GridProps;
+  calendarProps: CalendarProps;
+  barProps: TaskGanttContentProps;
+  ganttHeight: number;
+  scrollY: number;
+  scrollX: number;
+  ref: any;
+};
+export const TaskGantt: React.FC<TaskGanttProps> = forwardRef(
+  ({ gridProps, calendarProps, barProps, ganttHeight, scrollY, scrollX }, ref: any) => {
+    const ganttSVGRef = useRef<SVGSVGElement>(null);
+    const horizontalContainerRef = useRef<HTMLDivElement>(null);
+    const newBarProps = { ...barProps, svg: ganttSVGRef };
+
+    useEffect(() => {
+      if (horizontalContainerRef.current) {
+        horizontalContainerRef.current.scrollTop = scrollY;
+      }
+    }, [scrollY]);
+
+    useEffect(() => {
+      if (ref.current) {
+        ref.current.scrollLeft = scrollX;
+      }
+    }, [scrollX]);
+
+    return (
+      <div className={cx(ganttVerticalContainer)} ref={ref} dir="ltr">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={gridProps.svgWidth}
+          height={calendarProps.headerHeight}
+          fontFamily={barProps.fontFamily}
+          style={{ borderBottom: '1px solid #f0f0f0',fontWeight:700 }}
+        >
+          <Calendar {...calendarProps} />
+        </svg>
+        <div
+          ref={horizontalContainerRef}
+          className={cx(horizontalContainer)}
+          style={ganttHeight ? { maxHeight: ganttHeight, width: gridProps.svgWidth } : { width: gridProps.svgWidth }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={gridProps.svgWidth}
+            height={barProps.rowHeight * (barProps.tasks.length || 3)}
+            fontFamily={barProps.fontFamily}
+            ref={ganttSVGRef}
+            style={{ borderBottom: '1px solid #f0f0f0' }}
+          >
+            <Grid {...gridProps} />
+            <TaskGanttContent {...newBarProps} />
+          </svg>
+        </div>
+      </div>
+    );
+  },
+);

packages/core/client/src/schema-component/antd/gantt/components/grid/grid-body.tsx

@@ -0,0 +1,90 @@
+import React, { ReactChild } from 'react';
+import { cx } from '@emotion/css';
+import { Task } from '../../types/public-types';
+import { addToDate } from '../../helpers/date-helper';
+import { gridRowLine, gridRow, gridTick, gridHeightRow } from './style';
+import { uid } from '@nocobase/utils/client';
+
+export type GridBodyProps = {
+  tasks: Task[];
+  dates: Date[];
+  svgWidth: number;
+  rowHeight: number;
+  columnWidth: number;
+  todayColor: string;
+  rtl: boolean;
+  selectedRowKeys: any[];
+};
+const empty = [{ id: uid() }, { id: uid() }, { id: uid() }];
+export const GridBody: React.FC<GridBodyProps> = ({
+  tasks,
+  dates,
+  rowHeight,
+  svgWidth,
+  columnWidth,
+  todayColor,
+  rtl,
+  selectedRowKeys,
+}) => {
+  const data = tasks.length ? tasks : empty;
+  let y = 0;
+  const gridRows: ReactChild[] = [];
+  const rowLines: ReactChild[] = [
+    <line key="RowLineFirst" x="0" y1={0} x2={svgWidth} y2={0} className={cx(gridRowLine)} />,
+  ];
+  for (const task of data) {
+    gridRows.push(
+      <rect
+        key={'Row' + task.id}
+        x="0"
+        y={y}
+        width={svgWidth}
+        height={rowHeight}
+        className={selectedRowKeys?.includes(+task.id) ? cx(gridHeightRow) : cx(gridRow)}
+      />,
+    );
+    rowLines.push(
+      <line
+        key={'RowLine' + task.id}
+        x="0"
+        y1={y + rowHeight}
+        x2={svgWidth}
+        y2={y + rowHeight}
+        className={cx(gridRowLine)}
+      />,
+    );
+    y += rowHeight;
+  }
+
+  const now = new Date();
+  let tickX = 0;
+  const ticks: ReactChild[] = [];
+  let today: ReactChild = <rect />;
+  for (let i = 0; i < dates.length; i++) {
+    const date = dates[i];
+    ticks.push(<line key={date.getTime()} x1={tickX} y1={0} x2={tickX} y2={y} className={cx(gridTick)} />);
+    if (
+      (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime()) ||
+      // if current date is last
+      (i !== 0 &&
+        i + 1 === dates.length &&
+        date.getTime() < now.getTime() &&
+        addToDate(date, date.getTime() - dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())
+    ) {
+      today = <rect x={tickX} y={0} width={columnWidth} height={y} fill={todayColor} />;
+    }
+    // rtl for today
+    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
+      today = <rect x={tickX + columnWidth} y={0} width={columnWidth} height={y} fill={todayColor} />;
+    }
+    tickX += columnWidth;
+  }
+  return (
+    <g className="gridBody">
+      <g className="rows">{gridRows}</g>
+      <g className="rowLines">{rowLines}</g>
+      <g className="ticks">{ticks}</g>
+      <g className="today">{today}</g>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/grid/grid.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { GridBody, GridBodyProps } from "./grid-body";
+
+export type GridProps = GridBodyProps;
+export const Grid: React.FC<GridProps> = props => {
+  return (
+    <g className="grid">
+      <GridBody {...props} />
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/grid/style.tsx

@@ -0,0 +1,19 @@
+import { css } from '@emotion/css';
+export const gridRow = css`
+  fill: #fff;
+`;
+
+export const gridHeightRow = css`
+  fill: #e6f7ff;
+  border-color: rgba(0, 0, 0, 0.03);
+`;
+
+export const gridRowLine = css`
+  stroke: #f0f0f0;
+  stroke-width:0;
+  border-bottom: 1px solid #f0f0f0;
+`;
+
+export const gridTick = css`
+  stroke: #f0f0f0;
+`;

packages/core/client/src/schema-component/antd/gantt/components/other/arrow.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { BarTask } from "../../types/bar-task";
+
+type ArrowProps = {
+  taskFrom: BarTask;
+  taskTo: BarTask;
+  rowHeight: number;
+  taskHeight: number;
+  arrowIndent: number;
+  rtl: boolean;
+};
+export const Arrow: React.FC<ArrowProps> = ({
+  taskFrom,
+  taskTo,
+  rowHeight,
+  taskHeight,
+  arrowIndent,
+  rtl,
+}) => {
+  let path: string;
+  let trianglePoints: string;
+  if (rtl) {
+    [path, trianglePoints] = drownPathAndTriangleRTL(
+      taskFrom,
+      taskTo,
+      rowHeight,
+      taskHeight,
+      arrowIndent
+    );
+  } else {
+    [path, trianglePoints] = drownPathAndTriangle(
+      taskFrom,
+      taskTo,
+      rowHeight,
+      taskHeight,
+      arrowIndent
+    );
+  }
+
+  return (
+    <g className="arrow">
+      <path strokeWidth="1.5" d={path} fill="none" />
+      <polygon points={trianglePoints} />
+    </g>
+  );
+};
+
+const drownPathAndTriangle = (
+  taskFrom: BarTask,
+  taskTo: BarTask,
+  rowHeight: number,
+  taskHeight: number,
+  arrowIndent: number
+) => {
+  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  const taskToEndPosition = taskTo.y + taskHeight / 2;
+  const taskFromEndPosition = taskFrom.x2 + arrowIndent * 2;
+  const taskFromHorizontalOffsetValue =
+    taskFromEndPosition < taskTo.x1 ? "" : `H ${taskTo.x1 - arrowIndent}`;
+  const taskToHorizontalOffsetValue =
+    taskFromEndPosition > taskTo.x1
+      ? arrowIndent
+      : taskTo.x1 - taskFrom.x2 - arrowIndent;
+
+  const path = `M ${taskFrom.x2} ${taskFrom.y + taskHeight / 2} 
+  h ${arrowIndent} 
+  v ${(indexCompare * rowHeight) / 2} 
+  ${taskFromHorizontalOffsetValue}
+  V ${taskToEndPosition} 
+  h ${taskToHorizontalOffsetValue}`;
+
+  const trianglePoints = `${taskTo.x1},${taskToEndPosition} 
+  ${taskTo.x1 - 5},${taskToEndPosition - 5} 
+  ${taskTo.x1 - 5},${taskToEndPosition + 5}`;
+  return [path, trianglePoints];
+};
+
+const drownPathAndTriangleRTL = (
+  taskFrom: BarTask,
+  taskTo: BarTask,
+  rowHeight: number,
+  taskHeight: number,
+  arrowIndent: number
+) => {
+  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  const taskToEndPosition = taskTo.y + taskHeight / 2;
+  const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
+  const taskFromHorizontalOffsetValue =
+    taskFromEndPosition > taskTo.x2 ? "" : `H ${taskTo.x2 + arrowIndent}`;
+  const taskToHorizontalOffsetValue =
+    taskFromEndPosition < taskTo.x2
+      ? -arrowIndent
+      : taskTo.x2 - taskFrom.x1 + arrowIndent;
+
+  const path = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2} 
+  h ${-arrowIndent} 
+  v ${(indexCompare * rowHeight) / 2} 
+  ${taskFromHorizontalOffsetValue}
+  V ${taskToEndPosition} 
+  h ${taskToHorizontalOffsetValue}`;
+
+  const trianglePoints = `${taskTo.x2},${taskToEndPosition} 
+  ${taskTo.x2 + 5},${taskToEndPosition + 5} 
+  ${taskTo.x2 + 5},${taskToEndPosition - 5}`;
+  return [path, trianglePoints];
+};

packages/core/client/src/schema-component/antd/gantt/components/other/horizontal-scroll.tsx

@@ -0,0 +1,35 @@
+import React, { SyntheticEvent, useRef, useEffect } from "react";
+import { cx } from '@emotion/css';
+import {scrollWrapper,horizontalScroll} from './style'
+
+export const HorizontalScroll: React.FC<{
+  scroll: number;
+  svgWidth: number;
+  taskListWidth: number;
+  rtl: boolean;
+  onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
+}> = ({ scroll, svgWidth, taskListWidth, rtl, onScroll }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scroll;
+    }
+  }, [scroll]);
+
+  return (
+    <div
+      dir="ltr"
+      style={{
+        margin: rtl
+          ? `0px ${taskListWidth}px 0px 0px`
+          : `0px 0px 0px ${taskListWidth}px`,
+      }}
+      className={cx(scrollWrapper)}
+      onScroll={onScroll}
+      ref={scrollRef}
+    >
+      <div style={{ width: svgWidth  }} className={cx(horizontalScroll)} />
+    </div>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/other/style.tsx

@@ -0,0 +1,101 @@
+import { css } from '@emotion/css';
+
+export const scrollWrapper = css`
+  overflow: auto;
+  position: relative;
+  top: -14px;
+  max-width: 100%;
+  /*firefox*/
+  scrollbar-width: thin;
+  /*iPad*/
+  height: 1.2rem;
+  &::-webkit-scrollbar {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 6px solid transparent;
+    background: rgba(0, 0, 0, 0.2);
+    background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+    border-radius: 10px;
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    border: 4px solid transparent;
+    background: rgba(0, 0, 0, 0.3);
+    background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+    background-clip: padding-box;
+  }
+`;
+
+export const horizontalScroll = css`
+  height: 1px;
+`;
+
+export const tooltipDefaultContainer = css`
+  padding: 12px;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  b {
+    display: block;
+    margin-bottom: 8px;
+  }
+`;
+
+export const tooltipDefaultContainerParagraph = css`
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #666;
+`;
+
+export const tooltipDetailsContainer = css`
+  position: absolute;
+  display: flex;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+
+export const tooltipDetailsContainerHidden = css`
+  visibility: hidden;
+  position: absolute;
+  display: flex;
+  pointer-events: none;
+`;
+
+export const verticalScroll = css`
+  overflow: hidden auto;
+  width: 1rem;
+  flex-shrink: 0;
+  /*firefox*/
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 6px solid transparent;
+    background: rgba(0, 0, 0, 0.2);
+    background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+    border-radius: 10px;
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    border: 4px solid transparent;
+    background: rgba(0, 0, 0, 0.3);
+    background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+    background-clip: padding-box;
+  }
+`;

packages/core/client/src/schema-component/antd/gantt/components/other/tooltip.tsx

@@ -0,0 +1,137 @@
+import { cx } from '@emotion/css';
+import React, { useEffect, useRef, useState } from 'react';
+import { getYmd } from '../../helpers/other-helper';
+import { BarTask } from '../../types/bar-task';
+import { Task } from '../../types/public-types';
+import {
+  tooltipDefaultContainer,
+  tooltipDefaultContainerParagraph,
+  tooltipDetailsContainer,
+  tooltipDetailsContainerHidden,
+} from './style';
+
+export type TooltipProps = {
+  task: BarTask;
+  arrowIndent: number;
+  rtl: boolean;
+  svgContainerHeight: number;
+  svgContainerWidth: number;
+  svgWidth: number;
+  headerHeight: number;
+  taskListWidth: number;
+  scrollX: number;
+  scrollY: number;
+  rowHeight: number;
+  fontSize: string;
+  fontFamily: string;
+  TooltipContent: React.FC<{
+    task: Task;
+    fontSize: string;
+    fontFamily: string;
+  }>;
+};
+export const Tooltip: React.FC<TooltipProps> = ({
+  task,
+  rowHeight,
+  rtl,
+  svgContainerHeight,
+  svgContainerWidth,
+  scrollX,
+  scrollY,
+  arrowIndent,
+  fontSize,
+  fontFamily,
+  headerHeight,
+  taskListWidth,
+  TooltipContent,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [relatedY, setRelatedY] = useState(0);
+  const [relatedX, setRelatedX] = useState(0);
+  useEffect(() => {
+    if (tooltipRef.current) {
+      const tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
+      const tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
+
+      let newRelatedY = task.index * rowHeight - scrollY + headerHeight;
+      let newRelatedX: number;
+      if (rtl) {
+        newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
+        if (newRelatedX < 0) {
+          newRelatedX = task.x2 + arrowIndent * 1.5 - scrollX;
+        }
+        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+        if (tooltipLeftmostPoint > svgContainerWidth) {
+          newRelatedX = svgContainerWidth - tooltipWidth;
+          newRelatedY += rowHeight;
+        }
+      } else {
+        newRelatedX = task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX;
+        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+        const fullChartWidth = taskListWidth + svgContainerWidth;
+        if (tooltipLeftmostPoint > fullChartWidth) {
+          newRelatedX = task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
+        }
+        if (newRelatedX < taskListWidth) {
+          newRelatedX = svgContainerWidth + taskListWidth - tooltipWidth;
+          newRelatedY += rowHeight;
+        }
+      }
+
+      const tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
+      if (tooltipLowerPoint > svgContainerHeight - scrollY) {
+        newRelatedY = svgContainerHeight - tooltipHeight;
+      }
+      setRelatedY(newRelatedY);
+      setRelatedX(newRelatedX);
+    }
+  }, [
+    tooltipRef,
+    task,
+    arrowIndent,
+    scrollX,
+    scrollY,
+    headerHeight,
+    taskListWidth,
+    rowHeight,
+    svgContainerHeight,
+    svgContainerWidth,
+    rtl,
+  ]);
+
+  return (
+    <div
+      ref={tooltipRef}
+      className={relatedX ? cx(tooltipDetailsContainer) : cx(tooltipDetailsContainerHidden)}
+      style={{ left: relatedX, top: relatedY }}
+    >
+      <TooltipContent task={task} fontSize={fontSize} fontFamily={fontFamily} />
+    </div>
+  );
+};
+
+export const StandardTooltipContent: React.FC<{
+  task: Task;
+  fontSize: string;
+  fontFamily: string;
+}> = ({ task, fontSize, fontFamily }) => {
+  const style = {
+    fontSize,
+    fontFamily,
+  };
+  return (
+    <div className={cx(tooltipDefaultContainer)} style={style}>
+      <b style={{ fontSize: fontSize + 6 }}>
+        {task.name}: {getYmd(task.start)} ~ {getYmd(task.end)}
+      </b>
+      {task.end.getTime() - task.start.getTime() !== 0 && (
+        <p className={cx(tooltipDefaultContainerParagraph)}>{`Duration: ${~~(
+          (task.end.getTime() - task.start.getTime()) /
+          (1000 * 60 * 60 * 24)
+        )} day(s)`}</p>
+      )}
+
+      <p className={cx(tooltipDefaultContainerParagraph)}>{!!task.progress && `Progress: ${task.progress}%`}</p>
+    </div>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/other/vertical-scroll.tsx

@@ -0,0 +1,35 @@
+import React, { SyntheticEvent, useRef, useEffect } from 'react';
+import { cx } from '@emotion/css';
+import { verticalScroll } from './style';
+
+export const VerticalScroll: React.FC<{
+  scroll: number;
+  ganttHeight: number;
+  ganttFullHeight: number;
+  headerHeight: number;
+  rtl: boolean;
+  onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
+}> = ({ scroll, ganttHeight, ganttFullHeight, headerHeight, rtl, onScroll }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scroll;
+    }
+  }, [scroll]);
+
+  return (
+    <div
+      style={{
+        maxHeight: ganttHeight,
+        marginTop: headerHeight,
+        marginLeft: rtl ? '' : '-1rem',
+      }}
+      className={cx(verticalScroll)}
+      onScroll={onScroll}
+      ref={scrollRef}
+    >
+      <div style={{ height: ganttFullHeight, width: 1 }} />
+    </div>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-date-handle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+type BarDateHandleProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  barCornerRadius: number;
+  onMouseDown: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+};
+export const BarDateHandle: React.FC<BarDateHandleProps> = ({ x, y, width, height, barCornerRadius, onMouseDown }) => {
+  return (
+    <rect
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      className={'barHandle'}
+      ry={barCornerRadius}
+      rx={barCornerRadius}
+      onMouseDown={onMouseDown}
+    />
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-display.tsx

@@ -0,0 +1,74 @@
+import { cx } from '@emotion/css';
+import React from "react";
+import { barBackground } from './style';
+
+type BarDisplayProps = {
+  x: number;
+  y: number;
+  color?: string;
+  width: number;
+  height: number;
+  isSelected: boolean;
+  /* progress start point */
+  progressX: number;
+  progressWidth: number;
+  barCornerRadius: number;
+  styles: {
+    backgroundColor: string;
+    backgroundSelectedColor: string;
+    progressColor: string;
+    progressSelectedColor: string;
+  };
+  onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+};
+export const BarDisplay: React.FC<BarDisplayProps> = ({
+  x,
+  y,
+  color,
+  width,
+  height,
+  isSelected,
+  progressX,
+  progressWidth,
+  barCornerRadius,
+  styles,
+  onMouseDown,
+}) => {
+  const getProcessColor = () => {
+    if (color) {
+      return color;
+    }
+    return isSelected ? styles.progressSelectedColor : styles.progressColor;
+  };
+
+  const getBarColor = () => {
+    if (color) {
+      return color;
+    }
+    return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
+  };
+
+  return (
+    <g onMouseDown={onMouseDown}>
+      <rect
+        x={x}
+        width={width}
+        y={y}
+        height={height}
+        ry={barCornerRadius}
+        rx={barCornerRadius}
+        fill={getBarColor()}
+        className={cx(barBackground)}
+      />
+      <rect
+        x={progressX}
+        width={progressWidth}
+        y={y}
+        height={height}
+        ry={barCornerRadius}
+        rx={barCornerRadius}
+        fill={getProcessColor()}
+      />
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-progress-handle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type BarProgressHandleProps = {
+  progressPoint: string;
+  onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+};
+export const BarProgressHandle: React.FC<BarProgressHandleProps> = ({ progressPoint, onMouseDown }) => {
+  return <polygon className={'barHandle'} points={progressPoint} onMouseDown={onMouseDown} />;
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar-small.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { cx } from '@emotion/css';
+import { getProgressPoint } from "../../../helpers/bar-helper";
+import { BarDisplay } from "./bar-display";
+import { BarProgressHandle } from "./bar-progress-handle";
+import { TaskItemProps } from "../task-item";
+import { barWrapper } from './style';
+
+
+export const BarSmall: React.FC<TaskItemProps> = ({
+  task,
+  isProgressChangeable,
+  isDateChangeable,
+  onEventStart,
+  isSelected,
+}) => {
+  const progressPoint = getProgressPoint(
+    task.progressWidth + task.x1+10,
+    task.y,
+    task.height
+  );
+  return (
+    <g className={cx(barWrapper)} tabIndex={0}>
+      <BarDisplay
+        x={task.x1}
+        y={task.y}
+        width={task.x2 - task.x1}
+        height={task.height}
+        progressX={task.progressX}
+        progressWidth={task.progressWidth}
+        barCornerRadius={task.barCornerRadius}
+        styles={task.styles}
+        isSelected={isSelected}
+        onMouseDown={e => {
+          isDateChangeable && onEventStart("move", task, e);
+        }}
+      />
+      <g className="handleGroup">
+        {isProgressChangeable && (
+          <BarProgressHandle
+            progressPoint={progressPoint}
+            onMouseDown={e => {
+              onEventStart("progress", task, e);
+            }}
+          />
+        )}
+      </g>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/bar.tsx

@@ -0,0 +1,80 @@
+import { cx } from '@emotion/css';
+import React from "react";
+import { getProgressPoint } from "../../../helpers/bar-helper";
+import { TaskItemProps } from "../task-item";
+import { BarDateHandle } from "./bar-date-handle";
+import { BarDisplay } from "./bar-display";
+import { BarProgressHandle } from "./bar-progress-handle";
+import { barWrapper } from './style';
+
+
+export const Bar: React.FC<TaskItemProps> = ({
+  task,
+  isProgressChangeable,
+  isDateChangeable,
+  rtl,
+  onEventStart,
+  isSelected,
+}) => {
+  const progressPoint = getProgressPoint(
+    +!rtl * task.progressWidth + task.progressX,
+    task.y,
+    task.height
+  );
+  const handleHeight = task.height - 2;
+  return (
+    <g className={cx(barWrapper)} tabIndex={0}>
+      <BarDisplay
+        x={task.x1}
+        y={task.y}
+        color={task.color}
+        width={task.x2 - task.x1}
+        height={task.height}
+        progressX={task.progressX}
+        progressWidth={task.progressWidth}
+        barCornerRadius={task.barCornerRadius}
+        styles={task.styles}
+        isSelected={isSelected}
+        onMouseDown={e => {
+          isDateChangeable && onEventStart("move", task, e);
+        }}
+      />
+      <g className="handleGroup">
+        {isDateChangeable && (
+          <g>
+            {/* left */}
+            <BarDateHandle
+              x={task.x1 + 1}
+              y={task.y + 1}
+              width={task.handleWidth}
+              height={handleHeight}
+              barCornerRadius={task.barCornerRadius}
+              onMouseDown={e => {
+                onEventStart("start", task, e);
+              }}
+            />
+            {/* right */}
+            <BarDateHandle
+              x={task.x2 - task.handleWidth - 1}
+              y={task.y + 1}
+              width={task.handleWidth}
+              height={handleHeight}
+              barCornerRadius={task.barCornerRadius}
+              onMouseDown={e => {
+                onEventStart("end", task, e);
+              }}
+            />
+          </g>
+        )}
+        {isProgressChangeable && (
+          <BarProgressHandle
+            progressPoint={progressPoint}
+            onMouseDown={e => {
+              onEventStart("progress", task, e);
+            }}
+          />
+        )}
+      </g>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/bar/style.tsx

@@ -0,0 +1,23 @@
+import { css } from '@emotion/css';
+
+export const barWrapper = css`
+  cursor: pointer;
+  outline: none;
+  .barHandle{
+    fill: #ddd;
+    cursor: ew-resize;
+    opacity: 0;
+    visibility: hidden;
+  }
+  &:hover .barHandle {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
+
+
+export const barBackground = css`
+  user-select: none;
+  stroke-width: 0;
+  opacity: .6;
+`;

packages/core/client/src/schema-component/antd/gantt/components/task-item/milestone/milestone.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { cx } from '@emotion/css';
+import { TaskItemProps } from "../task-item";
+import { milestoneWrapper,milestoneBackground } from './style';
+
+export const Milestone: React.FC<TaskItemProps> = ({
+  task,
+  isDateChangeable,
+  onEventStart,
+  isSelected,
+}) => {
+  const transform = `rotate(45 ${task.x1 + task.height * 0.356} 
+    ${task.y + task.height * 0.85})`;
+  const getBarColor = () => {
+    return isSelected
+      ? task.styles.backgroundSelectedColor
+      : task.styles.backgroundColor;
+  };
+
+  return (
+    <g tabIndex={0} className={cx(milestoneWrapper)}>
+      <rect
+        fill={getBarColor()}
+        x={task.x1}
+        width={task.height}
+        y={task.y}
+        height={task.height}
+        rx={task.barCornerRadius}
+        ry={task.barCornerRadius}
+        transform={transform}
+        className={cx(milestoneBackground)}
+        onMouseDown={e => {
+          isDateChangeable && onEventStart("move", task, e);
+        }}
+      />
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/milestone/style.tsx

@@ -0,0 +1,11 @@
+
+import { css } from '@emotion/css';
+
+export const milestoneWrapper =css`
+  cursor: pointer;
+  outline: none;
+`
+
+export const milestoneBackground =css`
+  user-select: none;
+`

packages/core/client/src/schema-component/antd/gantt/components/task-item/project/project.tsx

@@ -0,0 +1,34 @@
+import { cx } from '@emotion/css';
+import React from 'react';
+import { TaskItemProps } from '../task-item';
+import { projectBackground, projectWrapper } from './style';
+
+export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
+  const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
+  const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
+  const projectWith = task.x2 - task.x1;
+
+  return (
+    <g tabIndex={0} className={cx(projectWrapper)}>
+      <rect
+        fill={task.color || barColor}
+        x={task.x1}
+        width={projectWith}
+        y={task.y}
+        height={task.height}
+        rx={task.barCornerRadius}
+        ry={task.barCornerRadius}
+        className={cx(projectBackground)}
+      />
+      <rect
+        x={task.progressX}
+        width={task.progressWidth}
+        y={task.y}
+        height={task.height}
+        ry={task.barCornerRadius}
+        rx={task.barCornerRadius}
+        fill={task.color || processColor}
+      />
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/components/task-item/project/style.tsx

@@ -0,0 +1,16 @@
+
+import { css } from '@emotion/css';
+
+export const projectWrapper =css `
+  cursor: pointer;
+  outline: none;
+`
+
+export const projectBackground =css`
+  user-select: none;
+  opacity: 0.6;
+`
+
+export const projectTop =css`
+  user-select: none;
+`

packages/core/client/src/schema-component/antd/gantt/components/task-item/style.tsx

@@ -0,0 +1,37 @@
+
+import { css } from '@emotion/css';
+
+export const barLabel =css`
+  fill: #fff;
+  text-anchor: middle;
+  font-weight: 400;
+  dominant-baseline: central;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+`
+export const projectLabel =css`
+  fill: #130d0d;
+  font-weight: 500;
+  font-size: 0.9em;
+  dominant-baseline: central;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+`
+export const barLabelOutside =css`
+  fill: #555;
+  text-anchor: start;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+`

packages/core/client/src/schema-component/antd/gantt/components/task-item/task-item.tsx

@@ -0,0 +1,109 @@
+import { cx } from '@emotion/css';
+import React, { useEffect, useRef, useState } from 'react';
+import { getYmd } from '../../helpers/other-helper';
+import { BarTask } from '../../types/bar-task';
+import { GanttContentMoveAction } from '../../types/gantt-task-actions';
+import { Bar } from './bar/bar';
+import { BarSmall } from './bar/bar-small';
+import { Milestone } from './milestone/milestone';
+import { Project } from './project/project';
+import { barLabel, barLabelOutside, projectLabel } from './style';
+
+export type TaskItemProps = {
+  task: BarTask;
+  arrowIndent: number;
+  taskHeight: number;
+  isProgressChangeable: boolean;
+  isDateChangeable: boolean;
+  isDelete: boolean;
+  isSelected: boolean;
+  rtl: boolean;
+  onEventStart: (
+    action: GanttContentMoveAction,
+    selectedTask: BarTask,
+    event?: React.MouseEvent | React.KeyboardEvent,
+  ) => any;
+};
+
+export const TaskItem: React.FC<TaskItemProps> = (props) => {
+  const { task, arrowIndent, isDelete, taskHeight, isSelected, rtl, onEventStart } = {
+    ...props,
+  };
+  const textRef = useRef<SVGTextElement>(null);
+  const [taskItem, setTaskItem] = useState<JSX.Element>(<div />);
+  const [isTextInside, setIsTextInside] = useState(true);
+  const isProjectBar = task.typeInternal === 'project';
+  useEffect(() => {
+    switch (task.typeInternal) {
+      case 'milestone':
+        setTaskItem(<Milestone {...props} />);
+        break;
+      case 'project':
+        setTaskItem(<Project {...props} />);
+        break;
+      case 'smalltask':
+        setTaskItem(<BarSmall {...props} />);
+        break;
+      default:
+        setTaskItem(<Bar {...props} />);
+        break;
+    }
+  }, [task, isSelected]);
+
+  useEffect(() => {
+    if (textRef.current) {
+      setIsTextInside(textRef.current.getBBox().width < task.x2 - task.x1);
+    }
+  }, [textRef, task]);
+
+  const getX = () => {
+    const width = task.x2 - task.x1;
+    const hasChild = task.barChildren.length > 0;
+    if (isTextInside) {
+      return task.x1 + width * 0.5;
+    }
+    if (rtl && textRef.current) {
+      return task.x1 - textRef.current.getBBox().width - arrowIndent * +hasChild - arrowIndent * 0.2;
+    } else {
+      return task.x1 + width + arrowIndent * +hasChild + arrowIndent * 0.2;
+    }
+  };
+  return (
+    <g
+      onKeyDown={(e) => {
+        switch (e.key) {
+          case 'Delete': {
+            if (isDelete) onEventStart('delete', task, e);
+            break;
+          }
+        }
+        e.stopPropagation();
+      }}
+      onMouseEnter={(e) => {
+        onEventStart('mouseenter', task, e);
+      }}
+      onMouseLeave={(e) => {
+        onEventStart('mouseleave', task, e);
+      }}
+      onDoubleClick={(e) => {
+        onEventStart('dblclick', task, e);
+      }}
+      onClick={(e) => {
+        onEventStart('click', task, e);
+      }}
+      onFocus={() => {
+        onEventStart('select', task);
+      }}
+    >
+      {taskItem}
+      <text
+        x={isProjectBar ? task.x1 : getX()}
+        y={isProjectBar ? task.y - 8 : task.y + taskHeight * 0.5}
+        className={isProjectBar ? cx(projectLabel) : isTextInside ? cx(barLabel) : cx(barLabel) && cx(barLabelOutside)}
+        ref={textRef}
+      >
+        {isProjectBar ? `${task.name}: ${getYmd(task.start)} ~ ${getYmd(task.end)}` : task.name}
+      </text>
+    </g>
+  );
+};

packages/core/client/src/schema-component/antd/gantt/context.ts

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+// export const GanttToolbarContext = createContext<any>(null);
+export const CalendarContext = createContext(null);
+export const DeleteEventContext = createContext(null);
+

packages/core/client/src/schema-component/antd/gantt/helpers/bar-helper.ts

@@ -0,0 +1,490 @@
+import { Task } from '../types/public-types';
+import { BarTask, TaskTypeInternal } from '../types/bar-task';
+import { BarMoveAction } from '../types/gantt-task-actions';
+
+export const convertToBarTasks = (
+  tasks: Task[],
+  dates: Date[],
+  columnWidth: number,
+  rowHeight: number,
+  taskHeight: number,
+  barCornerRadius: number,
+  handleWidth: number,
+  rtl: boolean,
+  barProgressColor: string,
+  barProgressSelectedColor: string,
+  barBackgroundColor: string,
+  barBackgroundSelectedColor: string,
+  projectProgressColor: string,
+  projectProgressSelectedColor: string,
+  projectBackgroundColor: string,
+  projectBackgroundSelectedColor: string,
+  milestoneBackgroundColor: string,
+  milestoneBackgroundSelectedColor: string,
+) => {
+  let barTasks = tasks.map((t, i) => {
+    return convertToBarTask(
+      t,
+      i,
+      dates,
+      columnWidth,
+      rowHeight,
+      taskHeight,
+      barCornerRadius,
+      handleWidth,
+      rtl,
+      barProgressColor,
+      barProgressSelectedColor,
+      barBackgroundColor,
+      barBackgroundSelectedColor,
+      projectProgressColor,
+      projectProgressSelectedColor,
+      projectBackgroundColor,
+      projectBackgroundSelectedColor,
+      milestoneBackgroundColor,
+      milestoneBackgroundSelectedColor,
+    );
+  });
+
+  // set dependencies
+  barTasks = barTasks.map((task) => {
+    const dependencies = task.dependencies || [];
+    for (let j = 0; j < dependencies.length; j++) {
+      const dependence = barTasks.findIndex((value) => value.id === dependencies[j]);
+      if (dependence !== -1) barTasks[dependence].barChildren.push(task);
+    }
+    return task;
+  });
+
+  return barTasks;
+};
+
+const convertToBarTask = (
+  task: Task,
+  index: number,
+  dates: Date[],
+  columnWidth: number,
+  rowHeight: number,
+  taskHeight: number,
+  barCornerRadius: number,
+  handleWidth: number,
+  rtl: boolean,
+  barProgressColor: string,
+  barProgressSelectedColor: string,
+  barBackgroundColor: string,
+  barBackgroundSelectedColor: string,
+  projectProgressColor: string,
+  projectProgressSelectedColor: string,
+  projectBackgroundColor: string,
+  projectBackgroundSelectedColor: string,
+  milestoneBackgroundColor: string,
+  milestoneBackgroundSelectedColor: string,
+): BarTask => {
+  let barTask: BarTask;
+  switch (task.type) {
+    case 'milestone':
+      barTask = convertToMilestone(
+        task,
+        index,
+        dates,
+        columnWidth,
+        rowHeight,
+        taskHeight,
+        barCornerRadius,
+        handleWidth,
+        milestoneBackgroundColor,
+        milestoneBackgroundSelectedColor,
+      );
+      break;
+    case 'project':
+      barTask = convertToBar(
+        task,
+        index,
+        dates,
+        columnWidth,
+        rowHeight,
+        taskHeight * 0.5,
+        barCornerRadius,
+        handleWidth,
+        rtl,
+        projectProgressColor,
+        projectProgressSelectedColor,
+        projectBackgroundColor,
+        projectBackgroundSelectedColor,
+      );
+      break;
+    default:
+      barTask = convertToBar(
+        task,
+        index,
+        dates,
+        columnWidth,
+        rowHeight,
+        taskHeight,
+        barCornerRadius,
+        handleWidth,
+        rtl,
+        barProgressColor,
+        barProgressSelectedColor,
+        barBackgroundColor,
+        barBackgroundSelectedColor,
+      );
+      break;
+  }
+  return barTask;
+};
+
+const convertToBar = (
+  task: Task,
+  index: number,
+  dates: Date[],
+  columnWidth: number,
+  rowHeight: number,
+  taskHeight: number,
+  barCornerRadius: number,
+  handleWidth: number,
+  rtl: boolean,
+  barProgressColor: string,
+  barProgressSelectedColor: string,
+  barBackgroundColor: string,
+  barBackgroundSelectedColor: string,
+): BarTask => {
+  let x1: number;
+  let x2: number;
+  if (rtl) {
+    x2 = taskXCoordinateRTL(task.start, dates, columnWidth);
+    x1 = taskXCoordinateRTL(task.end, dates, columnWidth);
+  } else {
+    x1 = taskXCoordinate(task.start, dates, columnWidth);
+    x2 = taskXCoordinate(task.end, dates, columnWidth);
+  }
+  let typeInternal: TaskTypeInternal = task.type;
+  if (typeInternal === 'task' && x2 - x1 < handleWidth * 2) {
+    typeInternal = 'smalltask';
+    x2 = x1 + handleWidth * 2;
+  }
+
+  const [progressWidth, progressX] = progressWithByParams(x1, x2, task.progress, rtl);
+  const y =
+    task.type === 'project'
+      ? taskYCoordinate(index, rowHeight, taskHeight) +8
+      : taskYCoordinate(index, rowHeight, taskHeight);
+  const hideChildren = task.type === 'project' ? task.hideChildren : undefined;
+
+  const styles = {
+    backgroundColor: barBackgroundColor,
+    backgroundSelectedColor: barBackgroundSelectedColor,
+    progressColor: barProgressColor,
+    progressSelectedColor: barProgressSelectedColor,
+    ...task.styles,
+  };
+  return {
+    ...task,
+    typeInternal,
+    x1,
+    x2,
+    y,
+    index,
+    progressX,
+    progressWidth,
+    barCornerRadius,
+    handleWidth,
+    hideChildren,
+    height: taskHeight,
+    barChildren: [],
+    styles,
+  };
+};
+
+const convertToMilestone = (
+  task: Task,
+  index: number,
+  dates: Date[],
+  columnWidth: number,
+  rowHeight: number,
+  taskHeight: number,
+  barCornerRadius: number,
+  handleWidth: number,
+  milestoneBackgroundColor: string,
+  milestoneBackgroundSelectedColor: string,
+): BarTask => {
+  const x = taskXCoordinate(task.start, dates, columnWidth);
+  const y = taskYCoordinate(index, rowHeight, taskHeight);
+
+  const x1 = x - taskHeight * 0.5;
+  const x2 = x + taskHeight * 0.5;
+
+  const rotatedHeight = taskHeight / 1.414;
+  const styles = {
+    backgroundColor: milestoneBackgroundColor,
+    backgroundSelectedColor: milestoneBackgroundSelectedColor,
+    progressColor: '',
+    progressSelectedColor: '',
+    ...task.styles,
+  };
+  return {
+    ...task,
+    end: task.start,
+    x1,
+    x2,
+    y,
+    index,
+    progressX: 0,
+    progressWidth: 0,
+    barCornerRadius,
+    handleWidth,
+    typeInternal: task.type,
+    progress: 0,
+    height: rotatedHeight,
+    hideChildren: undefined,
+    barChildren: [],
+    styles,
+  };
+};
+
+const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => {
+  const index = dates.findIndex((d) => d?.getTime() >= xDate?.getTime()) - 1;
+
+  const remainderMillis = xDate?.getTime() - dates[index]?.getTime();
+  const percentOfInterval = remainderMillis / (dates[index + 1]?.getTime() - dates[index]?.getTime());
+  const x = index * columnWidth + percentOfInterval * columnWidth;
+  return x;
+};
+const taskXCoordinateRTL = (xDate: Date, dates: Date[], columnWidth: number) => {
+  let x = taskXCoordinate(xDate, dates, columnWidth);
+  x += columnWidth;
+  return x;
+};
+const taskYCoordinate = (index: number, rowHeight: number, taskHeight: number) => {
+  const y = index * rowHeight + (rowHeight - taskHeight) / 2;
+  return y;
+};
+
+export const progressWithByParams = (taskX1: number, taskX2: number, progress: number, rtl: boolean) => {
+  const progressWidth = (taskX2 - taskX1) * progress * 0.01;
+  let progressX: number;
+  if (rtl) {
+    progressX = taskX2 - progressWidth;
+  } else {
+    progressX = taskX1;
+  }
+  return [progressWidth, progressX];
+};
+
+export const progressByProgressWidth = (progressWidth: number, barTask: BarTask) => {
+  const barWidth = barTask.x2 - barTask.x1;
+  const progressPercent = Math.round((progressWidth * 100) / barWidth);
+  if (progressPercent >= 100) return 100;
+  else if (progressPercent <= 0) return 0;
+  else return progressPercent;
+};
+
+const progressByX = (x: number, task: BarTask) => {
+  if (x >= task.x2) return 100;
+  else if (x <= task.x1) return 0;
+  else {
+    const barWidth = task.x2 - task.x1;
+    const progressPercent = Math.round(((x - task.x1) * 100) / barWidth);
+    return progressPercent;
+  }
+};
+const progressByXRTL = (x: number, task: BarTask) => {
+  if (x >= task.x2) return 0;
+  else if (x <= task.x1) return 100;
+  else {
+    const barWidth = task.x2 - task.x1;
+    const progressPercent = Math.round(((task.x2 - x) * 100) / barWidth);
+    return progressPercent;
+  }
+};
+
+export const getProgressPoint = (progressX: number, taskY: number, taskHeight: number) => {
+  const point = [
+    progressX - 5,
+    taskY + taskHeight,
+    progressX + 5,
+    taskY + taskHeight,
+    progressX,
+    taskY + taskHeight - 8.66,
+  ];
+  return point.join(',');
+};
+
+const startByX = (x: number, xStep: number, task: BarTask) => {
+  if (x >= task.x2 - task.handleWidth * 2) {
+    x = task.x2 - task.handleWidth * 2;
+  }
+  const steps = Math.round((x - task.x1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.x1 + additionalXValue;
+  return newX;
+};
+
+const endByX = (x: number, xStep: number, task: BarTask) => {
+  if (x <= task.x1 + task.handleWidth * 2) {
+    x = task.x1 + task.handleWidth * 2;
+  }
+  const steps = Math.round((x - task.x2) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.x2 + additionalXValue;
+  return newX;
+};
+
+const moveByX = (x: number, xStep: number, task: BarTask) => {
+  const steps = Math.round((x - task.x1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX1 = task.x1 + additionalXValue;
+  const newX2 = newX1 + task.x2 - task.x1;
+  return [newX1, newX2];
+};
+
+const dateByX = (x: number, taskX: number, taskDate: Date, xStep: number, timeStep: number) => {
+  let newDate = new Date(((x - taskX) / xStep) * timeStep + taskDate.getTime());
+  newDate = new Date(newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
+  return newDate;
+};
+
+/**
+ * Method handles event in real time(mousemove) and on finish(mouseup)
+ */
+export const handleTaskBySVGMouseEvent = (
+  svgX: number,
+  action: BarMoveAction,
+  selectedTask: BarTask,
+  xStep: number,
+  timeStep: number,
+  initEventX1Delta: number,
+  rtl: boolean,
+): { isChanged: boolean; changedTask: BarTask } => {
+  let result: { isChanged: boolean; changedTask: BarTask };
+  switch (selectedTask.type) {
+    case 'milestone':
+      result = handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta);
+      break;
+    default:
+      result = handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
+      break;
+  }
+  return result;
+};
+
+const handleTaskBySVGMouseEventForBar = (
+  svgX: number,
+  action: BarMoveAction,
+  selectedTask: BarTask,
+  xStep: number,
+  timeStep: number,
+  initEventX1Delta: number,
+  rtl: boolean,
+): { isChanged: boolean; changedTask: BarTask } => {
+  const changedTask: BarTask = { ...selectedTask };
+  let isChanged = false;
+  switch (action) {
+    case 'progress':
+      if (rtl) {
+        changedTask.progress = progressByXRTL(svgX, selectedTask);
+      } else {
+        changedTask.progress = progressByX(svgX, selectedTask);
+      }
+      isChanged = changedTask.progress !== selectedTask.progress;
+      if (isChanged) {
+        const [progressWidth, progressX] = progressWithByParams(
+          changedTask.x1,
+          changedTask.x2,
+          changedTask.progress,
+          rtl,
+        );
+        changedTask.progressWidth = progressWidth;
+        changedTask.progressX = progressX;
+      }
+      break;
+    case 'start': {
+      const newX1 = startByX(svgX, xStep, selectedTask);
+      changedTask.x1 = newX1;
+      isChanged = changedTask.x1 !== selectedTask.x1;
+      if (isChanged) {
+        if (rtl) {
+          changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+        } else {
+          changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+        }
+        const [progressWidth, progressX] = progressWithByParams(
+          changedTask.x1,
+          changedTask.x2,
+          changedTask.progress,
+          rtl,
+        );
+        changedTask.progressWidth = progressWidth;
+        changedTask.progressX = progressX;
+      }
+      break;
+    }
+    case 'end': {
+      const newX2 = endByX(svgX, xStep, selectedTask);
+      changedTask.x2 = newX2;
+      isChanged = changedTask.x2 !== selectedTask.x2;
+      if (isChanged) {
+        if (rtl) {
+          changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+        } else {
+          changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+        }
+        const [progressWidth, progressX] = progressWithByParams(
+          changedTask.x1,
+          changedTask.x2,
+          changedTask.progress,
+          rtl,
+        );
+        changedTask.progressWidth = progressWidth;
+        changedTask.progressX = progressX;
+      }
+      break;
+    }
+    case 'move': {
+      const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
+      isChanged = newMoveX1 !== selectedTask.x1;
+      if (isChanged) {
+        changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+        changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+        changedTask.x1 = newMoveX1;
+        changedTask.x2 = newMoveX2;
+        const [progressWidth, progressX] = progressWithByParams(
+          changedTask.x1,
+          changedTask.x2,
+          changedTask.progress,
+          rtl,
+        );
+        changedTask.progressWidth = progressWidth;
+        changedTask.progressX = progressX;
+      }
+      break;
+    }
+  }
+  return { isChanged, changedTask };
+};
+
+const handleTaskBySVGMouseEventForMilestone = (
+  svgX: number,
+  action: BarMoveAction,
+  selectedTask: BarTask,
+  xStep: number,
+  timeStep: number,
+  initEventX1Delta: number,
+): { isChanged: boolean; changedTask: BarTask } => {
+  const changedTask: BarTask = { ...selectedTask };
+  let isChanged = false;
+  switch (action) {
+    case 'move': {
+      const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
+      isChanged = newMoveX1 !== selectedTask.x1;
+      if (isChanged) {
+        changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+        changedTask.end = changedTask.start;
+        changedTask.x1 = newMoveX1;
+        changedTask.x2 = newMoveX2;
+      }
+      break;
+    }
+  }
+  return { isChanged, changedTask };
+};

packages/core/client/src/schema-component/antd/gantt/helpers/date-helper.ts

@@ -0,0 +1,203 @@
+import { Task, ViewMode } from '../types/public-types';
+
+const DateTimeFormat = Intl.DateTimeFormat;
+type DateTimeFormat = typeof DateTimeFormat;
+//@ts-ignore
+const DateTimeFormatOptions = Intl.DateTimeFormatOptions;
+type DateTimeFormatOptions = typeof DateTimeFormatOptions;
+type DateHelperScales = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
+
+const intlDTCache = {};
+export const getCachedDateTimeFormat = (
+  locString: string | string[],
+  opts: DateTimeFormatOptions = {},
+): DateTimeFormat => {
+  const key = JSON.stringify([locString, opts]);
+  let dtf = intlDTCache[key];
+  if (!dtf) {
+    dtf = new Intl.DateTimeFormat(locString, opts);
+    intlDTCache[key] = dtf;
+  }
+  return dtf;
+};
+
+export const addToDate = (date: Date, quantity: number, scale: DateHelperScales) => {
+  const newDate = new Date(
+    date.getFullYear() + (scale === 'year' ? quantity : 0),
+    date.getMonth() + (scale === 'month' ? quantity : 0),
+    date.getDate() + (scale === 'day' ? quantity : 0),
+    date.getHours() + (scale === 'hour' ? quantity : 0),
+    date.getMinutes() + (scale === 'minute' ? quantity : 0),
+    date.getSeconds() + (scale === 'second' ? quantity : 0),
+    date.getMilliseconds() + (scale === 'millisecond' ? quantity : 0),
+  );
+  return newDate;
+};
+
+export const startOfDate = (date: Date, scale: DateHelperScales) => {
+  const scores = ['millisecond', 'second', 'minute', 'hour', 'day', 'month', 'year'];
+
+  const shouldReset = (_scale: DateHelperScales) => {
+    const maxScore = scores.indexOf(scale);
+    return scores.indexOf(_scale) <= maxScore;
+  };
+  const newDate = new Date(
+    date?.getFullYear(),
+    shouldReset('year') ? 0 : date.getMonth(),
+    shouldReset('month') ? 1 : date.getDate(),
+    shouldReset('day') ? 0 : date.getHours(),
+    shouldReset('hour') ? 0 : date.getMinutes(),
+    shouldReset('minute') ? 0 : date.getSeconds(),
+    shouldReset('second') ? 0 : date.getMilliseconds(),
+  );
+  return newDate;
+};
+
+export const ganttDateRange = (tasks: Task[], viewMode: ViewMode, preStepsCount: number) => {
+  let newStartDate: Date = tasks[0]?.start || new Date();
+  let newEndDate: Date = tasks[0]?.start || new Date() ;
+  for (const task of tasks) {
+    if (task.start < newStartDate) {
+      newStartDate = task.start;
+    }
+    if (task.end > newEndDate) {
+      newEndDate = task.end;
+    }
+  }
+  switch (viewMode) {
+    case ViewMode.Year:
+      newStartDate = addToDate(newStartDate, -1, 'year');
+      newStartDate = startOfDate(newStartDate, 'year');
+      newEndDate = addToDate(newEndDate, 1, 'year');
+      newEndDate = startOfDate(newEndDate, 'year');
+      break;
+    case ViewMode.QuarterYear:
+      newStartDate = addToDate(newStartDate, -3, 'month');
+      newStartDate = startOfDate(newStartDate, 'month');
+      newEndDate = addToDate(newEndDate, 3, 'year');
+      newEndDate = startOfDate(newEndDate, 'year');
+      break;
+    case ViewMode.Month:
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'month');
+      newStartDate = startOfDate(newStartDate, 'month');
+      newEndDate = addToDate(newEndDate, 1, 'year');
+      newEndDate = startOfDate(newEndDate, 'year');
+      break;
+    case ViewMode.Week:
+      newStartDate = startOfDate(newStartDate, 'day');
+      newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, 'day');
+      newEndDate = startOfDate(newEndDate, 'day');
+      newEndDate = addToDate(newEndDate, 1.5, 'month');
+      break;
+    case ViewMode.Day:
+      newStartDate = startOfDate(newStartDate, 'day');
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
+      newEndDate = startOfDate(newEndDate, 'day');
+      newEndDate = addToDate(newEndDate, 19, 'day');
+      break;
+    case ViewMode.QuarterDay:
+      newStartDate = startOfDate(newStartDate, 'day');
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
+      newEndDate = startOfDate(newEndDate, 'day');
+      newEndDate = addToDate(newEndDate, 66, 'hour'); // 24(1 day)*3 - 6
+      break;
+    case ViewMode.HalfDay:
+      newStartDate = startOfDate(newStartDate, 'day');
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
+      newEndDate = startOfDate(newEndDate, 'day');
+      newEndDate = addToDate(newEndDate, 108, 'hour'); // 24(1 day)*5 - 12
+      break;
+    case ViewMode.Hour:
+      newStartDate = startOfDate(newStartDate, 'hour');
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'hour');
+      newEndDate = startOfDate(newEndDate, 'day');
+      newEndDate = addToDate(newEndDate, 1, 'day');
+      break;
+  }
+  return [newStartDate, newEndDate];
+};
+
+export const seedDates = (startDate: Date, endDate: Date, viewMode: ViewMode) => {
+  let currentDate: Date = new Date(startDate);
+  const dates: Date[] = [currentDate];
+  while (currentDate < endDate) {
+    switch (viewMode) {
+      case ViewMode.Year:
+        currentDate = addToDate(currentDate, 1, 'year');
+        break;
+      case ViewMode.QuarterYear:
+        currentDate = addToDate(currentDate, 3, 'month');
+        break;
+      case ViewMode.Month:
+        currentDate = addToDate(currentDate, 1, 'month');
+        break;
+      case ViewMode.Week:
+        currentDate = addToDate(currentDate, 7, 'day');
+        break;
+      case ViewMode.Day:
+        currentDate = addToDate(currentDate, 1, 'day');
+        break;
+      case ViewMode.HalfDay:
+        currentDate = addToDate(currentDate, 12, 'hour');
+        break;
+      case ViewMode.QuarterDay:
+        currentDate = addToDate(currentDate, 6, 'hour');
+        break;
+      case ViewMode.Hour:
+        currentDate = addToDate(currentDate, 1, 'hour');
+        break;
+    }
+    dates.push(currentDate);
+  }
+  return dates;
+};
+
+export const getLocaleMonth = (date: Date, locale: string) => {
+  let bottomValue = getCachedDateTimeFormat(locale, {
+    month: 'long',
+    //@ts-ignore
+  }).format(date);
+  bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
+  return bottomValue;
+};
+
+export const getLocalDayOfWeek = (date: Date, locale: string, format?: 'long' | 'short' | 'narrow' | undefined) => {
+  let bottomValue = getCachedDateTimeFormat(locale, {
+    weekday: format,
+    //@ts-ignore
+  }).format(date);
+  bottomValue = bottomValue.replace(bottomValue[0], bottomValue[0].toLocaleUpperCase());
+  return bottomValue;
+};
+
+/**
+ * Returns monday of current week
+ * @param date date for modify
+ */
+const getMonday = (date: Date) => {
+  const day = date.getDay();
+  const diff = date.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
+  return new Date(date.setDate(diff));
+};
+
+export const getWeekNumberISO8601 = (date: Date) => {
+  const tmpDate = new Date(date.valueOf());
+  const dayNumber = (tmpDate.getDay() + 6) % 7;
+  tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
+  const firstThursday = tmpDate.valueOf();
+  tmpDate.setMonth(0, 1);
+  if (tmpDate.getDay() !== 4) {
+    tmpDate.setMonth(0, 1 + ((4 - tmpDate.getDay() + 7) % 7));
+  }
+  const weekNumber = (1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)).toString();
+
+  if (weekNumber.length === 1) {
+    return `0${weekNumber}`;
+  } else {
+    return weekNumber;
+  }
+};
+
+export const getDaysInMonth = (month: number, year: number) => {
+  return new Date(year, month + 1, 0).getDate();
+};

packages/core/client/src/schema-component/antd/gantt/helpers/other-helper.ts

@@ -0,0 +1,61 @@
+import { BarTask } from '../types/bar-task';
+import { Task } from '../types/public-types';
+
+export function isKeyboardEvent(
+  event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent,
+): event is React.KeyboardEvent {
+  return (event as React.KeyboardEvent).key !== undefined;
+}
+
+export function isMouseEvent(
+  event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent,
+): event is React.MouseEvent {
+  return (event as React.MouseEvent).clientX !== undefined;
+}
+
+export function isBarTask(task: Task | BarTask): task is BarTask {
+  return (task as BarTask).x1 !== undefined;
+}
+
+export function removeHiddenTasks(tasks: Task[]) {
+  const groupedTasks = tasks.filter((t) => t.hideChildren && t.type === 'project');
+  if (groupedTasks.length > 0) {
+    for (let i = 0; groupedTasks.length > i; i++) {
+      const groupedTask = groupedTasks[i];
+      const children = getChildren(tasks, groupedTask);
+      tasks = tasks.filter((t) => children.indexOf(t) === -1);
+    }
+  }
+  return tasks;
+}
+
+function getChildren(taskList: Task[], task: Task) {
+  let tasks: Task[] = [];
+  if (task.type !== 'project') {
+    tasks = taskList.filter((t) => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
+  } else {
+    tasks = taskList.filter((t) => t.project && t.project === task.id);
+  }
+  var taskChildren: Task[] = [];
+  tasks.forEach((t) => {
+    taskChildren.push(...getChildren(taskList, t));
+  });
+  tasks = tasks.concat(tasks, taskChildren);
+  return tasks;
+}
+
+export const sortTasks = (taskA: Task, taskB: Task) => {
+  const orderA = taskA.displayOrder || Number.MAX_VALUE;
+  const orderB = taskB.displayOrder || Number.MAX_VALUE;
+  if (orderA > orderB) {
+    return 1;
+  } else if (orderA < orderB) {
+    return -1;
+  } else {
+    return 0;
+  }
+};
+
+export const getYmd = (date: Date) => {
+  return date.getFullYear() + '/' + `${date.getMonth() + 1}` + '/' + date.getDate();
+};

packages/core/client/src/schema-component/antd/gantt/index.ts

@@ -0,0 +1,15 @@
+import { ActionBar } from '../action';
+import { Gantt } from './components/gantt/gantt';
+import { GanttDesigner } from './Gantt.Designer';
+import { ViewMode } from './types/public-types';
+import {Event} from './components/gantt/Event';
+
+Gantt.ActionBar = ActionBar;
+
+Gantt.ViewMode = ViewMode;
+Gantt.Designer = GanttDesigner;
+Gantt.Event = Event;
+
+// const GanttV2 = Gantt;
+
+export { Gantt };

packages/core/client/src/schema-component/antd/gantt/test/date-helper.test.tsx

@@ -0,0 +1,73 @@
+import {
+  seedDates,
+  addToDate,
+  getWeekNumberISO8601,
+} from "../helpers/date-helper";
+import { ViewMode } from "../types/public-types";
+
+describe("seed date", () => {
+  test("daily", () => {
+    expect(
+      seedDates(new Date(2020, 5, 28), new Date(2020, 6, 2), ViewMode.Day)
+    ).toEqual([
+      new Date(2020, 5, 28),
+      new Date(2020, 5, 29),
+      new Date(2020, 5, 30),
+      new Date(2020, 6, 1),
+      new Date(2020, 6, 2),
+    ]);
+  });
+
+  test("weekly", () => {
+    expect(
+      seedDates(new Date(2020, 5, 28), new Date(2020, 6, 19), ViewMode.Week)
+    ).toEqual([
+      new Date(2020, 5, 28),
+      new Date(2020, 6, 5),
+      new Date(2020, 6, 12),
+      new Date(2020, 6, 19),
+    ]);
+  });
+
+  test("monthly", () => {
+    expect(
+      seedDates(new Date(2020, 5, 28), new Date(2020, 6, 19), ViewMode.Month)
+    ).toEqual([new Date(2020, 5, 28), new Date(2020, 6, 28)]);
+  });
+
+  test("quarterly", () => {
+    expect(
+      seedDates(
+        new Date(2020, 5, 28),
+        new Date(2020, 5, 29),
+        ViewMode.QuarterDay
+      )
+    ).toEqual([
+      new Date(2020, 5, 28, 0, 0),
+      new Date(2020, 5, 28, 6, 0),
+      new Date(2020, 5, 28, 12, 0),
+      new Date(2020, 5, 28, 18, 0),
+      new Date(2020, 5, 29, 0, 0),
+    ]);
+  });
+});
+
+describe("add to date", () => {
+  test("add month", () => {
+    expect(addToDate(new Date(2020, 0, 1), 40, "month")).toEqual(
+      new Date(2023, 4, 1)
+    );
+  });
+
+  test("add day", () => {
+    expect(addToDate(new Date(2020, 0, 1), 40, "day")).toEqual(
+      new Date(2020, 1, 10)
+    );
+  });
+});
+
+test("get week number", () => {
+  expect(getWeekNumberISO8601(new Date(2019, 11, 31))).toEqual("01");
+  expect(getWeekNumberISO8601(new Date(2021, 0, 1))).toEqual("53");
+  expect(getWeekNumberISO8601(new Date(2020, 6, 20))).toEqual("30");
+});

packages/core/client/src/schema-component/antd/gantt/test/gant.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Gantt } from "../index";
+
+describe("gantt", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    const root = createRoot(div);
+    root.render(
+      <Gantt
+        tasks={[
+          {
+            start: new Date(2020, 0, 1),
+            end: new Date(2020, 2, 2),
+            name: "Redesign website",
+            id: "Task 0",
+            progress: 45,
+            type: "task",
+          },
+        ]}
+      />
+    );
+  });
+});

packages/core/client/src/schema-component/antd/gantt/types/bar-task.ts

@@ -0,0 +1,24 @@
+import { Task, TaskType } from "./public-types";
+
+export interface BarTask extends Task {
+  index: number;
+  typeInternal: TaskTypeInternal;
+  x1: number;
+  x2: number;
+  y: number;
+  height: number;
+  progressX: number;
+  progressWidth: number;
+  barCornerRadius: number;
+  handleWidth: number;
+  barChildren: BarTask[];
+  color?: string;
+  styles: {
+    backgroundColor: string;
+    backgroundSelectedColor: string;
+    progressColor: string;
+    progressSelectedColor: string;
+  };
+}
+
+export type TaskTypeInternal = TaskType | "smalltask";

packages/core/client/src/schema-component/antd/gantt/types/date-setup.ts

@@ -0,0 +1,6 @@
+import { ViewMode } from "./public-types";
+
+export interface DateSetup {
+  dates: Date[];
+  viewMode: ViewMode;
+}

packages/core/client/src/schema-component/antd/gantt/types/gantt-task-actions.ts

@@ -0,0 +1,18 @@
+import { BarTask } from "./bar-task";
+
+export type BarMoveAction = "progress" | "end" | "start" | "move";
+export type GanttContentMoveAction =
+  | "mouseenter"
+  | "mouseleave"
+  | "delete"
+  | "dblclick"
+  | "click"
+  | "select"
+  | ""
+  | BarMoveAction;
+
+export type GanttEvent = {
+  changedTask?: BarTask;
+  originalSelectedTask?: BarTask;
+  action: GanttContentMoveAction;
+};

packages/core/client/src/schema-component/antd/gantt/types/public-types.ts

@@ -0,0 +1,145 @@
+export enum ViewMode {
+  Hour = "hour",
+  QuarterDay = "quarterDay",
+  HalfDay = "halfDay",
+  Day = "day",
+  /** ISO-8601 week */
+  Week = "week",
+  Month = "month",
+  QuarterYear = "quarterYear",
+  Year = "year",
+}
+export type TaskType = "task" | "milestone" | "project";
+export interface Task {
+  id: string;
+  type: TaskType;
+  name: string;
+  start: Date;
+  end: Date;
+  /**
+   * From 0 to 100
+   */
+  progress: number;
+  styles?: {
+    backgroundColor?: string;
+    backgroundSelectedColor?: string;
+    progressColor?: string;
+    progressSelectedColor?: string;
+  };
+  isDisabled?: boolean;
+  project?: string;
+  dependencies?: string[];
+  hideChildren?: boolean;
+  displayOrder?: number;
+}
+
+export interface EventOption {
+  /**
+   * Time step value for date changes.
+   */
+  timeStep?: number;
+  /**
+   * Invokes on bar select on unselect.
+   */
+  onSelect?: (task: Task, isSelected: boolean) => void;
+  /**
+   * Invokes on bar double click.
+   */
+  onDoubleClick?: (task: Task) => void;
+  /**
+   * Invokes on bar click.
+   */
+  onClick?: (task: Task) => void;
+  /**
+   * Invokes on end and start time change. Chart undoes operation if method return false or error.
+   */
+  onDateChange?: (
+    task: Task,
+    children: Task[]
+  ) => void | boolean | Promise<void> | Promise<boolean>;
+  /**
+   * Invokes on progress change. Chart undoes operation if method return false or error.
+   */
+  onProgressChange?: (
+    task: Task,
+    children: Task[]
+  ) => void | boolean | Promise<void> | Promise<boolean>;
+  /**
+   * Invokes on delete selected task. Chart undoes operation if method return false or error.
+   */
+  onDelete?: (task: Task) => void | boolean | Promise<void> | Promise<boolean>;
+  /**
+   * Invokes on expander on task list
+   */
+  onExpanderClick?: (task: Task) => void;
+}
+
+export interface DisplayOption {
+  viewMode?: ViewMode;
+  viewDate?: Date;
+  preStepsCount?: number;
+  /**
+   * Specifies the month name language. Able formats: ISO 639-2, Java Locale
+   */
+  locale?: string;
+  rtl?: boolean;
+}
+
+export interface StylingOption {
+  headerHeight?: number;
+  columnWidth?: number;
+  listCellWidth?: string;
+  rowHeight?: number;
+  ganttHeight?: number;
+  barCornerRadius?: number;
+  handleWidth?: number;
+  fontFamily?: string;
+  fontSize?: string;
+  /**
+   * How many of row width can be taken by task.
+   * From 0 to 100
+   */
+  barFill?: number;
+  barProgressColor?: string;
+  barProgressSelectedColor?: string;
+  barBackgroundColor?: string;
+  barBackgroundSelectedColor?: string;
+  projectProgressColor?: string;
+  projectProgressSelectedColor?: string;
+  projectBackgroundColor?: string;
+  projectBackgroundSelectedColor?: string;
+  milestoneBackgroundColor?: string;
+  milestoneBackgroundSelectedColor?: string;
+  arrowColor?: string;
+  arrowIndent?: number;
+  todayColor?: string;
+  TooltipContent?: React.FC<{
+    task: Task;
+    fontSize: string;
+    fontFamily: string;
+  }>;
+  TaskListHeader?: React.FC<{
+    headerHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+  }>;
+  TaskListTable?: React.FC<{
+    rowHeight: number;
+    rowWidth: string;
+    fontFamily: string;
+    fontSize: string;
+    locale: string;
+    tasks: Task[];
+    selectedTaskId: string;
+    /**
+     * Sets selected task by id
+     */
+    setSelectedTask: (taskId: string) => void;
+    onExpanderClick: (task: Task) => void;
+  }>;
+}
+
+export interface GanttProps extends EventOption, DisplayOption, StylingOption {
+  tasks: Task[];
+}

packages/core/client/src/schema-component/antd/index.ts

@@ -40,4 +40,5 @@ export * from './time-picker';
 export * from './tree-select';
 export * from './upload';
 export * from './variable';
+export * from './gantt'
 import './index.less';

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -167,6 +167,7 @@ export const Table: any = observer((props: any) => {
     rowSelection,
     rowKey,
     required,
+    onExpand,
     ...others
   } = { ...others1, ...others2 } as any;
   const schema = useFieldSchema();
@@ -209,11 +210,6 @@ export const Table: any = observer((props: any) => {
       return;
     });
   }, [requiredValidator]);
-  // useEffect(() => {
-  //   const data = field.value;
-  //   field.value = null;
-  //   field.value = data;
-  // }, [treeTable]);
 
   useEffect(() => {
     if (treeTable !== false) {
@@ -227,7 +223,7 @@ export const Table: any = observer((props: any) => {
     } else {
       setExpandesKeys([]);
     }
-  }, [expandFlag]);
+  }, [expandFlag, allIncludesChildren]);
 
   const components = useMemo(() => {
     return {
@@ -332,6 +328,8 @@ export const Table: any = observer((props: any) => {
             const pageSize = props?.pagination?.pageSize || 20;
             if (current) {
               index = index + (current - 1) * pageSize + 1;
+            } else {
+              index = index + 1;
             }
             if (record.__index) {
               index = extractIndex(record.__index);
@@ -490,6 +488,7 @@ export const Table: any = observer((props: any) => {
             onExpand: (flag, record) => {
               const newKeys = flag ? [...expandedKeys, record.id] : expandedKeys.filter((i) => record.id !== i);
               setExpandesKeys(newKeys);
+              onExpand?.(flag, record);
             },
             expandedRowKeys: expandedKeys,
           }}

packages/core/client/src/schema-initializer/buttons/BlockInitializers.tsx

@@ -42,6 +42,12 @@ export const BlockInitializers = {
           title: '{{t("Kanban")}}',
           component: 'KanbanBlockInitializer',
         },
+        {
+          key: 'Gantt',
+          type: 'item',
+          title: '{{t("Gantt")}}',
+          component: 'GanttBlockInitializer',
+        },
       ],
     },
     {

packages/core/client/src/schema-initializer/buttons/GanttActionInitializers.tsx

@@ -0,0 +1,8 @@
+import { TableActionInitializers } from './TableActionInitializers';
+// 甘特图区块action配置
+export const GanttActionInitializers = {
+  ...TableActionInitializers,
+  // items: TableActionInitializers.items.filter((v) => {
+  //   return v.component !== 'ActionBarAssociationFilterAction';
+  // }),
+};

packages/core/client/src/schema-initializer/buttons/TableActionInitializers.tsx

@@ -96,14 +96,16 @@ export const TableActionInitializers = {
       },
       visible: () => {
         const collection = useCollection();
-        return (collection as any).template !== 'view';
+        const schema = useFieldSchema();
+        return (collection as any).template !== 'view' && schema['x-initializer'] !== 'GanttActionInitializers';
       },
     },
     {
       type: 'divider',
       visible: () => {
         const collection = useCollection();
-        return (collection as any).template !== 'view';
+        const schema = useFieldSchema();
+        return (collection as any).template !== 'view' && schema['x-initializer'] !== 'GanttActionInitializers';
       },
     },
     {

packages/core/client/src/schema-initializer/buttons/index.ts

@@ -20,5 +20,6 @@ export * from './TableActionInitializers';
 export * from './TableColumnInitializers';
 export * from './TableSelectorInitializers';
 export * from './TabPaneInitializers';
+export * from './GanttActionInitializers';
 // association filter
 export * from '../../schema-component/antd/association-filter/AssociationFilter';

packages/core/client/src/schema-initializer/items/GanttBlockInitializer.tsx

@@ -0,0 +1,119 @@
+import React, { useContext } from 'react';
+import { FormDialog, FormLayout } from '@formily/antd';
+import { FormOutlined } from '@ant-design/icons';
+import { SchemaOptionsContext } from '@formily/react';
+import { useTranslation } from 'react-i18next';
+
+import { useCollectionManager } from '../../collection-manager';
+import { SchemaComponent, SchemaComponentOptions } from '../../schema-component';
+import { createGanttBlockSchema } from '../utils';
+import { DataBlockInitializer } from './DataBlockInitializer';
+
+export const GanttBlockInitializer = (props) => {
+  const { insert } = props;
+  const { t } = useTranslation();
+  const { getCollectionFields } = useCollectionManager();
+  const options = useContext(SchemaOptionsContext);
+  return (
+    <DataBlockInitializer
+      {...props}
+      componentType={'Gantt'}
+      icon={<FormOutlined />}
+      onCreateBlockSchema={async ({ item }) => {
+        const collectionFields = getCollectionFields(item.name);
+        const stringFields = collectionFields
+          ?.filter((field) => field.type === 'string')
+          ?.map((field) => {
+            return {
+              label: field?.uiSchema?.title,
+              value: field.name,
+            };
+          });
+        const dateFields = collectionFields
+          ?.filter((field) => field.type === 'date')
+          ?.map((field) => {
+            return {
+              label: field?.uiSchema?.title,
+              value: field.name,
+            };
+          });
+        const numberFields = collectionFields
+          ?.filter((field) => field.type === 'float')
+          ?.map((field) => {
+            return {
+              label: field?.uiSchema?.title,
+              value: field.name,
+            };
+          });
+        const values = await FormDialog(t('Create gantt block'), () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+              <FormLayout layout={'vertical'}>
+                <SchemaComponent
+                  schema={{
+                    properties: {
+                      title: {
+                        title: t('Title field'),
+                        enum: stringFields,
+                        required: true,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      start: {
+                        title: t('Start date field'),
+                        enum: dateFields,
+                        required: true,
+                        default: 'createdAt',
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      end: {
+                        title: t('End date field'),
+                        enum: dateFields,
+                        required: true,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      progress: {
+                        title: t('Progress field'),
+                        enum: numberFields,
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                      range: {
+                        title: t('Time scale'),
+                        enum: [
+                          { label: '{{t("Hour")}}', value: 'hour', color: 'orange' },
+                          { label: '{{t("Quarter of day")}}', value: 'quarterDay', color: 'default' },
+                          { label: '{{t("Half of day")}}', value: 'halfDay', color: 'blue' },
+                          { label: '{{t("Day")}}', value: 'day', color: 'yellow' },
+                          { label: '{{t("Week")}}', value: 'week', color: 'pule' },
+                          { label: '{{t("Month")}}', value: 'month', color: 'green' },
+                          { label: '{{t("Year")}}', value: 'year', color: 'green' },
+                          { label: '{{t("QuarterYear")}}', value: 'quarterYear', color: 'red' },
+                        ],
+                        default: 'day',
+                        'x-component': 'Select',
+                        'x-decorator': 'FormItem',
+                      },
+                    },
+                  }}
+                />
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        }).open({
+          initialValues: {},
+        });
+        insert(
+          createGanttBlockSchema({
+            collection: item.name,
+            fieldNames: {
+              ...values,
+            },
+          }),
+        );
+      }}
+    />
+  );
+};

packages/core/client/src/schema-initializer/items/index.tsx

@@ -28,6 +28,7 @@ export * from './FilterCollapseBlockInitializer';
 export * from './FilterFormBlockInitializer';
 export * from './FormBlockInitializer';
 export * from './G2PlotInitializer';
+export * from './GanttBlockInitializer';
 export * from './InitializerWithSwitch';
 export * from './KanbanBlockInitializer';
 export * from './MarkdownBlockInitializer';

packages/core/client/src/schema-initializer/utils.ts

@@ -1372,6 +1372,135 @@ export const createCalendarBlockSchema = (options) => {
   return schema;
 };
 
+export const createGanttBlockSchema = (options) => {
+  const { collection, resource, fieldNames, ...others } = options;
+  const schema: ISchema = {
+    type: 'void',
+    'x-acl-action': `${resource || collection}:list`,
+    'x-decorator': 'GanttBlockProvider',
+    'x-decorator-props': {
+      collection: collection,
+      resource: resource || collection,
+      action: 'list',
+      fieldNames: {
+        id: 'id',
+        ...fieldNames,
+      },
+      params: {
+        paginate: false,
+      },
+      ...others,
+    },
+    'x-designer': 'Gantt.Designer',
+    'x-component': 'CardItem',
+    properties: {
+      [uid()]: {
+        type: 'void',
+        'x-component': 'Gantt',
+        'x-component-props': {
+          useProps: '{{ useGanttBlockProps }}',
+        },
+        properties: {
+          toolBar: {
+            type: 'void',
+            'x-component': 'ActionBar',
+            'x-component-props': {
+              style: {
+                marginBottom: 24,
+              },
+            },
+            'x-initializer': 'GanttActionInitializers',
+            properties: {},
+          },
+          table: {
+            type: 'array',
+            'x-decorator': 'div',
+            'x-decorator-props': {
+              style: {
+                float: 'left',
+                maxWidth: '35%',
+              },
+            },
+
+            'x-initializer': 'TableColumnInitializers',
+            'x-component': 'TableV2',
+            'x-component-props': {
+              rowKey: 'id',
+              rowSelection: {
+                type: 'checkbox',
+              },
+              useProps: '{{ useTableBlockProps }}',
+              pagination: false,
+            },
+            properties: {
+              actions: {
+                type: 'void',
+                title: '{{ t("Actions") }}',
+                'x-action-column': 'actions',
+                'x-decorator': 'TableV2.Column.ActionBar',
+                'x-component': 'TableV2.Column',
+                'x-designer': 'TableV2.ActionColumnDesigner',
+                'x-initializer': 'TableActionColumnInitializers',
+                properties: {
+                  actions: {
+                    type: 'void',
+                    'x-decorator': 'DndContext',
+                    'x-component': 'Space',
+                    'x-component-props': {
+                      split: '|',
+                    },
+                    properties: {},
+                  },
+                },
+              },
+            },
+          },
+          detail: {
+            type: 'void',
+            'x-component': 'Gantt.Event',
+            properties: {
+              drawer: {
+                type: 'void',
+                'x-component': 'Action.Drawer',
+                'x-component-props': {
+                  className: 'nb-action-popup',
+                },
+                title: '{{ t("View record") }}',
+                properties: {
+                  tabs: {
+                    type: 'void',
+                    'x-component': 'Tabs',
+                    'x-component-props': {},
+                    'x-initializer': 'TabPaneInitializers',
+                    properties: {
+                      tab1: {
+                        type: 'void',
+                        title: '{{t("Details")}}',
+                        'x-component': 'Tabs.TabPane',
+                        'x-designer': 'Tabs.Designer',
+                        'x-component-props': {},
+                        properties: {
+                          grid: {
+                            type: 'void',
+                            'x-component': 'Grid',
+                            'x-initializer': 'RecordBlockInitializers',
+                            properties: {},
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+  console.log(JSON.stringify(schema, null, 2));
+  return schema;
+};
 export const createKanbanBlockSchema = (options) => {
   const { collection, resource, groupField, ...others } = options;
   const schema: ISchema = {