Color-Coding SharePoint List Date Column - Between Date Ranges

Question

Hello everyone! I need help figuring out a code that changes the color of a Due Date column based on date intervals, in my SharePoint List.

What I need is:

Task that is overdue - date column to be colored red;

Task that is from 1 and 7 days to be overdue - date column to be colored orange;

Task that is from 8 to 20 days to be overdue - date column to be colored yellow;

Task that is from 21 to 30 days to be overdue - date column to be colored green.

I am currently using this code here:

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "style": { "background-color": "=if(@currentField <= @now, 'red', if(@currentField <= @now + 604800000, 'orange', if(@currentField <= @now + 7776000000, 'yellow', if(@currentField >= 1728000000, 'green','')))" }

}

Your help will be deeply appreaciated!

Answer 1

Hi @Thamires Bastos,

Per my test, you can use following json formatting to reach your requirement.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "background-color": "=if(@currentField >= @now - 86400000 && @currentField < @now, 'red', if(@currentField >= @now - 604800000 && @currentField < @now - 86400000, 'orange', if(@currentField >= @now - 1728000000 && @currentField < @now - 604800000, 'yellow', if(@currentField >= @currentField - 2592000000 && @currentField < @now - 1728000000, 'green','')))"
  }
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.