Agree that there are many ways to achieve this - JSLink, SPFx etc. But below is a quick and easy method of adding the HTML and JavaScript in a calculated field.
Adding HTML in calculated field is not going to be supported in the future by MS, however this method still works:
Create a calculated column and add the below code. Here "DueDate" is the date field.
By modifying the Range and CSS values - logic can be changed for various due dates.
=IF(ISBLANK([DueDate]),"Missing Due date",
"
&" var SPday=new Date();"
&" SPday.setFullYear("
&YEAR([DueDate])
&","
&MONTH([DueDate])-1
&","
&DAY([DueDate])
&");"
&" var Days=Math.round((SPday.getTime()-new Date().getTime())/86400000);"
&" var Range=[ -365*20 , -365*10 , -1 , 0 , 30 , 60 , 90 ];"
&" var CSS=['Pink','Pink','Pink','transparent','yellow','transparent','transparent'];"
&" for (var i=0;i
&" var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"
&" TR.style.backgroundColor=Color;"
&" this.parentNode.innerHTML=((Days<0 due="" font="" ot="">
&"}"">")
Reference - https://sharepoint.stackexchange.com/questions/151144/how-to-use-today-and-me-in-calculated-column/151147
