SharePoint List color rows based upon date ranges relative to the Due Date

[Joseph_Butler]

I would like to know how to color the rows on my SharePoint list.

I have a Due Date column in my list

Here is what I am looking to do:

If Today's date is within 14 days of the Due Date then the entire row should be the color red

If Today's date is between 15 days and 21 Days out from the Due Date, then the entire row color should be orange

If Today's date is between 21 days and 30 days out from the Due Date, then the entire row should be yellow

If Today's date is 31 days or more out from the Due Date, then the entire row should be Green

I am assuming I will be using Client Side Rendering (I don't know I am guessing).

1. What files will I need to create (a .txt file or a .txt file that is converted to a .js file?

2. Will I have to use Content Editor Web Part to refernece the .txt or .js file?

[#2]

@Joseph_Butler 

Are you using SharePoint Online and modern lists experience? For modern lists experience view formatting is done with JSON. 

[#3]

@Joseph_Butler 

You can easily achieve this using SharePoint JSON View formatting. 

You need to use additionalRowClass to highlight the row based on conditions. Check my answers given at below links. It should help you to get started with it:

1. Need Help with “Format View” feature in Modern List based on Condition 
2. color formatting a date column - Refer the date conditions to check how you can use "@now" in JSON

---

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#4]

@Matti PaukkonenI am not. We are using SharePoint 2013 on-premise

[#5 · Accepted solution]

@Joseph_Butler 

For SharePoint 2013, you can use Client Side Rendering (CSR) which represents a rendering engine for list views.

You can refer the code samples given in below links and modify it according to your conditions:

1. How to highlight the row in red if expiration date is passed for SharePoint 2013 list 
2. SharePoint 2013 on-prem conditional formatting row by dueDate 

---

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#6]

@ganeshsanapIt appears the the code offered in the links provided allow me to color code items,

However, I am not finding the code needed in order to complete the "else if" regarding date ranges.

I have done extensive searches on Google and just not seeing the code needed. Any ideas?

[#7]

@Joseph_Butler

for example:

For the following code, I get it...if the DueDate field for the row is less than Today, then the row will be red.

  else if (dueDate < now) {
        row.style.backgroundColor ='red'  ;
    }

What I would like to is set this to if the DueDate field for the row is 13 days out or less from Today, the the field should be red. When I make the changes below, it does not work.

  else if (dueDate <= now+13) {
        row.style.backgroundColor ='red'  ;
    }

Granted, I know nothing about scripting, other than guessing and I haven't found anything on Google that shows how to do this.

[#8]

@Joseph_Butler 

In JavaScript, you can get current date & time using:

var currentDate = new Date();

To add the days to today's date using JavaScript, you can refer below link:

Add days to JavaScript Date 

---

Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.