Gantt Views

Gantt views display tasks on a timeline with support for scheduling, dependencies, and resource management.

Features

Multiple time scales: Day, week, month, and quarter views
Drag-and-drop: Reschedule tasks by dragging
Resize handles: Change task duration by resizing
Dependencies: Visual arrows connecting related tasks
Grouping: Organize tasks by project, resource, or any field

Basic Gantt View

{
  "data_type": "UiView",
  "name": "task_gantt_view",
  "identifier": "task_gantt_view",
  "type": "Gantt",
  "model": "ProjectTask",
  "arch": [
    {
      "default_scale": "week",
      "content": [
        {
          "type": "field",
          "name": "name",
          "display_mode": "title"
        },
        {
          "type": "field",
          "name": "planned_start",
          "display_mode": "start"
        },
        {
          "type": "field",
          "name": "planned_end",
          "display_mode": "end"
        }
      ]
    }
  ]
}

Arch Configuration

The first element in arch can include configuration properties:

Property	Type	Default	Description
`default_scale`	String	`"week"`	Initial time scale: `day`, `week`, `month`, `quarter`
`row_height`	Number	`36`	Height of each task row in pixels
`bar_height`	Number	`24`	Height of task bars in pixels

{
  "default_scale": "month",
  "row_height": 40,
  "bar_height": 28,
  "content": [...]
}

Display Modes

Fields in Gantt views use display_mode to define their purpose:

Mode	Purpose	Field Type	Required
`title`	Task name displayed on bar	Char	Yes
`start`	Start date for bar positioning	Date/Datetime	Yes
`end`	End date for bar width	Date/Datetime	No (defaults to start + 1 day)
`progress`	Progress percentage (0-100) for fill	Float/Integer	No
`resource`	Row grouping (resource/project)	ManyToOne	No
`dependency`	Task dependencies for arrows	ManyToMany	No
`color`	Bar color override	Char (hex) or Selection	No

Full-Featured Example

{
  "data_type": "UiView",
  "name": "project_task_gantt_view",
  "identifier": "project_task_gantt_view",
  "type": "Gantt",
  "model": "ProjectTask",
  "arch": [
    {
      "default_scale": "week",
      "content": [
        {
          "type": "field",
          "name": "name",
          "display_mode": "title"
        },
        {
          "type": "field",
          "name": "planned_start",
          "display_mode": "start"
        },
        {
          "type": "field",
          "name": "planned_end",
          "display_mode": "end"
        },
        {
          "type": "field",
          "name": "progress",
          "display_mode": "progress"
        },
        {
          "type": "field",
          "name": "project",
          "display_mode": "resource"
        },
        {
          "type": "field",
          "name": "depends_on",
          "display_mode": "dependency"
        },
        {
          "type": "field",
          "name": "color",
          "display_mode": "color"
        }
      ]
    }
  ]
}

Resource Scheduling

For resource allocation views (e.g., employee scheduling, room bookings):

{
  "data_type": "UiView",
  "name": "booking_gantt_view",
  "identifier": "booking_gantt_view",
  "type": "Gantt",
  "model": "ResourceBooking",
  "arch": [
    {
      "default_scale": "day",
      "content": [
        {
          "type": "field",
          "name": "title",
          "display_mode": "title"
        },
        {
          "type": "field",
          "name": "start_datetime",
          "display_mode": "start"
        },
        {
          "type": "field",
          "name": "end_datetime",
          "display_mode": "end"
        },
        {
          "type": "field",
          "name": "resource",
          "display_mode": "resource"
        },
        {
          "type": "field",
          "name": "booking_type",
          "display_mode": "color"
        }
      ]
    }
  ]
}

Progress Tracking

Show task completion with the progress display mode:

{
  "type": "field",
  "name": "progress",
  "display_mode": "progress"
}

The progress field should contain a value from 0-100. The task bar will show a darker fill representing the completed portion.

Task Dependencies

To show dependency arrows between tasks:

Create a ManyToMany field on your model pointing to itself:

class ProjectTask(Model):
    depends_on = ManyToMany(
        "ProjectTask",
        through="FkTaskDependency",
        related_name="dependents",
        description="Dependencies"
    )

class FkTaskDependency(Model):
    task = ManyToOne("ProjectTask", related_name="dependency_links")
    depends_on = ManyToOne("ProjectTask", related_name="dependent_links")

Add the field with display_mode: "dependency":

{
  "type": "field",
  "name": "depends_on",
  "display_mode": "dependency"
}

Dependencies render as arrows from the end of the predecessor task to the start of the dependent task (finish-to-start).

Grouping

Use display_mode: "resource" to organize tasks by rows:

{
  "type": "field",
  "name": "assigned_user",
  "display_mode": "resource"
}

Tasks with the same group value appear together
Group headers are collapsible
Ungrouped tasks appear at the bottom

Custom Colors

Override task bar colors with:

{
  "type": "field",
  "name": "color",
  "display_mode": "color"
}

The field can contain:

Hex color codes: "#FF5733"
Selection values that map to colors

If no color is specified, bars use automatically generated colors based on task ID.

Window Action Configuration

Include Gantt in your action’s available modes:

{
  "data_type": "WindowAction",
  "identifier": "project_tasks_action",
  "name": "Tasks",
  "model": "ProjectTask",
  "modes": "List, Kanban, Gantt, Form",
  "default_view": "project_task_list_view",
  "views": [
    "project_task_list_view",
    "project_task_kanban_view",
    "project_task_gantt_view",
    "project_task_form_view"
  ]
}

User Interaction

Time Scale

Users can switch between scales using the toolbar buttons:

Day: Hour-by-hour view
Week: Day-by-day view
Month: Week-by-week view
Quarter: Month-by-month view

Arrow buttons: Move forward/backward by one time unit
Today button: Jump to current date

Task Operations

Click: Open task form
Drag: Move task to new dates (updates start and end)
Resize left edge: Change start date
Resize right edge: Change end date

Model Requirements

For a model to work well with Gantt views:

class ProjectTask(Model):
    _verbose_name = "Task"

    # Required fields
    name = Char(max_length=255, required=True)
    planned_start = Date(description="Start Date")
    planned_end = Date(description="End Date")

    # Optional enhancements
    progress = Float(default=0, description="Progress %")
    project = ManyToOne("Project", related_name="tasks")
    assigned_user = ManyToOne("User", related_name="tasks")
    color = Char(max_length=7, description="Color")
    depends_on = ManyToMany(
        "ProjectTask",
        through="FkTaskDependency",
        related_name="dependents"
    )

Next Steps

List Views - Table displays
Kanban Views - Board displays
Calendar Views - Date-based displays