I would like to change the backgroundColor(row) of items based on DueDate on a Task list.

  • what are the formatting options? i.e.green if still under the due date, red if it is past due? or any other condition – Waqas Sarwar MVP Dec 12 '18 at 16:36
  • red = overdue yellow = due in 2 days – Ben Segarra Dec 12 '18 at 17:15

You can use Client Side Rendering (CSR) which represents a rendering engine for list views, list forms and search results.

See my answers given below:

  1. How to color code a SharePoint list date field based on comparison with todays date?

  2. How to Highlight a Row on Active Status


As Ganesh's suggestion, I modified code as below based on your requirement:

<script type="text/javascript">  
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 

    OnPostRender: function (ctx) {
    var rows = ctx.ListData.Row;  
    for (var i = 0; i < rows.length; i++) {  
        var dueDate =new Date(rows[i]["DueDate"]); 
        var now = new Date(); 
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = document.getElementById(rowId);
      // if there's no due date don't render anything
    if (dueDate == 'undefined' || !dueDate) {
        return '';
    else if (dueDate < now) {
        row.style.backgroundColor ='red'  ;
    else if(now-dueDate<=2) {
      row.style.backgroundColor ='yellow';

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.