gantt days

buildoz.css

@@ -374,9 +374,11 @@ bz-grafloweditor .inner-console section .cols-2 input{
 
 
 bz-gantt{
+    display: block;
     position: relative;
     --row: 25px;
     --bar-gap: 4px; /* space above & below each bar inside its row */
+    --chart-left: calc(var(--tasks-width, 7em) + 1em); /* where the chart area starts */
 }
 bz-gantt ul.tasks{
     list-style: none;
@@ -394,6 +396,24 @@ bz-gantt ul.tasks li{
 
 bz-gantt.gantt bz-graflow{
     position: absolute;
-    left: calc(var(--tasks-width, 7em) + 1em);
+    left: var(--chart-left);
+    top: calc(var(--row) + var(--bar-gap)); /* one header row (days grid) + bar centering gap */
+    right: 0;
+    bottom: 0;
+    width: auto;  /* cancel the global bz-graflow 100vw/100vh defaults, */
+    height: auto; /* so the box stretches between its anchored edges   */
+}
+bz-gantt li.header div.day:first-of-type{ border-left: 1px dotted #555; }
+bz-gantt li.header div.day{
+    position: absolute;
+    /* anchored to bz-gantt (nearest positioned ancestor): spans all rows */
     top: var(--bar-gap);
+    bottom: 0;
+    border-right: 1px dotted #555;
+    font-size: .8em;
+}
+bz-gantt li.header div.day.today{
+    background: #AD8;
+    z-index: 999;
+    opacity: .3;
 }

bzGantt.js

@@ -142,9 +142,10 @@ class BZgantt extends Buildoz {
 
         const flow = { "nodes": [], "links": [] }
         let curY = 0
+        let endIdx = 0
         for(const task of this.tasks){
             const startIdx = this.getDayIndex(firstDate, new Date(task.start))
-            const endIdx =  this.getDayIndex(firstDate, new Date(task.end))
+            endIdx =  this.getDayIndex(firstDate, new Date(task.end))
             flow.nodes.push({
                 "nodeType": "bar",
                 "id": task.id,
@@ -163,11 +164,15 @@ class BZgantt extends Buildoz {
             }
             curY += this.rowHeight
         }
-        return flow
+        return([flow, endIdx])
     }
 
     refresh(){
         this.ul.innerHTML = ''
+        this.headerLi = document.createElement('li')
+        this.headerLi.classList.add('header')
+        this.ul.appendChild(this.headerLi)
+
         for(const task of this.tasks){
             const li = document.createElement('li')
             li.textContent = task.name
@@ -183,7 +188,26 @@ class BZgantt extends Buildoz {
         }
         this.style.setProperty('--tasks-width', Math.ceil(maxWidth) + 'px')
 
-        const flow = this.buildFlow()
+        const [flow, endIdx] = this.buildFlow()
+        
+        let dayDate = new Date(this.tasks[0].start)
+        for(let idx=0; idx<=endIdx; idx++){
+            const dayDiv = document.createElement('div')
+            dayDiv.classList.add('day')
+            dayDiv.style.left = `calc(var(--chart-left) + ${idx * this.dayWidth}px)`
+            dayDiv.style.width = this.dayWidth + 'px'
+            dayDiv.innerHTML = '&nbsp;' + dayDate.getDate()
+            if(dayDate.toISOString().substring(0,10) == (new  Date()).toISOString().substring(0,10)) dayDiv.classList.add('today')
+            dayDiv.setAttribute('title', new Intl.DateTimeFormat('fr-FR', {
+                timeZone: 'Europe/Paris',
+                day: '2-digit',
+                month: '2-digit',
+                year: '2-digit'
+              }).format(dayDate))
+            dayDate.setDate(dayDate.getDate() + 1)
+            this.headerLi.appendChild(dayDiv)
+        }
+
         this.graflow.loadFlow({
             "nodesFile": this.nodesfile,
             "flow": flow

graflow_examples/test8.html

@@ -29,15 +29,15 @@
         <script>
             const ganttData = {
                 "tasks": [
-                    { "id": "t1", "name": "Task 1", "start": "2026-09-01", "end":"2026-09-05", "color": "#8F8" },
+                    { "id": "t1", "name": "Task 1", "start": "2026-08-25", "end":"2026-08-29", "color": "#8F8" },
-                    { "id": "t2", "name": "Task 2", "start": "2026-09-15", "end":"2026-09-20", "color": "#F8F", "dependsOn": ["t8"] },
+                    { "id": "t2", "name": "Task 2", "start": "2026-09-08", "end":"2026-09-13", "color": "#F8F", "dependsOn": ["t8"] },
-                    { "id": "t3", "name": "Task 3", "start": "2026-09-20", "end":"2026-09-25", "color": "#FF8", "dependsOn": ["t9"] },
+                    { "id": "t3", "name": "Task 3", "start": "2026-09-13", "end":"2026-09-18", "color": "#FF8", "dependsOn": ["t9"] },
-                    { "id": "t4", "name": "Task 4", "start": "2026-09-01", "end":"2026-09-10", "color": "#F88" },
+                    { "id": "t4", "name": "Task 4", "start": "2026-08-25", "end":"2026-09-03", "color": "#F88" },
-                    { "id": "t5", "name": "Task 5", "start": "2026-09-05", "end":"2026-09-07", "color": "#88F", "dependsOn": ["t4", "t7"] },
+                    { "id": "t5", "name": "Task 5", "start": "2026-08-29", "end":"2026-08-31", "color": "#88F", "dependsOn": ["t4", "t7"] },
-                    { "id": "t6", "name": "Task 6", "start": "2026-09-07", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t5"] },
+                    { "id": "t6", "name": "Task 6", "start": "2026-08-31", "end":"2026-09-01", "color": "#8F8", "dependsOn": ["t5"] },
-                    { "id": "t7", "name": "Task 7", "start": "2026-09-05", "end":"2026-09-08", "color": "#88F", "dependsOn": ["t1"] },
+                    { "id": "t7", "name": "Task 7", "start": "2026-08-29", "end":"2026-09-01", "color": "#88F", "dependsOn": ["t1"] },
-                    { "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-08", "end":"2026-09-15", "color": "#8F8", "dependsOn": ["t6"] },
+                    { "id": "t8", "name": "Task 8 which is quite long", "start": "2026-09-01", "end":"2026-09-08", "color": "#8F8", "dependsOn": ["t6"] },
-                    { "id": "t9", "name": "Task 9", "start": "2026-09-15", "end":"2026-09-18", "color": "#F8F", "dependsOn": ["t8"] },
+                    { "id": "t9", "name": "Task 9", "start": "2026-09-08", "end":"2026-09-11", "color": "#F8F", "dependsOn": ["t8"] },
                 ], "color": "#8F8"
             }