JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › Gantt date issue

Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 14, 2021 at 7:46 pm #101495
    Anonymous
    Inactive

    Hi,
    I have a problem with the dateEnd of the task, this is my data before setting it like Gantt dataSource:
    [{“id”:”001618″,”type”:”project”,”synchronized”:true,”label”:”test Project”,”expanded”:true,”progress”:74.3,”dateStart”:”2019/03/25″,”dateEnd”:”2020/10/13″,”dragProject”:false,”tasks”:[{“id”:”17″,”type”:”task”,”synchronized”:false,”label”:”test Task 1″,”expanded”:false,”progress”:85,”connections”:[{“target”:”59″,”type”:1},{“target”:”62″,”type”:1}],”dateStart”:”2020/04/01″,”dateEnd”:”2020/04/03″,”duration”:15,”resources”:[{“id”:”00050″,”label”:”Matt”,”capacity”:24,”maxCapacity”:24},{“id”:”00012″,”label”:”Andrew”,”capacity”:24,”maxCapacity”:24},],”disableResources”:false,”description”:”test”},{“id”:”18″,”type”:”task”,”synchronized”:false,”label”:”test 2 “,”expanded”:false,”progress”:20,”connections”:[],”dateStart”:”2019/03/25″,”dateEnd”:”2019/03/27″,”duration”:15,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”64″,”type”:”task”,”synchronized”:false,”label”:”task 3″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020/08/28″,”dateEnd”:”2020/09/02″,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”75″,”type”:”task”,”synchronized”:false,”label”:”test import”,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020/10/13″,”dateEnd”:”2020/10/13″,”duration”:8,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”91″,”type”:”task”,”synchronized”:false,”label”:”Schema 2″,”expanded”:false,”progress”:0,”connections”:[{“target”:”109″,”type”:1}],”dateStart”:”2019/05/16″,”dateEnd”:”2019/05/21″,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”109″,”type”:”milestone”,”synchronized”:false,”label”:”Schema 4″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2019/05/22″,”dateEnd”:”2019/05/22″,”duration”:8,”resources”:[],”disableResources”:false,”description”:””},{“id”:”110″,”type”:”task”,”synchronized”:false,”label”:”Schema 5″,”expanded”:false,”progress”:50,”connections”:[],”dateStart”:”2019/05/08″,”dateEnd”:”2019/05/13″,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”37″,”type”:”task”,”synchronized”:false,”label”:”test multi resource”,”expanded”:false,”progress”:40,”connections”:[{“target”:”59″,”type”:1}],”dateStart”:”2020/04/24″,”dateEnd”:”2020/04/30″,”duration”:26,”resources”:[],”disableResources”:false,”description”:””},{“id”:”48″,”type”:”task”,”synchronized”:false,”label”:”test mr1″,”expanded”:false,”progress”:40,”connections”:[{“target”:”59″,”type”:1}],”dateStart”:”2020/06/04″,”dateEnd”:”2020/06/16″,”duration”:57,”resources”:[],”disableResources”:false,”description”:”mr1″},{“id”:”62″,”type”:”task”,”synchronized”:false,”label”:”relation 1″,”expanded”:false,”progress”:0,”connections”:[{“target”:”16″,”type”:1}],”dateStart”:”2020/06/08″,”dateEnd”:”2020/06/08″,”duration”:4,”resources”:[],”disableResources”:false,”description”:”Test”},{“id”:”16″,”type”:”task”,”synchronized”:false,”label”:”Level 3″,”expanded”:false,”progress”:70,”connections”:[],”dateStart”:”2019/04/08″,”dateEnd”:”2019/04/10″,”duration”:16,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”59″,”type”:”task”,”synchronized”:false,”label”:”test relation 2 “,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020/06/08″,”dateEnd”:”2020/06/10″,”duration”:12,”resources”:[],”disableResources”:false,”description”:”relazioni tra task”},{“id”:”60″,”type”:”task”,”synchronized”:false,”label”:”test relation 2″,”expanded”:false,”progress”:100,”connections”:[{“target”:”61″,”type”:1}],”dateStart”:”2020/06/08″,”dateEnd”:”2020/06/10″,”duration”:10,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”61″,”type”:”task”,”synchronized”:false,”label”:”test relation 3″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020/06/09″,”dateEnd”:”2020/06/09″,”duration”:2.5,”resources”:[],”disableResources”:false,”description”:”test 3″}],”resources”:[],”disableResources”:false,”autoSchedule”:false]
    and this is part of the js code:
    var gantt = document.querySelector(‘smart-gantt-chart’);
    gantt.hideTimelineHeaderDetails = false;
    gantt.timelineHeaderFormatFunction = function(date, type, isHeaderDetails,
    value) {
    const ganttChart = document.querySelector(‘smart-gantt-chart’);
    if (type === ‘week’) {
    const startDayOfWeek = new Date(date), endDateOfWeek = new Date(
    date);
    endDateOfWeek.setDate(date.getDate() + 5);
    return startDayOfWeek.toLocaleDateString(gantt.locale, {
    day : ‘2-digit’,
    month : ‘long’,
    year : ‘numeric’,
    }) + ‘ – ‘ + endDateOfWeek.toLocaleDateString(gantt.locale, {
    day : ‘2-digit’,
    month : ‘long’,
    year : ‘numeric’,
    });
    }
    if (type === ‘day’) {
    return date.toLocaleDateString(ganttChart.locale, {
    day : ‘numeric’,
    weekday : ‘short’
    });
    }
    return value;
    };
    gantt.dateEnd = data[0].chartEndDate;
    gantt.locale = ‘it’;
    gantt.showProgressLabel = false;
    gantt.durationUnit = ‘hour’;
    gantt.view = ‘week’;
    gantt.treeSize = ‘50%’;
    gantt.taskPanelSize = ‘80%’;
    gantt.resourcePanelSize = ‘20%’;
    gantt.nonworkingHours = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 13, 18, 19, 20, 21,
    22, 23 ];
    gantt.nonworkingDays = [ 0, 6 ];
    gantt.taskColumns = [ {
    label : “Task name”,
    value : ‘label’,
    size : ‘65%’
    }, {
    label : “Progress”,
    value : ‘progress’,
    size : ‘15%’,
    formatFunction : function(progress) {
    return ((progress / 100).toFixed(2) * 100) + “%”
    },
    }, {
    label : “Duration”,
    value : ‘duration’,
    size : ‘5%’,
    }, {
    label : “Assigned”,
    value : ‘resources’,
    size : ‘20%’,
    formatFunction : function(data, taskIndex) {
    return <span>${data.length > 0 ? '✓' : '✗'}</span>;
    }
    } ];
    gantt.dataSource = data;
    After having assigned the datasource, the dateStart and the dateEnd change:
    [{“id”:”001618″,”type”:”project”,”synchronized”:true,”label”:”test Project”,”expanded”:true,”progress”:74.3,”dateStart”:”2019-03-24T23:00:00.000Z”,”dateEnd”:”2020-10-13T16:00:00.000Z”,”dragProject”:false,”tasks”:[{“id”:”17″,”type”:”task”,”synchronized”:false,”label”:”test Task 1″,”expanded”:false,”progress”:85,”connections”:[{“target”:”59″,”type”:1},{“target”:”62″,”type”:1}],”dateStart”:”2020-03-31T22:00:00.000Z”,”dateEnd”:”2020-04-02T15:00:00.000Z”,”duration”:15,”resources”:[{“id”:”00050″,”label”:”Matt”,”capacity”:24,”maxCapacity”:24},{“id”:”00012″,”label”:”Andrew”,”capacity”:24,”maxCapacity”:24},],”disableResources”:false,”description”:”test”},{“id”:”18″,”type”:”task”,”synchronized”:false,”label”:”test 2 “,”expanded”:false,”progress”:20,”connections”:[],”dateStart”:”2019-03-24T23:00:00.000Z”,”dateEnd”:”2019-03-26T16:00:00.000Z”,”duration”:15,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”64″,”type”:”task”,”synchronized”:false,”label”:”task 3″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020-08-27T22:00:00.000Z”,”dateEnd”:”2020-09-01T16:00:00.000Z”,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”75″,”type”:”task”,”synchronized”:false,”label”:”test import”,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020-10-12T22:00:00.000Z”,”dateEnd”:”2020-10-13T16:00:00.000Z”,”duration”:8,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”91″,”type”:”task”,”synchronized”:false,”label”:”Schema 2″,”expanded”:false,”progress”:0,”connections”:[{“target”:”109″,”type”:1}],”dateStart”:”2019-05-15T22:00:00.000Z”,”dateEnd”:”2019-05-20T16:00:00.000Z”,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”109″,”type”:”milestone”,”synchronized”:false,”label”:”Schema 4″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2019-05-22T16:00:00.000Z”,”dateEnd”:”2019-05-22T16:00:00.000Z”,”duration”:8,”resources”:[],”disableResources”:false,”description”:””},{“id”:”110″,”type”:”task”,”synchronized”:false,”label”:”Schema 5″,”expanded”:false,”progress”:50,”connections”:[],”dateStart”:”2019-05-07T22:00:00.000Z”,”dateEnd”:”2019-05-10T16:00:00.000Z”,”duration”:24,”resources”:[],”disableResources”:false,”description”:””},{“id”:”37″,”type”:”task”,”synchronized”:false,”label”:”test multi resource”,”expanded”:false,”progress”:40,”connections”:[{“target”:”59″,”type”:1}],”dateStart”:”2020-04-23T22:00:00.000Z”,”dateEnd”:”2020-04-29T09:00:00.000Z”,”duration”:26,”resources”:[],”disableResources”:false,”description”:””},{“id”:”48″,”type”:”task”,”synchronized”:false,”label”:”test mr1″,”expanded”:false,”progress”:40,”connections”:[{“target”:”59″,”type”:1}],”dateStart”:”2020-06-03T22:00:00.000Z”,”dateEnd”:”2020-06-15T08:00:00.000Z”,”duration”:57,”resources”:[],”disableResources”:false,”description”:”mr1″},{“id”:”62″,”type”:”task”,”synchronized”:false,”label”:”relation 1″,”expanded”:false,”progress”:0,”connections”:[{“target”:”16″,”type”:1}],”dateStart”:”2020-06-07T22:00:00.000Z”,”dateEnd”:”2020-06-08T11:00:00.000Z”,”duration”:4,”resources”:[],”disableResources”:false,”description”:”Test”},{“id”:”16″,”type”:”task”,”synchronized”:false,”label”:”Level 3″,”expanded”:false,”progress”:70,”connections”:[],”dateStart”:”2019-04-07T22:00:00.000Z”,”dateEnd”:”2019-04-09T16:00:00.000Z”,”duration”:16,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”59″,”type”:”task”,”synchronized”:false,”label”:”test relation 2 “,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020-06-07T22:00:00.000Z”,”dateEnd”:”2020-06-09T11:00:00.000Z”,”duration”:12,”resources”:[],”disableResources”:false,”description”:”relazioni tra task”},{“id”:”60″,”type”:”task”,”synchronized”:false,”label”:”test relation 2″,”expanded”:false,”progress”:100,”connections”:[{“target”:”61″,”type”:1}],”dateStart”:”2020-06-07T22:00:00.000Z”,”dateEnd”:”2020-06-09T09:00:00.000Z”,”duration”:10,”resources”:[],”disableResources”:false,”description”:”test”},{“id”:”61″,”type”:”task”,”synchronized”:false,”label”:”test relation 3″,”expanded”:false,”progress”:0,”connections”:[],”dateStart”:”2020-06-08T22:00:00.000Z”,”dateEnd”:”2020-06-09T09:00:00.000Z”,”duration”:2.5,”resources”:[],”disableResources”:false,”description”:”test 3″}],”resources”:[],”disableResources”:false,”autoSchedule”:false]
    Why? there is a problem with the date format (the date of the project type is correct)?
    Thank you in advance.
    Walter

    February 15, 2021 at 6:43 am #101499
    admin
    Keymaster

    Hi Walter,
    The component works with the Javascript Date object for dates, which is the native way to handle date operations in javascript. That means that when you set a String we will do 

    new Date(your string).

    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    February 15, 2021 at 9:52 am #101504
    Anonymous
    Inactive

    Hi Peter,
    thank you for the reply. I set the date in the correct format, my problem was that the my dateStart is calculated starting from the dateEnd with the duration and I have some day not working (es: holiday), it’s possible to exclude specified day from the calculation? (Now I use only the week-end day for the exclusion).
    Thank you in advance.
    Walter

    February 15, 2021 at 10:01 am #101505
    admin
    Keymaster

    Hi Walter,
    Excluding holidays is not implemented as a feature in the Gantt chart. We will consider that in future versions.
    Such functionality is available in our similar component – Scheduler.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    February 26, 2021 at 11:37 am #101551
    Anonymous
    Inactive

    Hi,
    I have a question on dateEnd rappresentation. When I set the dateStart and the dateEnd of a project or task element in the datasource, without the duration, the dateEnd in the popup editor is correct, instead in the Gantt chart is show in the previous day (ex: if dateStart=”2021-02-20″ and dateEnd=”2021-02-26″, in the Gantt chart visualization, the bar end at the end of 2021-02-25 cell). Why? it’s possible to change?
    Thank you in advance.
    Walter

    February 26, 2021 at 12:17 pm #101554
    admin
    Keymaster

    Hi Walter,
    We will need an example which demonstrates the reported behavior in order to take a look at the exact scenario and test it.
    Best regards,
    Peter Stoev
    Smart UI Team
    https://www.htmlelements.com/

    February 26, 2021 at 2:23 pm #101555
    Anonymous
    Inactive

    For example you can use this replacing js with this:
    window.onload = function () {
    const gantt = document.querySelector(‘smart-gantt-chart’);
    gantt.durationUnit = ‘hour’;
    gantt.view = ‘week’;
    gantt.treeSize = ‘40%’;
    gantt.dateStart = ‘2021-04-01’;
    gantt.timelineHeaderFormatFunction = function (date, type, isHeaderDetailsContainer) {
    if (isHeaderDetailsContainer) {
    let startDate = new Date(date), endDate = new Date(date), formatDate = (date) => date.toLocaleDateString(gantt.locale, { day: ‘2-digit’, month: ‘short’ }).toUpperCase();
    //the view is set to ‘week’ so add 6 days to the first to get the last
    endDate.setDate(endDate.getDate() + 6);
    //Validate the endDate according to timeline end
    endDate = new Date(Math.min(gantt.dateEnd.getTime(), endDate.getTime()));
    return formatDate(startDate) + ‘ – ‘ + formatDate(endDate);
    }
    else {
    return new Date(date).toLocaleDateString(gantt.locale, { day: ‘2-digit’,weekday: ‘short’ }).toUpperCase();
    }
    };
    gantt.taskColumns = [
    {
    label: ‘TASK NAME’,
    value: ‘label’,
    size: ‘50%’
    },
    {
    label: ‘START TIME’,
    value: ‘dateStart’,
    size: ‘30%’,
    formatFunction: function (dateString) {
    const date = new Date(dateString), formatNumber = (number) => (‘0’ + number).slice(-2);
    return date.getFullYear() + ‘-‘ + formatNumber(date.getMonth() + 1) + ‘-‘ + formatNumber(date.getDate());
    }
    },
    {
    label: ‘DURATION’,
    value: ‘duration’,
    formatFunction: (duration) => parseInt(duration)
    }
    ];
    gantt.dataSource = [
    {
    type: ‘project’,
    label: ‘Office Preparation’,
    synchronized: true,
    expanded: true,
    progress: 35,
    tasks: [
    {
    label: ‘Office Inspection’,
    synchronized: true,
    expanded: true,
    progress: 55,
    type: ‘project’,
    connections: [
    {
    target: ‘furnitureInArrangement’,
    type: 1
    }
    ],
    tasks: [
    {
    label: ‘Interior Arrangement’,
    dateStart: ‘2021-04-02′,
    dateEnd:’2021-04-05’,
    type: ‘task’
    },
    {
    label: ‘Climate Control Installation’,
    dateStart: ‘2021-04-05’,
    duration: 2,
    type: ‘task’
    }
    ]
    },
    {
    id: ‘furnitureInArrangement’,
    label: ‘Furniture Arrangement’,
    synchronized: true,
    progress: 55,
    type: ‘project’,
    connections: [
    {
    target: ’employeePositioning’,
    type: 1
    }
    ],
    tasks: [
    {
    label: ‘Workstations Positioning’,
    dateStart: ‘2021-04-08’,
    duration: 2,
    type: ‘task’
    }
    ]
    },
    {
    id: ’employeePositioning’,
    label: ‘Employee Positioning’,
    synchronized: true,
    expanded: true,
    progress: 50,
    type: ‘project’,
    tasks: [
    {
    label: ‘Workplaces Allocation’,
    dateStart: ‘2021-04-10’,
    duration: 3,
    progress: 50,
    connections: [
    {
    target: ‘workstationsAssembly’,
    type: 1
    }
    ],
    type: ‘task’
    },
    {
    id: ‘workstationsAssembly’,
    label: ‘Workstations Assembly’,
    dateStart: ‘2021-04-13’,
    duration: 3,
    progress: 50,
    connections: [
    {
    target: ‘workstationsInspection’,
    type: 1
    }
    ],
    type: ‘task’
    },
    {
    id: ‘workstationsInspection’,
    label: ‘Workstations Inspection’,
    dateStart: ‘2021-04-16’,
    duration: 3,
    progress: 50,
    type: ‘task’
    }
    ]
    }
    ]
    },
    {
    type: ‘project’,
    label: ‘Product Release’,
    synchronized: true,
    expanded: true,
    progress: 65,
    tasks: [
    {
    label: ‘Planning’,
    dateStart: ‘2021-04-02’,
    duration: 5,
    progress: 100,
    type: ‘task’
    },
    {
    label: ‘Development’,
    synchronized: true,
    expanded: true,
    progress: 50,
    type: ‘project’,
    connections: [
    {
    target: ‘releasev1’,
    type: 1
    }
    ],
    tasks: [
    {
    label: ‘Developing/Coding’,
    dateStart: ‘2021-04-03’,
    duration: 5,
    type: ‘task’,
    progress: 100,
    connections: [
    {
    target: ‘betaRelease’,
    type: 1
    }
    ]
    },
    {
    id: ‘betaRelease’,
    label: ‘Beta Release’,
    dateStart: ‘2021-04-08’,
    type: ‘milestone’,
    connections: [
    {
    target: ‘integrateSystem’,
    type: 1
    }
    ]
    },
    {
    id: ‘integrateSystem’,
    label: ‘Integration’,
    dateStart: ‘2021-04-08’,
    duration: 4,
    type: ‘task’,
    progress: 100,
    connections: [
    {
    target: ‘test’,
    type: 1
    }
    ]
    },
    {
    id: ‘test’,
    label: ‘Testing’,
    dateStart: ‘2021-04-12’,
    duration: 3,
    type: ‘task’,
    progress: 15,
    connections: [
    {
    target: ‘marketing’,
    type: 1
    }
    ]
    },
    {
    id: ‘marketing’,
    label: ‘Marketing and Sales’,
    dateStart: ‘2021-04-15’,
    duration: 4,
    type: ‘task’
    }
    ]
    },
    {
    label: ‘Feedback Analysis and QA’,
    dateStart: ‘2021-04-02’,
    duration: 4,
    type: ‘task’,
    progress: 75,
    connections: [
    {
    target: ‘design’,
    type: 1
    }
    ]
    },
    {
    id: ‘design’,
    label: ‘Design’,
    synchronized: true,
    expanded: true,
    progress: 25,
    type: ‘project’,
    tasks: [
    {
    label: ‘Database’,
    dateStart: ‘2021-04-06’,
    duration: 4,
    progress: 50,
    type: ‘task’
    },
    {
    label: ‘User Interface’,
    dateStart: ‘2021-04-08’,
    duration: 4,
    progress: 10,
    type: ‘task’
    }
    ]
    },
    {
    label: ‘Documentation’,
    dateStart: ‘2021-04-11’,
    duration: 5,
    type: ‘task’,
    connections: [
    {
    target: ‘releasev1’,
    type: 1
    }
    ]
    },
    {
    id: ‘releasev1’,
    label: ‘Release v1’,
    dateStart: ‘2021-04-19’,
    type: ‘milestone’
    }
    ]
    }
    ];
    let editedTaskIndex, taskLabel, description, dayPicker, monthPicker, yearPicker, dayIncrementBtn, dayDecrementBtn, dayInput, totalDate, deleteBtn, cancelBtn, saveBtn;
    gantt.popupWindowCustomizationFunction = function (target, type, taskIndex) {
    const targetTask = gantt.tasks[taskIndex];
    if (type === ‘task’ && targetTask) {
    let addListeners;
    editedTaskIndex = taskIndex;
    //Hide the header
    target.headerPosition = ‘none’;
    target.footerPosition = ‘none’;
    //Create the content
    if (!document.getElementById(‘taskLabel’)) {
    addListeners = true;
    target.clear();
    const template = document.getElementById(‘myTemplate’);
    target.appendChild(template.content);
    }
    taskLabel = document.getElementById(‘taskLabel’);
    description = document.getElementById(‘description’);
    dayPicker = document.getElementById(‘dayPicker’);
    monthPicker = document.getElementById(‘monthPicker’);
    yearPicker = document.getElementById(‘yearPicker’);
    dayIncrementBtn = document.getElementById(‘dayIncrementBtn’);
    dayDecrementBtn = document.getElementById(‘dayDecrementBtn’);
    dayInput = document.getElementById(‘dayInput’);
    totalDate = document.getElementById(‘totalDate’);
    deleteBtn = document.getElementById(‘deleteBtn’);
    cancelBtn = document.getElementById(‘cancelBtn’);
    saveBtn = document.getElementById(‘saveBtn’);
    //Configure the content
    const dateStart = targetTask.dateStart, dateEnd = targetTask.dateEnd;
    if (!dateStart || !dateEnd) {
    taskLabel.innerHTML = ”;
    }
    else {
    const dayFormat = [‘2-digit’, ‘numeric’] || ‘numeric’;
    taskLabel.innerHTML = dateStart.toLocaleDateString(gantt.locale) + ‘ – ‘ +
    dateEnd.toLocaleDateString(gantt.locale);
    }
    description.value = targetTask.label;
    dayPicker.value = dateStart.getDate().toString();
    monthPicker.value = dateStart.getMonth().toString();
    yearPicker.value = dateStart.getFullYear().toString();
    dayInput.value = targetTask.duration.toString();
    totalDate.innerHTML = targetTask.dateEnd.toDateString();
    if (addListeners) {
    dayIncrementBtn.addEventListener(‘click’, function () {
    dayInput.value = (Math.min(31, (parseInt(dayInput.value) || 0) + 1)).toString();
    updateTotalDate();
    });
    dayDecrementBtn.addEventListener(‘click’, function () {
    dayInput.value = Math.max(1, (parseInt(dayInput.value) || 0) – 1).toString();
    updateTotalDate();
    });
    deleteBtn.addEventListener(‘click’, deleteTask);
    cancelBtn.addEventListener(‘click’, cancelTask);
    saveBtn.addEventListener(‘click’, saveTask);
    }
    }
    };
    function updateTotalDate() {
    let newDateEnd = new Date(parseInt(yearPicker.value), parseInt(monthPicker.value), parseInt(dayPicker.value));
    newDateEnd.setDate(newDateEnd.getDate() + parseInt(dayInput.value));
    if (isNaN(newDateEnd.getTime())) {
    totalDate.innerHTML = ”;
    return;
    }
    totalDate.innerHTML = newDateEnd.toDateString();
    }
    function deleteTask() {
    gantt.removeTask(editedTaskIndex);
    gantt.closeWindow();
    editedTaskIndex = undefined;
    }
    ;
    function cancelTask() {
    gantt.closeWindow();
    }
    ;
    function saveTask() {
    let dateStart = new Date(parseInt(yearPicker.value), parseInt(monthPicker.value), parseInt(dayPicker.value)), duration = parseInt(dayInput.value);
    gantt.updateTask(editedTaskIndex, { label: description.value, dateStart: dateStart, duration: duration });
    gantt.closeWindow();
    editedTaskIndex = undefined;
    }
    ;
    };
    I have changed only the task “Interior Arrangement” removing the duration and adding the dateEnd (dateEnd:’2021-04-05′). In the chart the task end at the end of cell of  ‘2021-04-04’.
    Thank you.
    Walter

    March 1, 2021 at 3:18 pm #101563
    yavordashew
    Member

    Hi Walter,
    This is not an issue its the default functionality and how it you should behave.
    That is because when you don’t set the hours and just the date like in your case (to either dateStart or dateEnd) the date that the gantt chart will output is the following (startDate : Fri Apr 02 2021 00:00:00 , endDate : Mon Apr 05 2021 00:00:00) and thus the cells that the task is covering start for the beginning of the cell on 02.04 date and ends on the very end of 04.04 date cell.
    However if you want the task to cover the cell you will have to set hours,minutes and seconds.
    For example in order the cell on 05.04 date to be covered you can set the dates like this :

    
   {
    label: 'Interior Arrangement',
    dateStart: '2021-04-02 16:30:59 ',
    dateEnd:'2021-04-05 23:59:59',
    type: 'task',
    },

    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.