The public Frappe Gantt Block has the following signature:

Input Parameters

• Tasks - the list of tasks to render on the Gantt (may be empty)
  • Id - unique task id
  • Name - the name of the task
  • Start - start date-time of the task
  • Duration - task duration (example: 2h, 6d)
  • End - end date-time of the task
  • Progress - task progress in percentage
  • Important - boolean flag to classify the task as important or not
  • Dependencies - task dependencies (always refers to another Task Id). Use comma + space separated string of Task Ids ('Task 1, Task 2, Task 3, etc.')
  • CustomClass - Custom CSS class to apply to the task bar, as per the following example:
    .myclass .bar { fill: #FF8E76 !important; }
    .myclass .bar-progress { fill: #D95B43 !important; }
    Simply add the necessary classes to your application and set this attribute accordingly
• Holidays - list of holidays to display on the Gantt
  • Name - holiday name
  • Date - holiday date
• Options - Frappe Gantt options
  • TodayButton - adds a button to navigate to today’s date.
  • ViewModeSelect - allows selecting the view mode from a dropdown.
  • ViewMode - the initial view mode of the Gantt chart ('Day', 'Week', 'Month', 'Year').
  • Language - language for localization (ISO 639-1 codes like en, fr, es).
  • ScrollTo - determines the starting point when chart is rendered.
  • GanttOptions
    • ContainerHeight - height of the container.
    • ColumnWidth - width of each column in the timeline.
    • UpperHeaderHeight - height of the upper header in the timeline (in pixels).
    • LowerHeaderHeight - height of the lower header in the timeline (in pixels).
    • InfinitePadding - whether to extend timeline infinitely when user scrolls.
    • Lines - determines which grid lines to display ('none' for no lines, 'vertical' for only vertical lines, 'horizontal' for only horizontal lines, 'both' for complete grid.).
    • IgnoreWeekends - tells the Gantt to ignore weekends
    • DateFormat - format for displaying dates (Any valid JS date format string).
  • TaskOptions
    • BarHeight - height of task bars (in pixels).
    • BarCornerRadius - radius of the task bar corners (in pixels).
    • Padding - padding around task bars (in pixels).
    • ArrowCurve - curve radius of arrows connecting dependencies.
    • SnapAt - snap tasks at particular interval while resizing or dragging.
    • MoveDependencies - whether moving a task automatically moves its dependencies.
    • PopupOn - event to trigger the popup display ('click' or 'hover').
    • ReadOnly_Progress - disables editing task progress.
    • ReadOnly_Dates - disables editing task dates.
    • ReadOnly - Disables all editing features.

Events

• OnTaskClick
  • Triggered when a task is clicked
  • Returns:
    • TaskId - task id clicked
• OnTaskDatesChange
  • Triggered when task date(s) are changed
  • Returns:
    • TaskId - task id changed
    • NewStart - new start date
    • NewEnd - new end date
• OnTaskProgressChange
  • Triggered when task progress is changed
  • Returns:
    • TaskId - task id changed
    • NewProgress - new progress

In addition to the Block, the component also exposes a public Client Action called FrappeGantt_ScrollToDate, that accepts a Date as input parameter, and triggers the Gantt to scroll to that date.

Simply place the Block in a page or block, set the inpur parameters accordingly, handle the events if needed, and that's it.

You can play with the demo by clicking on the Try Now button above.