Gantt date issue

[Anonymous]

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

[admin]

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/

[Anonymous]

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

[admin]

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/

[Anonymous]

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

[admin]

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/

[Anonymous]

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

[yavordashew]

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