...

output/timetable.css

@@ -317,4 +317,8 @@ table.transposed th.bank-holiday {
 
 .target-assigned.no-colour {
     background-color: white !important;
+}
+
+.locum-shift {
+    background-color: lightgreen;
 }

output/timetable.js

@@ -283,6 +283,7 @@ $(".table-div .worker-row .worker").each((n, tr) => {
     }
 
     shift_counts = jtr.data("shift-counts")
+    locum_shift_counts = jtr.data("locum-shift-counts")
     shift_targets = jtr.data("worker-targets")
 
     oshifts.forEach((s) => {
@@ -292,7 +293,11 @@ $(".table-div .worker-row .worker").each((n, tr) => {
             } else {
                 c = 0;
             }
-            row.append(`<td class="target-assigned ${s}" data-assigned=${c} data-target=${shift_targets[s].toFixed(2)} data-diff=${shift_targets[s].toFixed(2)-c}>${c} (${shift_targets[s].toFixed(2)})</td>`)
+            locum_shifts = ""
+            if (s in locum_shift_counts) {
+                locum_shifts = `+${locum_shift_counts[s]}`
+            }
+            row.append(`<td class="target-assigned ${s}" data-assigned=${c} data-target=${shift_targets[s].toFixed(2)} data-diff=${shift_targets[s].toFixed(2)-c}>${c}${locum_shifts} (${shift_targets[s].toFixed(2)})</td>`)
 
         } else {
             row.append(`<td>-</td>`)