Make a DATETIME column show red background 2 hours after duedate

Question

So I got this code, it makes the background green when it has passed the set taskduedate. But I want it to show red background when it has passed 2 hours after taskduedate, it that possible?

{
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "debugMode": true,
      "txtContent": "@currentField",
      "attributes": {
        "class": "=if(Number(@currentField) != 0, if([$TaskDueDate] <= @now, 'sp-css-backgroundColor-successBackground50', 'sp-css-backgroundColor-blockingBackground50'), '')"
      }
    }

All with red circles should be red when the clock is 19:00

Answer 1

Give this a try. It will made the background green if the due date hasn't passed yet and will make it normal for up to 2 hours after it has passed, then red after 2 hours after the due date.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "debugMode": true,
      "txtContent": "@currentField",
      "attributes": {
        "class": "=if(Number(@currentField) != 0, if([$TaskDueDate] <= @now, 'sp-css-backgroundColor-successBackground50', if(Number(@now) >= (Number([$TaskDueDate])+1000*60*60*2),'sp-css-backgroundColor-blockingBackground50', '')), '')"
      }
    }

Answer 2

You could try the below json code:

{
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "div",
      "debugMode": true,
      "txtContent": "@currentField",
      "attributes": {
        "class": "=if(Number(@currentField) != 0, if([$TaskDueDate] <= @now + 7200000, 'sp-css-backgroundColor-blockingBackground50', if([$TaskDueDate] <= @now,'sp-css-backgroundColor-successBackground50','')), '')"
      }
 }