Skip to main content

deadlines

PRO

The functionality is available in PRO Edition only

Description​

Optional. Enables deadline markers on the chart and the Deadline field in the task editor

Usage​

deadlines?: boolean;

Parameters​

  • true - enables deadline functionality:
    • a flag icon is displayed on the chart next to tasks with a deadline set; if a task is overdue, the icon turns red
    • the Deadline field appears in the Scheduling tab of the task editor
    • tasks can define the deadline property (see tasks)
  • false - (default) deadline functionality is disabled

Example​

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar/vue-gantt";
  import { addDays } from "date-fns";

  const data = getData();
  const tasks = structuredClone(data.tasks);
  const { links, scales } = data;

  for (let i = 0, task; i < tasks.length; task = tasks[i], ++i) {
    if (task?.type === "task" || task?.type === "milestone") {
      task.deadline = addDays(
        task.start,
        (i % 5 === 0 ? -1 : (i % 3) + 1) + (task.duration ?? 0)
      );
    }
  }
</script>

<template>
  <Gantt :tasks="tasks" :links="links" :scales="scales" :deadlines="true" />
</template>

Related articles: