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:
  - - R
    - - 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