Add a script editor web part and drop this in it!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<script type="text/javascript"> SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { SPClientTemplates.TemplateManager.RegisterTemplateOverrides({ OnPostRender: function (ctx) { // get today's date var today = new Date(); var colorRed = new Date(); colorRed.setDate(today.getDate() + 180); var colorYellow = new Date(); colorYellow.setDate(today.getDate() + 365); var colorGreen = new Date(); colorGreen.setDate(today.getDate() + 365); // zero out the time portion so we will only compare days today.setHours(0,0,0,0); colorRed.setHours(0,0,0,0); colorYellow.setHours(0,0,0,0); colorGreen.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]['Expiration_x0020_Date']); //alert(itemDate); // 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 (row!=null&&itemDate > colorGreen) { row.style.backgroundColor = '#77DD77'; } if (row!=null&&itemDate <= colorYellow) { row.style.backgroundColor = '#FDFD96'; } if (row!=null&&itemDate <= colorRed) { row.style.backgroundColor = '#FF0000'; } } } }); }); </script> <style> /* Set border for every row */ .ms-cellstyle { border: 1px solid #555555 !important; /* !important needed over override SharePoint inline style */ } .ms-cellStyleNonEditable { border: 1px solid #555555 !important; /* !important needed over override SharePoint inline style */ } </style> |