Core herunterladen

Arbeitskalender

Ein Arbeitskalender (calendar: { workingDays, holidays }): arbeitsfreie Tage sind abgedunkelt und zurückgenommen, Feiertage farblich markiert und benannt. Aufgaben mit Start + Dauer zählen Arbeitstage; die Spalte Duration zählt ebenfalls Arbeitstage. Beim Ziehen bleibt die Länge einer Aufgabe in Arbeitstagen erhalten, während arbeitsfreie Tage übersprungen werden.

Chart type
Gantt gantt
Tier
Premium
Collection
Gantt
Zeichnen
Live im Website-Design
.md ansehen Agenten einrichten
LIVE/gantt/working-calendar8 of 35 in Gantt

Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.

Configuration

Original Standalone 
const options = {
  "responsive": [
    {
      "breakpoint": 960,
      "options": {
        "plotOptions": {
          "gantt": {
            "grid": {
              "width": 180,
              "columns": [
                {
                  "key": "name",
                  "header": "Task / progress",
                  "value": (_raw, { task }) => (Number.isFinite(task.progress) ? Math.round(task.progress) + '% · ' : '') + task.name
                }
              ]
            }
          }
        }
      }
    }
  ],
  "chart": {
    "height": "auto",
    "toolbar": {
      "show": false
    },
    "type": "gantt",
    "events": {
      "taskChange": (e, ctx, o) => {
              const message = o.task.name + ' → ' + new Date(o.start).toDateString() + ' – ' + new Date(o.end - 1).toDateString()
              const output = ctx.el && ctx.el.ownerDocument && ctx.el.ownerDocument.querySelector('#stage .g-log')
              if (output) output.textContent = message
              else console.log(message)
            }
    }
  },
  "series": [
    {
      "name": "Release 7.2",
      "data": [
        {
          "id": "a",
          "name": "API hardening",
          "start": "2026-11-16",
          "duration": 5,
          "progress": 80
        },
        {
          "id": "b",
          "name": "Billing webhooks",
          "start": "2026-11-19",
          "duration": 6,
          "progress": 40,
          "dependsOn": [
            "a"
          ]
        },
        {
          "id": "c",
          "name": "Invoice PDFs",
          "start": "2026-11-25",
          "duration": 4,
          "progress": 10,
          "dependsOn": [
            "b"
          ]
        },
        {
          "id": "d",
          "name": "Load test",
          "start": "2026-12-01",
          "duration": 2,
          "dependsOn": [
            "c"
          ]
        },
        {
          "id": "e",
          "name": "Release",
          "start": "2026-12-03",
          "milestone": true,
          "dependsOn": [
            "d"
          ]
        }
      ]
    }
  ],
  "plotOptions": {
    "gantt": {
      "today": {
        "show": false
      },
      "drag": {
        "enabled": true
      },
      "calendar": {
        "workingDays": [
          1,
          2,
          3,
          4,
          5
        ],
        "holidays": [
          {
            "date": "2026-11-26",
            "name": "Thanksgiving"
          },
          {
            "date": "2026-11-27",
            "name": "Day after"
          }
        ]
      },
      "grid": {
        "width": 310,
        "columns": [
          "name",
          {
            "key": "start",
            "width": 64
          },
          {
            "key": "duration",
            "width": 48
          }
        ]
      },
      "range": {
        "min": 1794610800000,
        "max": 1796511600000
      }
    }
  },
  "theme": {
    "mode": "light",
    "preset": "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()

This example uses Premium modules. Compare licences · Embedding in a distributed product?