Using calculated column to highlight entire row in list

Question

I have a list with StartDate and FinishDate columns. Is there a way to change the background color of an item using the date columns?

My requirement is:

If StartDate = FinishDate, background color of that item should be green If StartDate>=FinishDate, background color of that item should be yellow If StartDate<=FinishDate, background color of that item should be red

Can you suggest how it can be done? I'm Ok with either js code or calculated columns.

Thank you.

Answer 1

You can do this with Client Side Rendering.

Add the following JavaScript to your page. Note: you should check your conditions; I've just gone with the conditions mentioned in your question.

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", CSR_Setup);

function CSR_Setup() {
    var overridectx = {};
    overridectx.Templates = {};
    overridectx.OnPostRender = CSR_RowColour;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overridectx);
}

function CSR_RowColour(ctx) {
    var rows = ctx.ListData.Row;
    for (var i = 0; i < rows.length; i++) {
        // Check what colour this row should be
        var startDate = rows[i]["StartDate"];
        var finishDate = rows[i]["FinishDate"];
        var colour = "";
        if (startDate == finishDate)
            colour = "green";
        else if (startDate >= finishDate)
            colour = "yellow";
        else if (startDate <= finishDate)
            colour = "red";

        // Apply row colour
        var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
        var tr = document.getElementById(rowElementId);
        tr.style.backgroundColor = colour;
    }
}

Answer 2

Create one calculated Column, select return type as Number and add below formula:

="<img src='/_layouts/images/blank.gif' onload=""{"&"this.parentNode.parentNode.parentNode.style.backgroundColor="&CHAR(39)&IF(StartDate=EndDate,"#80ff80",IF(StartDate>EndDate,"#ffffb3","#ff4d4d"))&CHAR(39)&"}"">"

Hope this is what you want...