Return to Answer

This was adapted from another answer on this site:

This was adapted from another answer on this site:

In the line

var itemDate = new Date(rows[i]['YourDateField']); 

'YourDateField' is the internal name of the field. This is important, it won't work if you use the display name.

Give me a few minutes and I'll see if I can come up with a quick code sample for what you want to do.

This was adapted from another answer on this site:

function colorCodeRows() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: function (ctx) { // get today's date var today = new Date(); // zero out the time portion so we will only compare days today.setHours(0,0,0,0); var rows = ctx.ListData.Row; for (var i = 0; i < rows.length; i++) { // get the date set in your date YourDateField var itemDate = new Date(rows[i]['YourDateField']); // zero out the time portion so we only compare days itemDate.setHours(0,0,0,0); var rowId = GenerateIIDForListItem(ctx, rows[i]); var row = document.getElementById(rowId); if (itemDate >= today) { row.style.backgroundColor = '#ED9898'; } } } }); } RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~site/SiteAssets/Scripts/example.js'), colorCodeRows); colorCodeRows(); 

How to set it up:

Copy all that code into a .js file and put it somewhere on your site. Before uploading it, change the URL in the second to last line to reflect the URL of where you plan to put the file. (I tend to put scripts in a folder called "Scripts" in my Site Assets library, but wherever you put it is fine as long as everyone has read access to it, so their browsers can download the file.)

Then go to the list in question, and from the gear menu in the upper right, choose "Edit Page". Once the page is in edit mode, edit the List View Web Part. In the Editor Pane, expand the "Miscellaneous" section at the bottom. At the bottom of the "Miscellaneous" section should be the JSLink box. Put the same URL to the file in the JSLink box. (Keep in mind you need to use URL tokens in JSLink, so it will be something like ~site/LibraryName/Folder/filename.js, not a server relative URL like /sites/MySite/LibraryName/filename.js.)

Hit OK, and stop editing the page. You should now see color coded rows.

A few other things to keep in mind:

When you add the script via the list view web part's JSLink property, you are really adding the script to the currently selected view. That means that if you want the script to be active on other views, you need to select the other views and repeat the process of setting the JSLink property with the URL of your script.

In your question, you say you want to color code the row when "a column...is equal or more than the current date", so that's what I put in the script example. But keep in mind that

if (itemDate >= today) 

will color code items with today's date or dates in the future. In order to color code things with today's date or dates in the past, use

if (itemDate <= today)