.

static/js/calendar.js

@@ -29,7 +29,11 @@
   let viewMonth = new Date().getMonth();
   let selStart = null; let selEnd = null; let previewEnd = null;
 
-    function inLeaves(isoStr){ for(const L of leaves){ if(!L.start) continue; if(L.start<=isoStr && isoStr<=L.end) return true } return false }
+    function inLeaves(isoStr){
+      const matches = [];
+      for(const L of leaves){ if(!L.start) continue; if(L.start<=isoStr && isoStr<=L.end) matches.push(L); }
+      return matches;
+    }
 
     function buildControls(){
       let controls = document.getElementById('calendar-controls');
@@ -84,7 +88,31 @@
           else{
             const isoStr = iso(viewYear, viewMonth, cur);
             dayDiv.textContent = cur;
-            if(inLeaves(isoStr)) dayDiv.classList.add('leave');
+            const matches = inLeaves(isoStr);
+            if(matches && matches.length){
+              dayDiv.classList.add('leave');
+              try{
+                // collect distinct colors for this day's matches
+                const colors = Array.from(new Set(matches.map(x=>x.color).filter(Boolean)));
+                if(colors.length===1){
+                  dayDiv.style.backgroundImage = ''; // clear any previous gradient
+                  dayDiv.style.backgroundColor = colors[0];
+                } else if(colors.length>1){
+                  // build an equal-split horizontal gradient (cap to 6 colours)
+                  const n = Math.min(colors.length, 6);
+                  const seg = 100 / n;
+                  const stops = colors.slice(0,n).map((c,i)=>{
+                    const start = Math.round(i*seg);
+                    const end = Math.round((i+1)*seg);
+                    return `${c} ${start}% ${end}%`;
+                  }).join(', ');
+                  dayDiv.style.backgroundColor = '';
+                  dayDiv.style.backgroundImage = `linear-gradient(90deg, ${stops})`;
+                }
+              }catch(e){ /* defensive: leave default styling */ }
+              // set tooltip to show reasons / worker names for overlapping leaves
+              try{ dayDiv.title = matches.map(x => x.reason || '').filter(Boolean).join(', '); }catch(e){}
+            }
             const rangeEnd = selEnd || previewEnd;
             if(selStart && rangeEnd){ if(selStart<=isoStr && isoStr<=rangeEnd) dayDiv.classList.add('in-range'); }
             else if(selStart && selStart===isoStr) dayDiv.classList.add('selected');
@@ -113,7 +141,7 @@
           if(res.ok){
             const data = await res.json();
             if(data && Array.isArray(data.leaves)){
-              setLeaves(data.leaves.map(l=>({start:l.start, end:l.end, reason:l.reason}))); return;
+              setLeaves(data.leaves.map(l=>({start:l.start, end:l.end, reason:l.reason, color:l.color, worker_id:l.worker_id}))); return;
             }
           }
         }catch(e){ console.error('refreshLeaves failed', e); }