Our state of the art Gantt chart


Post by kenken9301680 »

I want when I launch the app the scroll bar will go straight to the current date, I used

 visibleDate: {
    date: new Date(),
    block: 'start',
  },

but it only focuses properly to the date that coincides with the current day (which is the 15th), but the month does not coincide with the current month

Attachments
14.png
14.png (42.26 KiB) Viewed 469 times

Post by mats »

We could not reproduce this issue. To assist you with your question, please provide more details including a runnable test case (as described in our support guidelines).

To get the fastest possible support, provide a simple test case based on our standard examples.


Post by kenken9301680 »

You can try my code to reproduce it

// import './lib/ColorField';
// import './lib/FilesTab';

// Bryntum umd lite bundle comes without polyfills to support Angular's zone.js
import {
  Grid,
  ProjectModel,
  TaskModel,
  Gantt,
  Tooltip,
} from '@bryntum/gantt/gantt.lite.umd.js';

class MyModel extends TaskModel {
  static get fields() {
    return [
      // { name : 'deadline', type : 'date' },
      { name: 'color' },
    ];
  }
}

const project = new ProjectModel({
  taskModelClass: MyModel as unknown as TaskModel,
  taskStore: {
    data: [
      {
        id: null,
        name: 'dsfdsf',

    expanded: true,
    children: [
      {
        id: 11,
        name: 'sdfdsf',
        manuallyScheduled: true,
        startDate: '2021-04-09',
        duration: 1,
        color: '#D8D8D8',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    id: null,
    name: 'sdfdsf',

    expanded: true,
    children: [
      {
        id: 21,
        name: 'jhkhk',
        manuallyScheduled: true,
        startDate: '2021-06-01',
        duration: 5,
        color: '#D8D8D8',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    id: null,
    name: 'hjhkh',

    expanded: true,
    rollup: true,
    children: [
      {
        id: 31,
        name: 'gggggggg',
        manuallyScheduled: true,
        startDate: '2021-06-01',
        duration: 10,
        color: '#D8D8D8',
        processId: '123',
        isTaskAddtional: false,
      },
      {
        id: 32,
        name: 'jjjjjjjjjj',
        manuallyScheduled: true,
        startDate: '2021-06-01',
        duration: 4,
        color: '#D8D8D8',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    id: null,
    name: 'rrrrrrrrr',

    expanded: true,
    rollup: true,
    children: [
      {
        id: 51,
        name: 'hhhhhhh',
        manuallyScheduled: true,
        startDate: '2021-06-14',
        duration: 9,
        color: '#000000',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    id: null,
    name: 'ppppppppp',

    expanded: true,
    rollup: true,
    children: [
      {
        id: '71',
        name: '木完日',
        manuallyScheduled: true,
        startDate: '2021-06-04',

        duration: 2,
        color: '#000000',
        processId: '123',
        isTaskAddtional: false,
      },
      {
        id: '72',
        name: 'dgfdgfdg',
        manuallyScheduled: true,
        startDate: '2021-06-04',
        duration: 2,
        color: '#1882CD',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    id: null,
    name: 'hhhhhhhh',

    expanded: true,
    rollup: true,
    children: [
      {
        id: '91',
        name: '66666666666',
        manuallyScheduled: true,
        startDate: '2021-06-29',
        duration: 3,
        resizable: true,
        draggable: true,
        color: '#FF5A5A',
        processId: '123',
        isTaskAddtional: false,
      },
    ],
  },
  {
    cls: 'fooHiddenTask',
    color: '#E15A5A',
    draggable: true,
    duration: 1,

    id: '600',
    isInChargeTask: undefined,
    isTaskAddtional: true,
    manuallyScheduled: true,
    name: 'Material 3',
    processId: null,
    resizable: false,
    startDate: '2021-06-16',
    taskId: 5,
    type: 2,
  },
],
  },
  // autoLoad: true,
});

export default {
  columns: [{ type: 'name', field: 'name', text: '', width: 150 }],
  emptyText: 'データ無し',

  visibleDate: {
    date: new Date(),
    block: 'start',
  },

  zoomOnTimeAxisDoubleClick: false,
  subGridConfigs: {
    locked: { collapsed: false },
  },
  features: {
    sort: false,
    pdfExport: {
      exportServer: 'https://localhost:8080',
      translateURLsToAbsolute: 'https://localhost:8080',
      orientation: 'landscape',
      paperFormat: 'A3',
      exportMask: '処理中...',
      exporterType: 'multipage',
      openAfterExport: false,
    },
    rowReorder: false,

taskTooltip: false,
cellEdit: false,
taskDrag: {
  showTooltip: false,
  disabled: true,
},
taskResize: {
  showTooltip: false,
  disabled: true,
},

taskMenu: false,
taskEdit: false,

timeRanges: {
  // showCurrentTimeLine: {
  //   name: "今日",
  // },
  showCurrentTimeLine: true,
},

   
viewPreset: {
  base: 'weekAndDay',
  tickWidth: 52,
  headers: [
    {
      unit: 'month',
      dateFormat: 'YYYY年 MMM',
    },

    {
      unit: 'day',
      dateFormat: 'ddd',
    },
    {
      unit: 'day',
      dateFormat: 'D',
    },
  ],
},

eventColor: null,

dependencies: false,
  },
  taskRenderer: ({ taskRecord, renderData }) => {
    if (taskRecord.color) {
      renderData.style += `background-color:${taskRecord.color}`;
    }

if (taskRecord.isLeaf && !taskRecord.isMilestone) {
  return taskRecord.name;
}
  },
  project,
};

Post by saki »

I can see visibleDate in the config file. Have you also added it to your template (app.component.html)?

<bryntum-gantt
    [visibleDate]="ganttConfig.visibleDate"
    // etc.

If this does not resolve the problem we really need a simple showcase that we can run, investigate and debug locally.


Post by kenken9301680 »

i also added in app.component.html like your way. You can create a simple project and replace the gantt.config.ts file that I sent above and run it, you will see that error.


Post by saki »

I would ask you to put together your showcase, believe me, it will be most effective. Take one of our demos and adjust it to demonstrate the problem you're facing.


Post Reply