Gantt View: Invalid Date Format - bunching the view to the left..

[tomnortonuk]

Thank you for sharing this project - I'm excited to get this running well on my sites.

I am struggling to work around 'Invalid Date' for the Project Start and End dates. I initially thought this was due to regional settings for the site as it seems to show valid dates (although does not render the tasks in the timeline) when using US formatted dates.

One other complication may be that I am using a lookup item for project against the tasks which also brings in the Start and End Dates. I have established the backend column names used in Sharepoint and amended the JSON, but still not rendering correctly?

I've included a screen shot with US formatted Dates, and with UK , and also the list view so that you can see the values - in both cases the tasks do not render correctly across the date range.

Really appreciate your help and support :-)

[tomnortonuk]

So - on further investigation this appears to be to do with the fact that I am linking to information held in another list (Project) to source the Start and Due dates for the project.

I have successfully identified the internal names for the columns and updated the JSON, but it does not work (same output as the screenshot above). Is there an easy way to use a calculated date (e.g. first day of current year to last day of current year for example? or perhaps today - 6months to today + 12 months)? Many thanks :-)

[Fedes365]

Hello @tomnortonuk,

time and dates are not exactly my best field, but I tried to create a GANTT list from scratch, including the internal names specified in the sample tutorial. Furthermore, the date and time columns have no additonal settings. In other words, I've created them (with the exact internal names from the tutorial) and saved. Here is my result below, where all dates have been selected from the dropdown menù, so without writing them manually:

Here is an example of a date and time column I've created with no particular settings:

Can you provide more info about yours? I'm trying to figure out what's happening, since I'm curious about your use case 🤔

[tecchan1107]

Hi @tomnortonuk !

On my end, I changed the locale so that the date is displayed in dd/MM/yyyy and used the lookup columns to display Project Start and Project End and got the same error.

Perhaps, but the date displayed using the lookup column may be recognized as a string, not a date. Therefore, they may not be displayed properly.

After tomorrow, I will investigate the detailed cause of the problem and try to find a workaround.

[tecchan1107]

Hi @tomnortonuk . Sorry for the delay in replying.

Reason why Gantt charts are not displayed

It still seems that the date in the lookup column is recognized as a character, not a date, and the Gantt chart is not displayed.

How to display a Gantt chart using the lookup column

As shown in the following image, I created a trial code to display a Gantt chart using a lookup column, using the Date operator to make the date in the lookup column be recognized as a date. Please try it when you have time.

View Requirements

Project List

Type	Internal Name	Note
Single line of text	Title
Single line of text	Start	Register in yyyy-MM-dd format so that the Date operator can recognize it as a date.
Single line of text	End	Register in yyyy-MM-dd format so that the Date operator can recognize it as a date.

Task List

Type	Internal Name
Single line of text	Title
Lookup	Project
Lookup	Project_x003a__x0020_Start
Lookup	Project_x003a__x0020_End
Date	TaskStart
Date	TaskDue
Number	Progress
Choice	TaskType
People (single select)	AssignedToUser
Multilines of text (no format)	TaskDescription

Sample Code

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "style": { "height": "=if(@rowIndex == 0, '88px', '52px')", "display": "block", "width": "100%", "position": "sticky" }, "attributes": { "class": "ms-bgColor-neutralLighter--hover" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-themePrimary" }, "style": { "width": "100%", "display": "=if(@rowIndex == 0, 'flex', 'none')", "height": "36px", "padding": "0", "font-weight": "bold", "border-radius": "6px 6px 0 0" }, "children": [ { "elmType": "div", "txtContent": "Task", "style": { "width": "220px", "text-align": "left", "padding-left": "0.4em", "box-sizing": "border-box" }, "attributes": { "class": "ms-fontSize-16 ms-fontColor-white" } }, { "elmType": "div", "style": { "flex-grow": "1", "height": "100%", "position": "relative" }, "children": [ { "elmType": "div", "txtContent": "=toLocaleDateString([$Project_x003a__x0020_Start])", "style": { "position": "absolute", "padding": "14px 4px 0 4px", "height": "22px", "border-radius": "6px 6px 0 0" }, "attributes": { "title": "='Project Start: ' + toLocaleDateString([$Project_x003a__x0020_Start])", "class": "ms-bgColor-themeDarker ms-fontSize-14 ms-fontColor-white" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$Project_x003a__x0020_End])", "style": { "position": "absolute", "right": "0", "padding": "14px 4px 0 4px", "height": "22px", "border-radius": "6px 6px 0 0" }, "attributes": { "title": "='Project Finish: ' + toLocaleDateString([$Project_x003a__x0020_End])", "class": "ms-bgColor-themeDarker ms-fontSize-14 ms-fontColor-white" } }, { "elmType": "span", "txtContent": "=toLocaleDateString( @now)", "style": { "position": "relative", "width": "90px", "z-index": "100", "display": "=if([$Project_x003a__x0020_End] < @now , 'none', 'block')", "left": "=floor( (Number(@now)-Number([$Project_x003a__x0020_Start])) / (Number([$Project_x003a__x0020_End])-Number([$Project_x003a__x0020_Start])) * 100 ) + '%'", "background-color": "#e1dfdd", "text-align": "center", "padding": "0 3px", "margin": "0 0 0 3px" } }, { "elmType": "span", "attributes": { "class": "ms-fontColor-gray40" }, "style": { "position": "relative", "display": "=if( [$Project_x003a__x0020_End] < @now , 'none', 'block')", "top": "-1.3em", "z-index": "1", "border-left": "5px solid", "height": "800px", "width": "0.1em", "left": "= (Number(@now)-Number([$Project_x003a__x0020_Start])) / (Number([$Project_x003a__x0020_End])-Number([$Project_x003a__x0020_Start])) * 100 + '%' " } } ] } ] }, { "elmType": "div", "style": { "width": "100%", "display": "flex" }, "children": [ { "elmType": "div", "style": { "width": "220px", "display": "flex", "flex-wrap": "wrap" }, "attributes": { "class": "" }, "children": [ { "elmType": "span", "style": { "width": "24px", "padding": "6px 0", "text-align": "center", "cursor": "pointer" }, "attributes": { "iconName": "=if([$Progress] >= 1, 'CompletedSolid', if([$Progress] > 0 , 'CortanaLogoReadyOuter', 'CircleRing'))", "title": "='Progress: ' + Number([$Progress] * 100) + '%'", "class": "= 'ms-fontSize-14 ms-fontColor-' + if([$Progress] >= 1, 'green', 'neutralSecondaryAlt')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "=if([$Progress] == 0, if([$TaskType] == 'Task' || [$TaskType] == '', 25 , 100) , if([$Progress] == 0.25 , 50, if([$Progress] == 0.50, 75, if([$Progress] == 0.75, 100, 0))))" } } }, { "elmType": "button", "txtContent": "[$Title]", "customRowAction": { "action": "editProps" }, "style": { "width": "196px", "height": "1.6em", "padding": "0.3em 0 0 0", "border": "none", "background-color": "transparent", "cursor": "pointer", "text-decoration": "none", "text-align": "left", "outline": "none", "display": "inline-block", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }, "attributes": { "title": "[$Title]", "class": "ms-fontSize-14 ms-fontWeight-semibold ms-fontColor-gray140 ms-fontColor-black--hover" } }, { "elmType": "span", "style": { "width": "24px", "padding": "1px 0 0 0", "text-align": "center" }, "attributes": { "iconName": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$TaskDue]< @now && [$Progress] < 1 ) || ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'EventDateMissed12', '')", "title": "This task is running late!", "class": "='ms-fontSize-14 ms-fontColor-' + if([$TaskDue]< @now && [$Progress] < 1, 'sharedRed20', 'themePrimary')" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$TaskStart])", "style": { "width": "96px", "padding": "0.1em 0", "text-align": " center", "heigth": "1.4em", "border-radius": "12px", "margin": "0 2px 0 0 " }, "attributes": { "class": "ms-fontSize-12 ms-bgColor-neutralLight" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$TaskDue])", "style": { "width": "96px", "padding": "0.1em 0", "text-align": " center", "border-radius": "12px", "margin": "0 2px 0 0 " }, "attributes": { "class": "ms-fontSize-12 ms-bgColor-neutralLight" } } ] }, { "elmType": "div", "style": { "flex-grow": "1", "position": "relative", "height": "3.3em", "padding": "0.3em 0 0 0" }, "attributes": { "class": "" }, "children": [ { "elmType": "div", "txtContent": "", "style": { "position": "absolute", "box-sizing": "border-box", "display": "=if([$TaskType] == 'Task' || [$TaskType] == '' , 'flex', 'none')", "border-radius": "6px", "z-index": "10", "top": "0.6em", "height": "2.4em", "overflow": "hidden", "text-overflow": "ellipsis", "border": "1px solid", "border-color": "#0078db", "background-color": "#cfe6f7", "left": "= (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%'", "width": "= if( [$TaskDue] > Date([$Project_x003a__x0020_End]), (Number(Date([$Project_x003a__x0020_End]))-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100 , (Number([$TaskDue])-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100 ) + '%'" }, "attributes": { "class": "", "title": "" } }, { "elmType": "div", "style": { "position": "absolute", "box-sizing": "border-box", "display": "=if(( [$TaskType] == 'Task' || [$TaskType] == '' ) && [$Progress] > 0, 'flex', 'none')", "border-radius": "=if( [$Progress] < 1, '6px 0 0 6px', '6px')", "z-index": "20", "top": "0.6em", "height": "2.4em", "overflow": "hidden", "text-overflow": "ellipsis", "border": "1px solid", "border-color": "#0078db", "background-color": "#0078db", "left": "= (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%'", "width": "= if( [$TaskDue] > Date([$Project_x003a__x0020_End]), ((Number(Date([$Project_x003a__x0020_End]))-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100) * [$Progress] + '%' , ((Number([$TaskDue])-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100 * [$Progress]) + '%'" }, "attributes": { "class": "sp-field-bold", "title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) + ' - ' + toLocaleDateString([$TaskDue])" } }, { "elmType": "div", "txtContent": "", "style": { "position": "absolute", "box-sizing": "border-box", "border-radius": "6px", "z-index": "50", "top": "0.6em", "height": "2.4em", "overflow": "hidden", "text-overflow": "ellipsis", "border": "=if([$TaskDue]< @now && [$Progress] < 1 && ([$TaskType] == 'Task' || [$TaskType] == '' ), '2px solid #f8b7bd', 'none')", "background-color": "", "left": "= (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%'", "width": "=if([$TaskType] == 'Milestone', '28px' , if( [$TaskDue] > Date([$Project_x003a__x0020_End]), (Number(Date([$Project_x003a__x0020_End]))-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100 , (Number([$TaskDue])-Number([$TaskStart])+ 86400000) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))+ 86400000) * 100 ) + '%'", "margin-left": "=if([$TaskType] == 'Milestone', '-14px' , 0" }, "attributes": { "class": "", "title": "" }, "customCardProps": { "openOnEvent": "hover", "directionalHint": "bottomCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "white" }, "formatter": { "elmType": "div", "style": { "max-height": "256px", "width": "282px", "display": "flex", "flex-wrap": "wrap", "align-items": "flex-start" }, "attributes": { "class": "ms-ContextualMenu-list is-open list-436" }, "children": [ { "elmType": "div", "txtContent": "[$Title]", "style": { "width": "250px", "height": "40px", "padding": "4px 4px 0 4px", "overflow": "hidden", "text-overflow": "ellipsis" }, "attributes": { "class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontWeight-semibold ms-fontColor-gray160" } }, { "elmType": "div", "style": { "width": "12", "flex-grow": "1", "height": "34px", "padding": "10px 0 0 0 ", "text-align": "center", "cursor": "pointer" }, "attributes": { "iconName": "Edit", "class": "ms-fontSize-14 ms-bgColor-themeLight ms-fontColor-gray160" }, "customRowAction": { "action": "editProps" } }, { "elmType": "div", "style": { "width": "100%", "display": "flex", "flex-wrap": "wrap", "align-items": "flex-start", "margin": "2px 0" }, "children": [ { "elmType": "div", "style": { "width": "24px", "padding": "6px 0", "text-align": " center", "heigth": "1.4em" }, "attributes": { "iconName": "Timeline" } }, { "elmType": "div", "txtContent": "0%", "style": { "padding": "2px 6px", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "cursor": "pointer", "heigth": "1.4em" }, "attributes": { "class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0, 'themeTertiary', 'neutralLight')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "0" } } }, { "elmType": "div", "txtContent": "25%", "style": { "padding": "2px 6px", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "cursor": "pointer", "heigth": "1.4em" }, "attributes": { "class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.25, 'themeTertiary', 'neutralLight')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "25" } } }, { "elmType": "div", "txtContent": "50%", "style": { "padding": "2px 6px", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "cursor": "pointer", "heigth": "1.4em" }, "attributes": { "class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.5, 'themeTertiary', 'neutralLight')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "50" } } }, { "elmType": "div", "txtContent": "75%", "style": { "padding": "2px 6px", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "cursor": "pointer", "heigth": "1.4em" }, "attributes": { "class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 0.75, 'themeTertiary', 'neutralLight')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "75" } } }, { "elmType": "div", "txtContent": "100%", "style": { "padding": "2px 6px", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "cursor": "pointer", "heigth": "1.4em" }, "attributes": { "class": "='ms-fontSize-14 ms-bgColor-themeLight--hover ms-fontColor-themeDarker--hover ms-bgColor-' + if([$Progress] == 1, 'themeTertiary', 'neutralLight')" }, "customRowAction": { "action": "setValue", "actionInput": { "Progress": "100" } } } ] }, { "elmType": "div", "style": { "width": "24px", "display": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$TaskDue]< @now && [$Progress] < 1 ) || ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'block', 'none')", "padding": "6px 0 7px 0", "text-align": " center", "heigth": "1.4em", "margin": "2px 0" }, "attributes": { "iconName": "EventDateMissed12", "class": "sp-field-severity--blocked30 ms-fontSize-14 ms-fontColor-sharedRed20" } }, { "elmType": "div", "txtContent": "This task is running late!", "style": { "width": "254px", "display": "=if( ( ([$TaskType] == 'Task' || [$TaskType] == '') && [$TaskDue]< @now && [$Progress] < 1 ) || ([$TaskType] == 'Milestone' && [$TaskStart]< @now && [$Progress] < 1 ) , 'block', 'none')", "padding": "4px 0 4px 4px", "text-align": " Left", "heigth": "1.4em", "margin": "2px 0" }, "attributes": { "class": "sp-field-severity--blocked30 ms-fontSize-14 ms-fontColor-sharedRed20" } }, { "elmType": "div", "style": { "width": "24px", "padding": "6px 0", "text-align": " center", "heigth": "1.4em" }, "attributes": { "iconName": "Calendar" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$TaskStart])", "style": { "width": "127px", "padding": "2px 0", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "height": "1.4em" }, "attributes": { "class": "ms-fontSize-14 ms-bgColor-neutralLight" } }, { "elmType": "div", "txtContent": "=toLocaleDateString([$TaskDue])", "style": { "width": "127px", "padding": "2px 0", "text-align": " center", "border-radius": "14px", "margin": "2px 2px 0 0 ", "height": "1.4em" }, "attributes": { "class": "ms-fontSize-14 ms-bgColor-neutralLight" } }, { "elmType": "div", "style": { "width": "24px", "padding": "6px 0", "text-align": " center", "heigth": "1.4em" }, "attributes": { "iconName": "Contact", "title": "='Assigned to : ' + [$AssignedToUser.title]" } }, { "elmType": "div", "txtContent": "[$AssignedToUser.title]", "style": { "width": "254px", "padding": "4px 0 4px 4px" }, "defaultHoverField": "[$AssignedToUser]" }, { "elmType": "div", "txtContent": "[$TaskDescription]", "style": { "font-style": "italic", "width": "254px", "padding": "4px 0 4px 4px" } } ] } } }, { "elmType": "div", "txtContent": "", "style": { "position": "relative", "box-sizing": "border-box", "display": "=if([$TaskType] == 'Milestone', 'flex', 'none')", "z-index": "10", "top": "0.3em", "height": "3em", "left": "= (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%'", "margin-left": "-14px", "width": "28px" }, "attributes": { "iconName": "=if([$TaskStart]< @now && [$Progress] < 1, 'EventDateMissed12', 'EventDate'", "title": "=[$Title] + ' - ' + toLocaleDateString([$TaskStart]) ", "class": "='ms-fontSize-24 ' + if([$TaskStart]< @now && [$Progress] < 1, 'ms-fontColor-sharedRed20', 'ms-fontColor-themePrimary') " } }, { "elmType": "div", "txtContent": "=getDate([$TaskStart]) + '-' + if(getMonth([$TaskStart])==0,'Jan',if(getMonth([$TaskStart])==1,'Feb',if(getMonth([$TaskStart])==2,'Mar',if(getMonth([$TaskStart])==3,'Apr',if(getMonth([$TaskStart])==4,'May',if(getMonth([$TaskStart])==5,'Jun',if(getMonth([$TaskStart])==6,'Jul',if(getMonth([$TaskStart])==7,'Aug',if(getMonth([$TaskStart])==8,'Sep',if(getMonth([$TaskStart])==9,'Oct',if(getMonth([$TaskStart])==10,'Nov',if(getMonth([$TaskStart])==11,'Dec',''))))))))))))", "style": { "position": "absolute", "box-sizing": "border-box", "display": "=if([$TaskType] == 'Milestone' , 'flex', 'none')", "z-index": "3", "top": "10px", "height": "24px", "margin-left": "-60px", "left": "= (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%'", "width": "60px", "text-align": "right" }, "attributes": { "class": "sp-field-bold ms-fontSize-14" } }, { "elmType": "div", "txtContent": "=(Number[$Progress]) * 100 + '%'", "style": { "position": "absolute", "box-sizing": "border-box", "display": "=if([$TaskType] == 'Task' || [$TaskType] == '' , 'flex', 'none')", "z-index": "3", "top": "10px", "height": "24px", "margin-left": "=if((Number([$TaskDue])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) <= 0.9 , '10px' , '-40px')", "left": "=if((Number([$TaskDue])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) <= 0.9 , (Number([$TaskDue])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%' , (Number([$TaskStart])-Number(Date([$Project_x003a__x0020_Start]))) / (Number(Date([$Project_x003a__x0020_End]))-Number(Date([$Project_x003a__x0020_Start]))) * 100 + '%' ) ", "width": "40px" }, "attributes": { "class": "sp-field-bold ms-fontSize-14" } } ] } ] } ] } } ```

[tecchan1107]

Since there seems to be no reply, I will close it. If you have any questions, sorry, but please create a new issue again.