Frappe Gantt

You can install Frappe Gantt via npm or include it directly in your HTML using a script tag or CDN.

NPM Installation:

npm install frappe-gantt

HTML Inclusion (Local):

<script src="frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="frappe-gantt.css" />

HTML Inclusion (CDN):

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css" />

To contribute to Frappe Gantt, follow these steps to clone the repository, install dependencies, and build the project:

1. Clone the repository.
2. Navigate to the project directory.
3. Install dependencies using pnpm i.
4. Build the project using pnpm run build or use pnpm run build-dev to build and watch for changes.
5. Open index.html in your browser to view and test changes.

pnpm i
pnpm run build
# or for development with watching:
pnpm run build-dev

The popup option is a function used to customize the task popup. The function receives an object containing:

• task: The task object.
• chart: The Gantt chart instance.
• get_title, get_subtitle, get_details: Functions to retrieve HTML nodes for those sections.
• set_title, set_subtitle, set_details: Functions to set HTML for those sections.
• add_action: Function accepting (html, func) to add an action and its callback.

Return values of the popup function:

• false: No popup is rendered.
• undefined: The popup is rendered based on manipulations made within the function.
• HTML string: The popup will be rendered using the provided string.

The view_modes option allows you to define custom available view modes. It accepts an array of objects. Each object can include:

• name (string): The name of the view mode.
• padding (interval): Time padding.
• step: The interval of each column.
• lower_text (string|function): Format for text in the lower header. If a function, it receives (currentDate, previousDate, lang).
• upper_text (string|function): Format for text in the upper header. If a function, it receives (currentDate, previousDate, lang).
• upper_text_frequency (number): Frequency of upper text updates.
• thick_line (function): Returns boolean to determine if a date line should be thicker.

Additionally, you can override date_format, column_width, and snap_at specifically for a view mode.

To start using Frappe Gantt, define an array of task objects and instantiate the Gantt class by passing a selector for the container element and the tasks array. You can update the chart by appending tasks to the tasks array and calling .refresh() on the gantt instance.

let tasks = [
  {
    id: '1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20
  },
  // ...
]
let gantt = new Gantt("#gantt", tasks);

// Use .refresh to update the chart
gantt.tasks.append({ id: '2', name: 'New Task', start: '2017-01-01', end: '2017-01-05', progress: 0 });
gantt.tasks.refresh();

Interact with an existing Gantt instance using the following methods:

• .update_options(new_options): Re-renders the chart with the provided new_options object.
• .change_view_mode(view_mode, [maintain_pos]): Updates the view mode. view_mode can be a name (string) or a view mode object. maintain_pos (boolean, default false) determines if the scroll position is maintained.
• .scroll_current(): Scrolls the chart to the current date.
• .update_task(task_id, new_details): Re-renders a specific task bar using its task_id and an object of new_details.

You can configure the Gantt chart to ignore specific dates or time periods (like weekends) using the ignore option in the constructor.

• String 'weekend': Automatically ignores Saturdays and Sundays.
• Date strings: Pass a string like '2023-12-25' to ignore a specific date.
• Function: Pass a function (date) => boolean to define custom logic for ignoring dates.
• Holidays: Use the holidays option to highlight specific dates with colors. You can pass an object where keys are colors and values are either 'weekend' or a function/date object.

The view_modes option allows you to define custom time scales. Each mode object typically includes:

• name: The identifier for the mode.
• step: The time increment (e.g., '1 day').
• column_width: The width of each column in pixels.
• upper_text: A function or string to format the top header.
• lower_text: A function or string to format the bottom header.
• padding: Padding around the task range.

Frappe Gantt provides a wide range of configuration options to customize the appearance and behavior of the chart. Common options include:

• arrow_curve: Curve radius of arrows connecting dependencies (positive integer).
• bar_height: Height of task bars in pixels.
• container_height: Height of the container (auto or positive integer).
• date_format: Format for displaying dates (e.g., YYYY-MM-DD).
• view_mode: Initial view mode (Day, Week, Month, Year).
• readonly: Disables all editing features.
• language: ISO 639-1 code for localization (e.g., en, fr).
• holidays: Object mapping CSS colors to holiday types (e.g., weekend).
• is_weekend: Function to determine if a day is a weekend.
• lines: Grid line display (none, vertical, horizontal, both).
• popup_on: Event to trigger popup (click or hover).

Use the update_task(id, new_details) method to modify an existing task. This method updates the task data and refreshes the corresponding bar in the chart.

• id: The unique ID of the task to update.
• new_details: An object containing the properties to update (e.g., start, end, progress).