GanttChart JAVASCRIPT UI Component API

GanttChart Javascript API

Class

GanttChart

GanttChart

Gantt charts are specialized bar charts that help clearly represent how tasks and resources are allocated over time in planning, project management, and scheduling applications.

Selector

smart-gantt-chart

Properties

AadjustToNonworkingTimeSpecifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.
AautoScheduleAutomatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.
AautoScheduleStrictModeThis setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.
AautoScrollStepSpecifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.
CcolumnMenuControls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.
CcolumnResizeSpecifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.
CcolumnResizeFeedbackControls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.
CcriticalPathEnables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.
CcurrentTimeRepresents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.
CcurrentTimeIndicatorControls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.
CcurrentTimeIndicatorIntervalSpecifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.
DdataExportConfigures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). Click for more details. Property object's options:
  • exportFiltered:boolean - Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
  • fileName:string - Specifies the name of the file that will be generated and saved when the export operation is completed.
  • itemType:string - Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.
DdataSourceDetermines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance. Required Task Properties: label – A string value representing the name or description of the task. dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD'). dateEnd – The task’s end date as a string in a valid date format. type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes. Optional Task Properties: connections – An array of objects defining dependencies between tasks. Each connection object requires: target – An integer specifying the zero-based index of the target task in the main tasks array. type – An integer (0–3) indicating the type of dependency: 0 – Start-to-Start 1 – End-to-Start 2 – End-to-End 3 – Start-to-End lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule. duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time. minDuration / maxDuration – Set minimum or maximum allowed duration for the task. minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats. minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats. progress – A number from 0 to 100 indicating the percentage of work completed. overdue – A boolean that is true if the task’s dateEnd has passed its deadline. disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline. disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline. dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks. segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations). synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks. expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks. The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/. Click for more details. Property object's options:
    DdayFormatSpecifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.
    DdateEndSpecifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.
    DdateStartSpecifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.
    DdateMarkersSpecifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule. Click for more details. Property object's options:
    • label:string | null - Determines the marker label.
    • date:string | date | number - Determines the date for the marker. The date can include time as well.
    • className:string? - Allows to add a custom class name to the marker.
    DdisabledSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.
    DdisableAutoScrollPrevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.
    DdisableTaskDragPrevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.
    DdisableTaskProgressChangePrevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.
    DdisableTaskResizePrevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.
    DdisableSelectionPrevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.
    DdisableSegmentDragPrevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.
    DdisableSegmentResizePrevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.
    DdisableWindowEditorPrevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.
    DdurationUnitSpecifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.
    FfilterRowSpecifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.
    FfirstDayOfWeekSpecifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.
    GgroupByResourcesOrganizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.
    HheaderTemplateEnables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.
    HhideDateMarkersSpecifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.
    HhideTimelineHeaderBy default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.
    HhideTimelineHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.
    HhideTimelineSecondHeaderDetailsBy default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.
    HhideResourcePanelControls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.
    HhorizontalScrollBarVisibilitySpecifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.
    HhourFormatSpecifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.
    IinfiniteTimelineWhen this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.
    IinfiniteTimelineStepSpecifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.
    IinvertedWhen enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.
    KkeyboardNavigationControls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.For the Task Table, the following keyboard shortcuts are available when a task is focused: Enter – Opens the Window editor, allowing you to edit the currently focused task. Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.
    UunlockKeySets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.
    LlocaleSpecifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.
    MmaxDetermines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.
    MminSpecifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.
    MmessagesDefines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.
    MmonthFormatSpecifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.
    MmonthScaleSpecifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.
    NnonworkingDaysSpecifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.
    NnonworkingHoursSpecifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.
    OonTaskRenderThis function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:1. 'task' – The full task object containing all associated data.2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.3. 'taskElement' – The root HTML element representing the task in the DOM.4. 'segmentElement' – The HTML element representing the current segment of the task.5. 'labelElement' – The HTML element that displays the segment’s label.You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.
    TtaskFormatFunctionA function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters: task: The JavaScript object representing the task's data and properties. taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.Use this function to add custom styles, event listeners, or additional content to each task element based on its data.
    TtooltipFormatFunctionA function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:- tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.- event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).- content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.
    PpopupWindowCustomizationFunctionA function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments: target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior. type — Specifies the purpose of the popup window. Possible values are: 'task': For editing or viewing a task. 'confirm': For displaying a confirmation prompt. 'connection': For actions related to connections between tasks (e.g., deleting a link). item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type). Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.
    PpopupWindowTabsSpecifies which tab sections are displayed within the popup window. This property accepts the following three values: general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property. dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task. segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task. Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.
    PprogressLabelFormatFunctionThis property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.
    QquarterFormatSpecifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.
    RresourcesReturns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access. Click for more details. Property object's options:
    • class:string - Resource class. Used to style the resource Timeline.
    • capacity:number - The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
    • hidden:boolean | undefined - Resource visibility.
    • id:string - Resource id. The unique id of the resource.
    • label:string | null - Resource label.
    • minCapacity:number - Resource min capacity
    • maxCapacity:number - Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
    • progress:number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
    • type:any - Resource type.
    • value:any - Resource value.
    • workload:string | number - Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
    RresourceColumnsDetermines which columns are displayed in the Resource Tree. Each entry in this property should be an Object containing the following keys:- label: Specifies the column header text as it will appear in the Task Tree.- value: Defines the property or content to be displayed in the cells of that column.By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.Additional configurable properties for each column object include: formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content. min: Sets the minimum width (in pixels or another supported unit) for the column. max: Sets the maximum width for the column. size: Specifies the fixed width for the column.Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed. Click for more details. Property object's options:
    • label:string | null - Column's label.
    • value:string | null - Column's value. The value shold reference an actual resoruce attribute.
    • min:string | number | null - Column's min size.
    • size:string | number | null - Column's size.
    • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
    RresourceFilteringSpecifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.
    RresourceGroupFormatFunctionA format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.
    RresourcePanelHeaderTemplateEnables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.
    RresourcePanelMinSpecifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.
    RresourcePanelSizeSpecifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.
    RresourcePanelRefreshRateControls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.
    RresourceTimelineFormatFunctionA callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters: taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell. resourceIndex – The index representing the current resource row. cellDate – A Date object or date string representing the current cell’s date.This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode: diagram – Return a string that will be rendered as the cell’s content. histogram – Return an object with the following properties: capacity: The current value to be visualized for the cell. maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale. custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.
    RresourceTimelineModeSpecifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).
    RresourceTimelineViewSpecifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.
    RrightToLeftGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.
    SselectedTaskIds"Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."
    SselectedResourceIdsSets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."---'Improved Version:'Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.
    SselectionModeDefines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.
    SshadeUntilCurrentTimeControls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.
    SshowSelectionColumnDisplays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.
    SshowBaselineControls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.
    SshowProgressLabelDisplays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.
    SsnapToNearestIf enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.
    SsortFunctionEnables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:
      dataSource – The complete array of data objects currently used by the table. sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration. directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index. defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.
    By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.
    SsortModeSpecifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.
    TtasksA getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array. Click for more details. Property object's options:
    • connections:array - Tasks connection.
      • Property object's options:
      • class:string - Project, Task or Milestone CSS class.
      • dateStart:string | Date - Project, Task or Milestone start date.
      • dateEnd:string | Date - Project, Task or Milestone end date.
      • deadline:string | Date - Determines the deadline for the Project, Task or Milestone.
      • disableResources:boolean - Project, Task or Milestone with disabled resources.
      • disableDrag:boolean - Project, Task or Milestone dragging is disabled.
      • disableResize:boolean - Project, Task or Milestone resizing is disabled.
      • dragProject:boolean - Project, Task or Milestone drag enabled in the view.
      • duration:number | undefined - The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
      • expanded:boolean - Project, Task or Milestone expanded state in the view.
      • hidden:boolean | undefined - Task visibility.
      • id:string | null - Project, Task or Milestone id.
      • indicators:{label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
        • Property object's options:
        • label:string? - Indicator label.
        • date:string | Date - Indicator date(can include time).
        • className:string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
        • icon:string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
        • tooltip:string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
      • label:string | null - Project, Task or Milestone label.
      • formatFunction:any - Project, Task or Milestone format function.
      • onRender:any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.
      • maxDateStart:string | Date - Project, Task or Milestone max start date.
      • minDateStart:string | Date - Project, Task or Milestone min start date.
      • maxDateEnd:string | Date - Project, Task or Milestone max end date.
      • minDateEnd:string | Date - Project, Task or Milestone min end date.
      • minDuration:number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
      • maxDuration:number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
      • overdue:boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
      • planned:{ dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
        • Property object's options:
        • dateStart:string | Date - Determines the planned dateStart of the task.
        • dateEnd:string | Date - Determines the planned dateEnd of the task.
        • duration:number | undefined - Determines the planned duration of the task.
      • progress:number - Project, Task or Milestone progress.
      • resources:array - Project, Task or Milestone resources.
        • Property object's options:
        • segments:{label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
          • Property object's options:
          • label:string | null - Segment label.
          • dateStart:string | Date - Segment start date.
          • dateEnd:string | Date - Segment end date.
          • disableDrag:boolean - Determines whether segment dragging is disabled.
          • disableResize:boolean - Determines whether segment resizing is disabled.
          • duration:number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
          • formatFunction:any - Segment label format function.
        • synchronized:boolean - Project, Task or Milestone synchronized in the view.
        • tasks:array - Project's tasks. Only projects can have tasks.
        • type:string - Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
        • value:any - Project, Task or Milestone value.
        TtaskColumns'Description'Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:- label: Specifies the text that will appear as the column header in the Task Tree.- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.By default, one column will be shown with all task labels. Additional columns can be configured using this property.'Optional properties for each column object:' formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element). min: Sets the minimum width of the column (in pixels or CSS units). max: Sets the maximum width of the column (in pixels or CSS units). size: Sets the default (actual) width of the column (in pixels or CSS units). customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments: label: The column label. value: The current cell value in the column. The function should return the editor component or element. setCustomEditorValue: A callback used to programmatically set the value of the custom editor. getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree. Click for more details. Property object's options:
        • disableEdit:boolean - Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
        • dateFormat:string | object | null - Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 
          dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
          . Another option is to use a date format string. Built-in Date formats:
          // short date pattern
          'd' - 'M/d/yyyy',
          // long date pattern
          'D' - 'dddd, MMMM dd, yyyy',
          // short time pattern
          't' - 'h:mm tt',
          // long time pattern
          'T' - 'h:mm:ss tt',
          // long date, short time pattern
          'f' - 'dddd, MMMM dd, yyyy h:mm tt',
          // long date, long time pattern
          'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
          // month/day pattern
          'M' - 'MMMM dd',
          // month/year pattern
          'Y' - 'yyyy MMMM',
          // S is a sortable format that does not vary by culture
          'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

          Date format strings:
          'd'-the day of the month;
          'dd'-the day of the month
          'ddd'-the abbreviated name of the day of the week
          'dddd'- the full name of the day of the week
          'h'-the hour, using a 12-hour clock from 1 to 12
          'hh'-the hour, using a 12-hour clock from 01 to 12

          'H'-the hour, using a 24-hour clock from 0 to 23
          'HH'- the hour, using a 24-hour clock from 00 to 23
          'm'-the minute, from 0 through 59
          'mm'-the minutes,from 00 though59
          'M'- the month, from 1 through 12
          'MM'- the month, from 01 through 12
          'MMM'-the abbreviated name of the month
          'MMMM'-the full name of the month
          's'-the second, from 0 through 59
          'ss'-the second, from 00 through 59
          't'- the first character of the AM/PM designator
          'tt'-the AM/PM designator
          'y'- the year, from 0 to 99
          'yy'- the year, from 00 to 99
          'yyy'-the year, with a minimum of three digits
          'yyyy'-the year as a four-digit number;
          'yyyyy'-the year as a four-digit number.
        • numberFormat:string | object | null - Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
          'd' - decimal numbers.
          'f' - floating-point numbers.
          'n' - integer numbers.
          'c' - currency numbers.
          'p' - percentage numbers.

          For adding decimal places to the numbers, add a number after the formatting stri

          For example: 'c3' displays a number in this format $25.256
        • label:string | null - Column's label.
        • value:string | null - Column's value.
        • size:string | number | null - Column's size.
        • minWidth:string | number | null - Column's min width.
        • formatFunction:any - Column's format function. You can use it to customize the column label's rendering.
        • customEditor:function | undefined | null - A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:
          • name - the name of the task property that is going to be edited.
          • value - the value of the task property that is going to be edited.
          It's also important to define a getCustomEditorValue to return the value from the custom editor.
        • getCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
        • setCustomEditorValue:function | undefined | null - A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -
          • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
          • columnValue - the value property of the column.
          • value - the value of the task property that the column displays(the editor value).
        TtaskFilteringSpecifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.
        TtaskPanelMinSpecifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.
        TtaskPanelSizeSpecifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.
        TtimelineMinSpecifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.
        TtreeMinSpecifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.
        TtreeSizeSpecifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.
        TtimelineHeaderFormatFunctionA custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments: date (Date): The JavaScript Date object representing the date associated with the current header cell. type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents. isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row. value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.
        TtooltipControls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. Click for more details. Property object's options:
        • arrow:boolean - Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
        • delay:number - Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
        • enabled:boolean - Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
        • offset:number[] - Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.
        VverticalScrollBarVisibilitySpecifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.
        VviewSpecifies the date range displayed on the timeline. Accepted values include:day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.week: The timeline presents each day within a single week, providing a broader weekly overview.month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.year: The timeline displays each month of the year, providing a high-level annual perspective.resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.
        YyearFormatSpecifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.
        WweekFormatSpecifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.
        TthemeSpecifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.
        UunfocusableDetermines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.

        Events

        BbeginUpdateThis event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.
        EendUpdateThis event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.
        CconnectionStartThis event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.
        CconnectionEndThis event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.
        CchangeThis event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.
        CcolumnResizeThis event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.
        CclosingThis event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.
        CcloseThis event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.
        CcollapseThis event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.
        DdragStartThis event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.
        DdragEndThis event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.
        EexpandThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.
        FfilterThis event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.
        IitemClickThis event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.
        IitemInsertThis event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.
        IitemRemoveThis event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.
        IitemUpdateThis event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.
        OopeningThis event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.
        OopenThis event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.
        PprogressChangeStartThis event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.
        PprogressChangeEndThis event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).
        RresizeStartThis event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.
        RresizeEndThis event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.
        SsortThis event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.
        SscrollBottomReachedThis event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.
        SscrollTopReachedThis event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.
        SscrollLeftReachedThis event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.
        SscrollRightReachedThis event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.

        Methods

        AaddFilterEnables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.
        CclearFiltersRemoves all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.
        CclearSortRemoves any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.
        CclearSelectionDeselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.
        CclearStateRemoves a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.
        CclearTasksDeletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.
        CclearResourcesDeletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.
        CcreateConnectionEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
        CcollapseCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.
        BbeginUpdateInitiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.
        EendUpdateConcludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.
        RrefreshRefreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.
        EensureVisibleEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.
        EexpandExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.
        EexportDataExports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.
        GgetConnectionsRetrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:- **id**: A unique identifier for the connection.- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).- **startTaskId**: The unique identifier of the task where the connection originates.- **endTaskId**: The unique identifier of the task where the connection terminates.- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).- **endIndex**: The index position within the end task where the connection attaches.- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.This structure provides all necessary details for understanding the relationship and timing between connected tasks.
        GgetConnectionDetailsReturns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.
        GgetStateProvides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.
        GgetItemPathReturns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.
        GgetTaskReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.
        GgetTasksReturns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.
        GgetTaskIndexReturns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.
        GgetTaskConnectionsReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.
        GgetTaskProjectReturns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.
        GgetResourceReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.
        GgetResourcesReturns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.
        GgetResourceIndexReturns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.
        GgetResourceTasksReturns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.
        GgetSelectedIdsReturns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.
        GgetSelectedTasksReturns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.
        GgetSelectedResourcesReturns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.
        GgetWorkingHoursReturns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).
        HhideTooltipConceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.
        IisWorkingDayDetermines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.
        LloadStateEnhancement:Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.
        RremoveAllConnectionsRemoves all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.
        RremoveConnectionRemoves a connection between two tasks. The function can be called in one of two ways:1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").2. With a single connection string argument that describes the connection (e.g., "1->2:FS").This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
        RremoveTaskConnectionDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
        SshowTooltipDisplays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.
        SscrollToDateScrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.
        SsaveStateStores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.
        IinsertTaskInserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.
        UupdateTaskUpdates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.
        RremoveTaskRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.
        IinsertResourceAdds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.
        UupdateResourceUpdates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.
        RremoveResourceDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.
        OopenWindowOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.
        CcloseWindowCloses any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.
        PprintConfigures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.
        SsetWorkTimeEnables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.
        SselectTaskEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.
        SselectResourceEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.
        UunselectTaskEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.
        UunselectResourceEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.
        UunsetWorkTimeRemoves any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.
        SsortAutomatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.

        Properties

        adjustToNonworkingTimeboolean

        Specifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.

        Default value

        false
        Try a demo showcasing the adjustToNonworkingTime property.

        Example

        Set the adjustToNonworkingTime property. 

         <smart-gantt-chart adjust-to-nonworking-time></smart-gantt-chart>

        Set the adjustToNonworkingTime property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.adjustToNonworkingTime = false;

        Get the adjustToNonworkingTime property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let adjustToNonworkingTime = ganttchart.adjustToNonworkingTime;

        autoScheduleboolean



        Automatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.

        Default value

        false
        Try a demo showcasing the autoSchedule property.

        Example

        Set the autoSchedule property. 

         <smart-gantt-chart auto-schedule></smart-gantt-chart>

        Set the autoSchedule property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.autoSchedule = false;

        Get the autoSchedule property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let autoSchedule = ganttchart.autoSchedule;

        autoScheduleStrictModeboolean

        This setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.

        Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.

        Default value

        false
        Try a demo showcasing the autoScheduleStrictMode property.

        Example

        Set the autoScheduleStrictMode property. 

         <smart-gantt-chart auto-schedule-strict-mode></smart-gantt-chart>

        Set the autoScheduleStrictMode property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.autoScheduleStrictMode = false;

        Get the autoScheduleStrictMode property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let autoScheduleStrictMode = ganttchart.autoScheduleStrictMode;

        autoScrollStepnumber

        Specifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.

        Default value

        5
        Try a demo showcasing the autoScrollStep property.

        Example

        Set the autoScrollStep property. 

         <smart-gantt-chart auto-scroll-step='5'></smart-gantt-chart>

        Set the autoScrollStep property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.autoScrollStep = 10;

        Get the autoScrollStep property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let autoScrollStep = ganttchart.autoScrollStep;

        columnMenuboolean

        Controls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.

        Default value

        false

        Example

        Set the columnMenu property. 

         <smart-gantt-chart column-menu></smart-gantt-chart>

        Set the columnMenu property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.columnMenu = false;

        Get the columnMenu property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let columnMenu = ganttchart.columnMenu;

        columnResizeboolean

        Specifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.

        Default value

        false

        Example

        Set the columnResize property. 

         <smart-gantt-chart column-resize></smart-gantt-chart>

        Set the columnResize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.columnResize = false;

        Get the columnResize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let columnResize = ganttchart.columnResize;

        columnResizeFeedbackboolean

        Controls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.

        Default value

        false

        Example

        Set the columnResizeFeedback property. 

         <smart-gantt-chart column-resize-feedback></smart-gantt-chart>

        Set the columnResizeFeedback property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.columnResizeFeedback = false;

        Get the columnResizeFeedback property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let columnResizeFeedback = ganttchart.columnResizeFeedback;

        criticalPathboolean

        Enables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.

        Default value

        false

        Example

        Set the criticalPath property. 

         <smart-gantt-chart critical-path></smart-gantt-chart>

        Set the criticalPath property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.criticalPath = false;

        Get the criticalPath property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let criticalPath = ganttchart.criticalPath;

        currentTimestring | Date

        Represents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.

        Default value

        ""

        currentTimeIndicatorboolean

        Controls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.

        Default value

        false

        Example

        Set the currentTimeIndicator property. 

         <smart-gantt-chart current-time-indicator></smart-gantt-chart>

        Set the currentTimeIndicator property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.currentTimeIndicator = false;

        Get the currentTimeIndicator property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let currentTimeIndicator = ganttchart.currentTimeIndicator;

        currentTimeIndicatorIntervalnumber

        Specifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.

        Default value

        1

        Example

        Set the currentTimeIndicatorInterval property. 

         <smart-gantt-chart current-time-indicator-interval='60'></smart-gantt-chart>

        Set the currentTimeIndicatorInterval property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.currentTimeIndicatorInterval = 120;

        Get the currentTimeIndicatorInterval property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let currentTimeIndicatorInterval = ganttchart.currentTimeIndicatorInterval;

        dataExportobject

        Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior).

        Properties

        exportFiltered
        fileName
        itemType

        exportFilteredboolean

        Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.

        Default value

        false

        Get the exportFiltered property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let exportFiltered = ganttchart.dataExport.exportFiltered;

        fileNamestring

        Specifies the name of the file that will be generated and saved when the export operation is completed.

        Default value

        "smartGanttChart"

        Get the fileName property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let fileName = ganttchart.dataExport.fileName;

        itemType"task" | "resource"

        Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.

        Allowed Values

        • "task" - Exports the Task Tree.
        • "resource" - Exports the Resource Tree.

        Default value

        "task"

        Get the itemType property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let itemType = ganttchart.dataExport.itemType;
        Try a demo showcasing the dataExport property.

        dataSourceany

        Determines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance.

        Required Task Properties:



        • label – A string value representing the name or description of the task.


        • dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD').


        • dateEnd – The task’s end date as a string in a valid date format.


        • type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes.



        Optional Task Properties:


        • connections – An array of objects defining dependencies between tasks. Each connection object requires:


          • target – An integer specifying the zero-based index of the target task in the main tasks array.


          • type – An integer (0–3) indicating the type of dependency:

            • 0 – Start-to-Start

            • 1 – End-to-Start

            • 2 – End-to-End

            • 3 – Start-to-End




          • lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule.




        • duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time.


        • minDuration / maxDuration – Set minimum or maximum allowed duration for the task.


        • minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats.


        • minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats.


        • progress – A number from 0 to 100 indicating the percentage of work completed.


        • overdue – A boolean that is true if the task’s dateEnd has passed its deadline.


        • disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline.


        • disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline.


        • dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks.


        • segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations).


        • synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks.


        • expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks.



        The GanttChart component can also accept a DataAdapter instance as its data source for flexible data integration. For more details, see the DataAdapter documentation: https://www.htmlelements.com/docs/data-adapter/.



        The dataSource property's object value may have the following properties:
        • connections: array - Tasks connection.
          • lag: number | undefined - Task's connection lag. Used by the Auto Scheduling (autoSchedue proeprty) feature to determine the connection lag, which is the time before/after the target begins/ends (depending on the connection type). The lag can be a negative number in which case it acts as lead time. In other words, the lab property is used to make a task start late(positive lag) or early(negative lag) then planned when autoSchedule is enabled.
            • lag
          • target: string | number - Task's connection target.
            • target
          • type: number - Task's connection type.
            • type
        • connectionType: array - Project, Task or Milestone connection type which may include 'start' and 'end' string values.
        • class: string - Project, Task or Milestone CSS class.
        • dateStart: string | Date - Project, Task or Milestone start date.
        • dateEnd: string | Date - Project, Task or Milestone end date.
        • deadline: string | Date - Determines the deadline for the Project, Task or Milestone.
        • disableResources: boolean - Disable the resources for Project, Task or Milestone.
        • disableDrag: boolean - Project, Task or Milestone dragging is disabled.
        • disableResize: boolean - Project, Task or Milestone resizing is disabled.
        • dragProject: boolean - Project, Task or Milestone drag enabled in the view.
        • duration: number | undefined - The duration of the Project, Task or Milestone in miliseconds. The duration unit can be changed via the durationUnit property.
        • expanded: boolean - Project, Task or Milestone expanded state in the view.
        • id: string | null - Project, Task or Milestone id.
        • indicators: {label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[] - Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
          • label: string? - Indicator label.
            • label
          • date: string | Date - Indicator date(can include time).
            • date
          • className: string? - A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
            • className
          • icon: string? - Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
            • icon
          • tooltip: string? - Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
            • tooltip
        • label: string | null - Project, Task or Milestone label.
        • formatFunction: any - Project, Task or Milestone format function. The function gets passed a label as a function argument and you can return another formatted label.
        • onRender: any - Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
          • task - the task object.
          • segment - the task current segment object. If the task has only one segment, the task object is passed again.
          • taskElement - the task's html element.
          • segmentElement - the task's segment html element.
          • labelElement - the task's segment label html element.
        • maxDateStart: string | Date - Project, Task or Milestone max start date.
        • minDateStart: string | Date - Project, Task or Milestone min start date.
        • maxDateEnd: string | Date - Project, Task or Milestone max end date.
        • minDateEnd: string | Date - Project, Task or Milestone min end date.
        • minDuration: number | undefined - The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
        • maxDuration: number | undefined - The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
        • overdue: boolean - Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
        • planned: { dateStart: date | string | number, dateEnd: date | string | number, duration?: number } - Determines the planned dateStart/dateEnd for as the baseline for the task.
          • dateStart: string | Date - Determines the planned dateStart of the task.
            • dateStart
          • dateEnd: string | Date - Determines the planned dateEnd of the task.
            • dateEnd
          • duration: number | undefined - Determines the planned duration of the task.
            • duration
        • progress: number - Project, Task or Milestone progress.
        • resources: {id: string, capacity: number, label: string, value: string, maxCapacity: number, type: string}[] - Project, Task or Milestone resources
          • capacity: number - The capacity of a resource. By default it is used to determines the working capacity ( in hours ) of the resource.
            • capacity
          • id: string - Resource id. The unique id of the resource.
            • id
          • label: string | null - Resource label.
            • label
          • minCapacity: number - Resource min capacity
            • minCapacity
          • maxCapacity: number - Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
            • maxCapacity
          • progress: number - Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
            • progress
          • type: any - Resource type.
            • type
          • value: any - Resource value.
            • value
          • hidden: boolean | undefined - Resource visibility.
            • hidden
          • workload: string | number - Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
            • workload
        • segments: {label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[] - Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
          • label: string | null - Segment label.
            • label
          • dateStart: string | Date - Segment start date.
            • dateStart
          • dateEnd: string | Date - Segment end date.
            • dateEnd
          • disableDrag: boolean - Determines whether segment dragging is disabled.
            • disableDrag
          • disableResize: boolean - Determines whether segment resizing is disabled.
            • disableResize
          • duration: number | undefined - The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
            • duration
          • formatFunction: any - Segment label format function.
            • formatFunction
        • synchronized: boolean - Project, Task or Milestone synchronized in the view.
        • tasks: array - Project's tasks.
        • type: string - Project, Task or Milestone type. Possible values are 'project' and 'task'
        • value: any - Project, Task or Milestone value.
        • hidden: boolean | undefined - Project, Task or Milestone value.
        Try a demo showcasing the dataSource property.

        Example

        Set the dataSource property. 

         <smart-gantt-chart data-source='[{ label: 'Task 3', dateStart: '2018-02-05', dateEnd: '2018-07-08', progress: 50, type: 'task' }]'></smart-gantt-chart>

        Set the dataSource property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.dataSource = [{  label: 'Task 2', dateStart: '2020-03-10T15:30:00', dateEnd: '2018-08-10', type: 'task' }, { label: 'Milestone 1', dateEnd: '2018-05-24', type: 'milestone', connections: [{target: 5,type: 1 }]}, { label: 'Task 3', dateStart: '2018-02-05', dateEnd: '2018-07-08', progress: 50,  type: 'task' }];

        Get the dataSource property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dataSource = ganttchart.dataSource;

        dayFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

        Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.

        Default value

        "short"

        Example

        Set the dayFormat property. 

         <smart-gantt-chart day-format='numeric'></smart-gantt-chart>

        Set the dayFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.dayFormat = 'short';

        Get the dayFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dayFormat = ganttchart.dayFormat;

        dateEndstring | Date

        Specifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.

        Default value

        ""

        Example

        Set the dateEnd property. 

         <smart-gantt-chart date-end='new Date(2050,0,1)'></smart-gantt-chart>

        Set the dateEnd property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.dateEnd = 2070-1-1;

        Get the dateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateEnd = ganttchart.dateEnd;

        dateStartstring | Date

        Specifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.

        Default value

        ""

        Example

        Set the dateStart property. 

         <smart-gantt-chart date-start='new Date(2002,0,1)'></smart-gantt-chart>

        Set the dateStart property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.dateStart = 2010-1-1;

        Get the dateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateStart = ganttchart.dateStart;

        dateMarkers{label?: string, date: date | string, className?: string }[]

        Specifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule.

        Properties

        label
        date
        className

        labelstring | null

        Determines the marker label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.dateMarkers[0].label;

        datestring | date | number

        Determines the date for the marker. The date can include time as well.

        Get the date property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let date = ganttchart.dateMarkers[0].date;

        classNamestring?

        Allows to add a custom class name to the marker.

        Get the className property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let className = ganttchart.dateMarkers[0].className;

        disabledboolean

        Specifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.

        Default value

        false

        Example

        Set the disabled property. 

         <smart-gantt-chart disabled></smart-gantt-chart>

        Set the disabled property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disabled = false;

        Get the disabled property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disabled = ganttchart.disabled;

        disableAutoScrollboolean

        Prevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.

        Default value

        false

        Example

        Set the disableAutoScroll property. 

         <smart-gantt-chart disable-auto-scroll></smart-gantt-chart>

        Set the disableAutoScroll property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableAutoScroll = false;

        Get the disableAutoScroll property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableAutoScroll = ganttchart.disableAutoScroll;

        disableTaskDragboolean

        Prevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.

        Default value

        false

        Example

        Set the disableTaskDrag property. 

         <smart-gantt-chart disable-task-drag></smart-gantt-chart>

        Set the disableTaskDrag property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableTaskDrag = false;

        Get the disableTaskDrag property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableTaskDrag = ganttchart.disableTaskDrag;

        disableTaskProgressChangeboolean

        Prevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.

        Default value

        false

        Example

        Set the disableTaskProgressChange property. 

         <smart-gantt-chart disable-task-progress-change></smart-gantt-chart>

        Set the disableTaskProgressChange property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableTaskProgressChange = false;

        Get the disableTaskProgressChange property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableTaskProgressChange = ganttchart.disableTaskProgressChange;

        disableTaskResizeboolean

        Prevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.

        Default value

        false

        Example

        Set the disableTaskResize property. 

         <smart-gantt-chart disable-task-resize></smart-gantt-chart>

        Set the disableTaskResize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableTaskResize = false;

        Get the disableTaskResize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableTaskResize = ganttchart.disableTaskResize;

        disableSelectionboolean

        Prevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.

        Default value

        false

        Example

        Set the disableSelection property. 

         <smart-gantt-chart disable-selection></smart-gantt-chart>

        Set the disableSelection property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableSelection = false;

        Get the disableSelection property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableSelection = ganttchart.disableSelection;

        disableSegmentDragboolean

        Prevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.

        Default value

        false

        Example

        Set the disableSegmentDrag property. 

         <smart-gantt-chart disable-segment-drag></smart-gantt-chart>

        Set the disableSegmentDrag property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableSegmentDrag = false;

        Get the disableSegmentDrag property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableSegmentDrag = ganttchart.disableSegmentDrag;

        disableSegmentResizeboolean

        Prevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.

        Default value

        false

        Example

        Set the disableSegmentResize property. 

         <smart-gantt-chart disable-segment-resize></smart-gantt-chart>

        Set the disableSegmentResize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableSegmentResize = false;

        Get the disableSegmentResize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableSegmentResize = ganttchart.disableSegmentResize;

        disableWindowEditorboolean

        Prevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.

        Default value

        false

        Example

        Set the disableWindowEditor property. 

         <smart-gantt-chart disable-window-editor></smart-gantt-chart>

        Set the disableWindowEditor property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.disableWindowEditor = false;

        Get the disableWindowEditor property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableWindowEditor = ganttchart.disableWindowEditor;

        durationUnit"day" | "hour" | "minute" | "second" | "milisecond"

        Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.

        Default value

        "milisecond"

        Example

        Set the durationUnit property. 

         <smart-gantt-chart duration-unit='day'></smart-gantt-chart>

        Set the durationUnit property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.durationUnit = 'hour';

        Get the durationUnit property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let durationUnit = ganttchart.durationUnit;

        filterRowboolean

        Specifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.

        Default value

        false

        Example

        Set the filterRow property. 

         <smart-gantt-chart filter-row></smart-gantt-chart>

        Set the filterRow property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.filterRow = false;

        Get the filterRow property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let filterRow = ganttchart.filterRow;

        firstDayOfWeeknumber

        Specifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.

        Default value

        -1

        Example

        Set the firstDayOfWeek property. 

         <smart-gantt-chart first-day-of-week='0'></smart-gantt-chart>

        Set the firstDayOfWeek property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.firstDayOfWeek = 1;

        Get the firstDayOfWeek property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let firstDayOfWeek = ganttchart.firstDayOfWeek;

        groupByResourcesboolean

        Organizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.

        Default value

        false

        Example

        Set the groupByResources property. 

         <smart-gantt-chart group-by-resources></smart-gantt-chart>

        Set the groupByResources property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.groupByResources = false;

        Get the groupByResources property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let groupByResources = ganttchart.groupByResources;

        headerTemplateany

        Enables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.

        Try a demo showcasing the headerTemplate property.

        Example

        Set the headerTemplate property. 

         <smart-gantt-chart header-template='headerTemplate'></smart-gantt-chart>

        Set the headerTemplate property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.headerTemplate = headerTemplate2;

        Get the headerTemplate property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let headerTemplate = ganttchart.headerTemplate;

        hideDateMarkersboolean

        Specifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.

        Default value

        false

        Example

        Set the hideDateMarkers property. 

         <smart-gantt-chart hide-date-markers></smart-gantt-chart>

        Set the hideDateMarkers property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hideDateMarkers = false;

        Get the hideDateMarkers property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hideDateMarkers = ganttchart.hideDateMarkers;

        hideTimelineHeaderboolean

        By default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.

        Default value

        false

        Example

        Set the hideTimelineHeader property. 

         <smart-gantt-chart hide-timeline-header></smart-gantt-chart>

        Set the hideTimelineHeader property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hideTimelineHeader = false;

        Get the hideTimelineHeader property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hideTimelineHeader = ganttchart.hideTimelineHeader;

        hideTimelineHeaderDetailsboolean

        By default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.

        Default value

        false

        Example

        Set the hideTimelineHeaderDetails property. 

         <smart-gantt-chart hide-timeline-header-details></smart-gantt-chart>

        Set the hideTimelineHeaderDetails property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hideTimelineHeaderDetails = false;

        Get the hideTimelineHeaderDetails property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hideTimelineHeaderDetails = ganttchart.hideTimelineHeaderDetails;

        hideTimelineSecondHeaderDetailsboolean

        By default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.

        Default value

        true

        Example

        Set the hideTimelineSecondHeaderDetails property. 

         <smart-gantt-chart hide-timeline-second-header-details></smart-gantt-chart>

        Set the hideTimelineSecondHeaderDetails property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hideTimelineSecondHeaderDetails = false;

        Get the hideTimelineSecondHeaderDetails property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hideTimelineSecondHeaderDetails = ganttchart.hideTimelineSecondHeaderDetails;

        hideResourcePanelboolean

        Controls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.

        Default value

        false

        Example

        Set the hideResourcePanel property. 

         <smart-gantt-chart hide-resource-panel></smart-gantt-chart>

        Set the hideResourcePanel property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hideResourcePanel = false;

        Get the hideResourcePanel property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hideResourcePanel = ganttchart.hideResourcePanel;

        horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

        Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.

        Default value

        "auto"

        Example

        Set the horizontalScrollBarVisibility property. 

         <smart-gantt-chart horizontal-scroll-bar-visibility='disabled'></smart-gantt-chart>

        Set the horizontalScrollBarVisibility property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.horizontalScrollBarVisibility = 'hidden';

        Get the horizontalScrollBarVisibility property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let horizontalScrollBarVisibility = ganttchart.horizontalScrollBarVisibility;

        hourFormat"default" | "2-digit" | "numeric"

        Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.

        Default value

        "numeric"

        Example

        Set the hourFormat property. 

         <smart-gantt-chart hour-format='2-digit'></smart-gantt-chart>

        Set the hourFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.hourFormat = 'default';

        Get the hourFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hourFormat = ganttchart.hourFormat;

        infiniteTimelineboolean



        When this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.

        Default value

        false

        Example

        Set the infiniteTimeline property. 

         <smart-gantt-chart infinite-timeline></smart-gantt-chart>

        Set the infiniteTimeline property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.infiniteTimeline = false;

        Get the infiniteTimeline property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let infiniteTimeline = ganttchart.infiniteTimeline;

        infiniteTimelineStepnumber

        Specifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.

        Default value

        5

        Example

        Set the infiniteTimelineStep property. 

         <smart-gantt-chart infinite-timeline-step='3'></smart-gantt-chart>

        Set the infiniteTimelineStep property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.infiniteTimelineStep = 10;

        Get the infiniteTimelineStep property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let infiniteTimelineStep = ganttchart.infiniteTimelineStep;

        invertedboolean

        When enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.

        Default value

        false
        Try a demo showcasing the inverted property.

        Example

        Set the inverted property. 

         <smart-gantt-chart inverted></smart-gantt-chart>

        Set the inverted property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.inverted = false;

        Get the inverted property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let inverted = ganttchart.inverted;

        keyboardNavigationboolean

        Controls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.

        For the Task Table, the following keyboard shortcuts are available when a task is focused:


        • Enter – Opens the Window editor, allowing you to edit the currently focused task.

        • Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.



        Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.

        Default value

        false
        Try a demo showcasing the keyboardNavigation property.

        Example

        Set the keyboardNavigation property. 

         <smart-gantt-chart keyboard-navigation></smart-gantt-chart>

        Set the keyboardNavigation property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.keyboardNavigation = false;

        Get the keyboardNavigation property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let keyboardNavigation = ganttchart.keyboardNavigation;

        unlockKeystring

        Sets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.

        Default value

        ""

        Example

        Set the unlockKey property. 

         <smart-gantt-chart unlock-key=''></smart-gantt-chart>

        Set the unlockKey property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.unlockKey = '1111-2222-3333-4444-5555';

        Get the unlockKey property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let unlockKey = ganttchart.unlockKey;

        localestring

        Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.

        Default value

        "en"
        Try a demo showcasing the locale property.

        Example

        Set the locale property. 

         <smart-gantt-chart locale='de'></smart-gantt-chart>

        Set the locale property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.locale = 'en';

        Get the locale property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let locale = ganttchart.locale;

        maxstring | date

        Determines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.

        Default value

        2100-1-1

        Example

        Set the max property. 

         <smart-gantt-chart max='2020-1-1'></smart-gantt-chart>

        Set the max property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.max = 2025-12-31;

        Get the max property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let max = ganttchart.max;

        minstring | date

        Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.

        Default value

        1900-1-1

        Example

        Set the min property. 

         <smart-gantt-chart min='2000-1-1'></smart-gantt-chart>

        Set the min property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.min = 2005-12-31;

        Get the min property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let min = ganttchart.min;

        messagesobject

        Defines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.

        Default value




        Example

        Set the messages property. 

         <smart-gantt-chart messages='{"de":{"incorrectArgument":"Falsches Argument '{{argumentName}}' in der Methode {{methodName}}.","outOfBounds":"Unbegrenztes Argument {{argumentName}} in der Methode {{methodName}}."}}'></smart-gantt-chart>

        Set the messages property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.messages = {"en":{"incorrectArgument":"{{elementType}}: Incorrect argument {{argumentName}} in method {{methodName}}.","outOfBounds":"{{elementType}}: Out of bounds argument {{argumentName}} in method {{methodName}}."}};

        Get the messages property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let messages = ganttchart.messages;

        monthFormat"2-digit" | "numeric" | "long" | "short" | "narrow"

        Specifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.

        Default value

        "short"

        Example

        Set the monthFormat property. 

         <smart-gantt-chart month-format='numeric'></smart-gantt-chart>

        Set the monthFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.monthFormat = 'short';

        Get the monthFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let monthFormat = ganttchart.monthFormat;

        monthScale"day" | "week"

        Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.

        Default value

        "week"

        Example

        Set the monthScale property. 

         <smart-gantt-chart month-scale='day'></smart-gantt-chart>

        Set the monthScale property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.monthScale = 'week';

        Get the monthScale property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let monthScale = ganttchart.monthScale;

        nonworkingDaysnumber[]

        Specifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.

        Try a demo showcasing the nonworkingDays property.

        Example

        Set the nonworkingDays property. 

         <smart-gantt-chart nonworking-days='[0,1]'></smart-gantt-chart>

        Set the nonworkingDays property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.nonworkingDays = [0,5,6];

        Get the nonworkingDays property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let nonworkingDays = ganttchart.nonworkingDays;

        nonworkingHoursnumber[] | number[][]

        Specifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).

        In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.

        Try a demo showcasing the nonworkingHours property.

        Example

        Set the nonworkingHours property. 

         <smart-gantt-chart nonworking-hours='[[0, 6]]'></smart-gantt-chart>

        Set the nonworkingHours property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.nonworkingHours = [22, 23, [0, 6]];

        Get the nonworkingHours property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let nonworkingHours = ganttchart.nonworkingHours;

        onTaskRenderfunction | null

        This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:

        1. 'task' – The full task object containing all associated data.
        2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
        3. 'taskElement' – The root HTML element representing the task in the DOM.
        4. 'segmentElement' – The HTML element representing the current segment of the task.
        5. 'labelElement' – The HTML element that displays the segment’s label.

        You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.

        Try a demo showcasing the onTaskRender property.

        Example

        Set the onTaskRender property. 

         <smart-gantt-chart on-task-render='null'></smart-gantt-chart>

        Set the onTaskRender property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } };

        Get the onTaskRender property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let onTaskRender = ganttchart.onTaskRender;

        taskFormatFunctionfunction | null

        A function that allows you to fully customize the appearance and behavior of each task element. This function receives two parameters:


        • task: The JavaScript object representing the task's data and properties.

        • taskElement: The HTML element corresponding to the task, which you can manipulate or modify as needed.


        Use this function to add custom styles, event listeners, or additional content to each task element based on its data.

        Example

        Set the taskFormatFunction property. 

         <smart-gantt-chart task-format-function='null'></smart-gantt-chart>

        Set the taskFormatFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.taskFormatFunction = function(task, taskElement) { if (task.type === 'task') { taskElement.style.color = 'red'; } };

        Get the taskFormatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let taskFormatFunction = ganttchart.taskFormatFunction;

        tooltipFormatFunctionfunction | null

        A function that enables full customization of the tooltip's appearance and behavior. This function accepts three arguments:

        - tooltipObject: The tooltip instance, containing all relevant data and methods for manipulating the tooltip.
        - event: The event object that triggered the tooltip display, useful for accessing event-specific information (e.g., cursor position).
        - content: The DOM element representing the tooltip’s label, which can be modified to display custom HTML, styles, or dynamic content.

        popupWindowCustomizationFunctionfunction | null

        A function that allows complete customization of the popup window used for task interactions by modifying its properties before it is displayed. The function receives three arguments:



        • target — The popup window instance that is about to be opened. You can use this parameter to modify visual aspects (such as size, title, buttons, and content) or add custom behavior.


        • type — Specifies the purpose of the popup window. Possible values are:

          • 'task': For editing or viewing a task.

          • 'confirm': For displaying a confirmation prompt.

          • 'connection': For actions related to connections between tasks (e.g., deleting a link).




        • item — The data object associated with the popup window. This will be the current task (for 'task' and 'confirm' types) or the specific connection object (for the 'connection' type).



        Use this function to dynamically personalize the popup window’s content, appearance, or logic based on the context of the action being performed.

        Try a demo showcasing the popupWindowCustomizationFunction property.

        Example

        Set the popupWindowCustomizationFunction property. 

         <smart-gantt-chart popup-window-customization-function='null'></smart-gantt-chart>

        Set the popupWindowCustomizationFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.popupWindowCustomizationFunction = function(target, type, item) { if (type === 'task') { target.headerPosition = 'left'; } };

        Get the popupWindowCustomizationFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let popupWindowCustomizationFunction = ganttchart.popupWindowCustomizationFunction;

        popupWindowTabsstring[]

        Specifies which tab sections are displayed within the popup window. This property accepts the following three values:



        • general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property.


        • dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task.


        • segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task.



        Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.

        Default value

        ['general', 'dependency', 'segments']

        Example

        Set the popupWindowTabs property. 

         <smart-gantt-chart popup-window-tabs='['general', 'dependency']'></smart-gantt-chart>

        Set the popupWindowTabs property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.popupWindowTabs = ['general'];

        Get the popupWindowTabs property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let popupWindowTabs = ganttchart.popupWindowTabs;

        progressLabelFormatFunctionfunction | null

        This property accepts a formatting function for the progress label displayed on the Timeline task. The function should return a string representing the desired label text. By default, the progress label is hidden; it can be made visible by setting the showProgressLabel property to true.

        Try a demo showcasing the progressLabelFormatFunction property.

        Example

        Set the progressLabelFormatFunction property. 

         <smart-gantt-chart progress-label-format-function='function(progress) { return progress }'></smart-gantt-chart>

        Set the progressLabelFormatFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.progressLabelFormatFunction = null;

        Get the progressLabelFormatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let progressLabelFormatFunction = ganttchart.progressLabelFormatFunction;

        quarterFormat"numeric" | "long" | "short"

        Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.

        Default value

        "short"

        Example

        Set the quarterFormat property. 

         <smart-gantt-chart quarter-format='numeric'></smart-gantt-chart>

        Set the quarterFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.quarterFormat = 'short';

        Get the quarterFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let quarterFormat = ganttchart.quarterFormat;

        resources{label: string, capacity: number, value: string, workload: number, progress: number, id: string, progress: number, workload: number, class: string }[]

        Returns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access.

        Properties

        class
        capacity
        hidden
        id
        label
        minCapacity
        maxCapacity
        progress
        type
        value
        workload

        classstring

        Resource class. Used to style the resource Timeline.

        Default value

        ""

        Get the class property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let class = ganttchart.resources[0].class;

        capacitynumber

        The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.

        Default value

        8

        Get the capacity property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let capacity = ganttchart.resources[0].capacity;

        hiddenboolean | undefined

        Resource visibility.

        Default value

        false

        Get the hidden property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hidden = ganttchart.resources[0].hidden;

        idstring

        Resource id. The unique id of the resource.

        Default value

        ""

        Get the id property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let id = ganttchart.resources[0].id;

        labelstring | null

        Resource label.

        Default value

        0

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.resources[0].label;

        minCapacitynumber

        Resource min capacity

        Default value

        0

        Get the minCapacity property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let minCapacity = ganttchart.resources[0].minCapacity;

        maxCapacitynumber

        Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.

        Default value

        0

        Get the maxCapacity property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let maxCapacity = ganttchart.resources[0].maxCapacity;

        progressnumber

        Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.

        Default value

        0

        Get the progress property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let progress = ganttchart.resources[0].progress;

        typeany

        Resource type.

        Default value

        ""

        Get the type property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let type = ganttchart.resources[0].type;

        valueany

        Resource value.

        Default value

        ""

        Get the value property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let value = ganttchart.resources[0].value;

        workloadstring | number

        Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.

        Default value

        0

        Get the workload property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let workload = ganttchart.resources[0].workload;
        Try a demo showcasing the resources property.

        resourceColumns{label: string, value: string}[]

        Determines which columns are displayed in the Resource Tree.
        Each entry in this property should be an Object containing the following keys:

        - label: Specifies the column header text as it will appear in the Task Tree.
        - value: Defines the property or content to be displayed in the cells of that column.

        By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.

        Additional configurable properties for each column object include:


        • formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content.

        • min: Sets the minimum width (in pixels or another supported unit) for the column.

        • max: Sets the maximum width for the column.

        • size: Specifies the fixed width for the column.



        Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed.

        Properties

        label
        value
        min
        size
        formatFunction

        labelstring | null

        Column's label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.resourceColumns[0].label;

        valuestring | null

        Column's value. The value shold reference an actual resoruce attribute.

        Default value

        ""

        Get the value property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let value = ganttchart.resourceColumns[0].value;

        minstring | number | null

        Column's min size.

        Default value

        0

        Get the min property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let min = ganttchart.resourceColumns[0].min;

        sizestring | number | null

        Column's size.

        Default value

        0

        Get the size property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let size = ganttchart.resourceColumns[0].size;

        formatFunctionany

        Column's format function. You can use it to customize the column label's rendering.

        Get the formatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let formatFunction = ganttchart.resourceColumns[0].formatFunction;
        Try a demo showcasing the resourceColumns property.

        Example

        Set the resourceColumns property. 

         <smart-gantt-chart resource-columns='{ "label": "Task Name", "value": "label" }'></smart-gantt-chart>

        Set the resourceColumns property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

        Get the resourceColumns property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourceColumns = ganttchart.resourceColumns;

        resourceFilteringboolean

        Specifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.

        Default value

        false

        Example

        Set the resourceFiltering property. 

         <smart-gantt-chart resource-filtering></smart-gantt-chart>

        Set the resourceFiltering property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceFiltering = false;

        Get the resourceFiltering property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourceFiltering = ganttchart.resourceFiltering;

        resourceGroupFormatFunctionfunction | null

        A format function that enables you to customize the display of group row labels when the groupByResources option is enabled. This function allows for dynamic re-formatting of group headers, so you can control how resource names or other grouping information appear in the UI.

        Example

        Set the resourceGroupFormatFunction property. 

         <smart-gantt-chart resource-group-format-function='null'></smart-gantt-chart>

        Set the resourceGroupFormatFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceGroupFormatFunction = function(resourceId) { return 'New Resource Group Label' };

        Get the resourceGroupFormatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourceGroupFormatFunction = ganttchart.resourceGroupFormatFunction;

        resourcePanelHeaderTemplateany

        Enables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.

        Try a demo showcasing the resourcePanelHeaderTemplate property.

        Example

        Set the resourcePanelHeaderTemplate property. 

         <smart-gantt-chart resource-panel-header-template='resourcePanelTemplate1'></smart-gantt-chart>

        Set the resourcePanelHeaderTemplate property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourcePanelHeaderTemplate = resourcePanelTemplate2;

        Get the resourcePanelHeaderTemplate property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourcePanelHeaderTemplate = ganttchart.resourcePanelHeaderTemplate;

        resourcePanelMinnumber | string

        Specifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.

        Default value

        100

        Example

        Set the resourcePanelMin property. 

         <smart-gantt-chart resource-panel-min='20%'></smart-gantt-chart>

        Set the resourcePanelMin property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourcePanelMin = 100px;

        Get the resourcePanelMin property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourcePanelMin = ganttchart.resourcePanelMin;

        resourcePanelSizenumber | string

        Specifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.

        Default value

        ""
        Try a demo showcasing the resourcePanelSize property.

        Example

        Set the resourcePanelSize property. 

         <smart-gantt-chart resource-panel-size='25%'></smart-gantt-chart>

        Set the resourcePanelSize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourcePanelSize = 200px;

        Get the resourcePanelSize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourcePanelSize = ganttchart.resourcePanelSize;

        resourcePanelRefreshRatenumber

        Controls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.

        Default value

        0
        Try a demo showcasing the resourcePanelRefreshRate property.

        Example

        Set the resourcePanelRefreshRate property. 

         <smart-gantt-chart resource-panel-refresh-rate='20'></smart-gantt-chart>

        Set the resourcePanelRefreshRate property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourcePanelRefreshRate = 0;

        Get the resourcePanelRefreshRate property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourcePanelRefreshRate = ganttchart.resourcePanelRefreshRate;

        resourceTimelineFormatFunctionany

        A callback function that allows you to fully control and customize the content displayed in the cells of the resource timeline. The callback receives three parameters:


        • taskIndexes – An array containing the indexes of the tasks assigned to the current resource in this cell.

        • resourceIndex – The index representing the current resource row.

        • cellDate – A Date object or date string representing the current cell’s date.



        This property is specifically used when the resourceTimelineView is set to custom. The expected return value depends on the value of resourceTimelineMode:


        • diagram – Return a string that will be rendered as the cell’s content.

        • histogram – Return an object with the following properties:

          • capacity: The current value to be visualized for the cell.

          • maxCapacity: The maximum value for the histogram, used to determine the cell visualization’s scale.



        • custom – (Optional) You may return any custom content for the timeline cell, giving you full flexibility to represent resources however you wish.



        Use this callback to tailor the timeline’s resource cell display—such as showing aggregated values, custom HTML, or visualizations—according to your application’s requirements.

        Try a demo showcasing the resourceTimelineFormatFunction property.

        resourceTimelineMode"diagram" | "histogram" | "custom"

        Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).

        Allowed Values

        • "diagram" - Displays the capacity of the resources in the resource timeline for the tasks that the resource is assigned to.
        • "histogram" - Displays a histogram of the capacity and maxCapacity properties of the resources for the tasks they are assigned to in the resource timeline.
        • "custom" - Indicates that a custom content will be displayed for the resources in the timeline. The content is determined by the return value of the resourceTimelineFormatFunction.

        Default value

        "diagram"
        Try a demo showcasing the resourceTimelineMode property.

        Example

        Set the resourceTimelineMode property. 

         <smart-gantt-chart resource-timeline-mode='histogram'></smart-gantt-chart>

        Set the resourceTimelineMode property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceTimelineMode = 'diagram';

        Get the resourceTimelineMode property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourceTimelineMode = ganttchart.resourceTimelineMode;

        resourceTimelineView"hours" | "tasks" | "custom"

        Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.

        Allowed Values

        • "hours" - Displays the capacity, maxCapacity and workload of the resources in the Timeline as hours per task.
        • "tasks" - Displays the number of tasks per resource depending on the date of the cells.
        • "custom" - Allows to customize the way resources are displayed in the Timeline via the resourceTimelineFormatFunction callback. The expected result from the callback is a string.

        Default value

        "hours"
        Try a demo showcasing the resourceTimelineView property.

        Example

        Set the resourceTimelineView property. 

         <smart-gantt-chart resource-timeline-view='hours'></smart-gantt-chart>

        Set the resourceTimelineView property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.resourceTimelineView = 'tasks';

        Get the resourceTimelineView property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resourceTimelineView = ganttchart.resourceTimelineView;

        rightToLeftboolean

        Gets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.

        Default value

        false
        Try a demo showcasing the rightToLeft property.

        Example

        Set the rightToLeft property. 

         <smart-gantt-chart right-to-left></smart-gantt-chart>

        Set the rightToLeft property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.rightToLeft = false;

        Get the rightToLeft property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let rightToLeft = ganttchart.rightToLeft;

        selectedTaskIdsnumber[] | string[]



        "Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."

        Example

        Set the selectedTaskIds property. 

         <smart-gantt-chart selected-task-ids='['2']'></smart-gantt-chart>

        Set the selectedTaskIds property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.selectedTaskIds = ['0'];

        Get the selectedTaskIds property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let selectedTaskIds = ganttchart.selectedTaskIds;

        selectedResourceIdsnumber[] | string[]

        Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."

        ---

        'Improved Version:'

        Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.

        Example

        Set the selectedResourceIds property. 

         <smart-gantt-chart selected-resource-ids='['2']'></smart-gantt-chart>

        Set the selectedResourceIds property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.selectedResourceIds = ['0'];

        Get the selectedResourceIds property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let selectedResourceIds = ganttchart.selectedResourceIds;

        selectionMode"one" | "many" | "extended"

        Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.

        Allowed Values

        • "one" - Single row can be selected by clicking a row or a checkbox.
        • "many" - Multiple rows can be selected by clicking the rows or their respective checkboxes.
        • "extended" - Single row can be selected by clicking it. Multiple rows can be selected by Ctrl- or Shift-clicking the rows or just clicking their respective checkboxes.

        Default value

        "many"
        Try a demo showcasing the selectionMode property.

        Example

        Set the selectionMode property. 

         <smart-gantt-chart selection-mode='extended'></smart-gantt-chart>

        Set the selectionMode property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.selectionMode = 'many';

        Get the selectionMode property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let selectionMode = ganttchart.selectionMode;

        shadeUntilCurrentTimeboolean

        Controls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.

        Default value

        false
        Try a demo showcasing the shadeUntilCurrentTime property.

        Example

        Set the shadeUntilCurrentTime property. 

         <smart-gantt-chart shade-until-current-time></smart-gantt-chart>

        Set the shadeUntilCurrentTime property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.shadeUntilCurrentTime = false;

        Get the shadeUntilCurrentTime property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let shadeUntilCurrentTime = ganttchart.shadeUntilCurrentTime;

        showSelectionColumnboolean

        Displays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.

        Default value

        false

        Example

        Set the showSelectionColumn property. 

         <smart-gantt-chart show-selection-column></smart-gantt-chart>

        Set the showSelectionColumn property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.showSelectionColumn = false;

        Get the showSelectionColumn property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let showSelectionColumn = ganttchart.showSelectionColumn;

        showBaselineboolean

        Controls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.

        Default value

        false

        Example

        Set the showBaseline property. 

         <smart-gantt-chart show-baseline></smart-gantt-chart>

        Set the showBaseline property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.showBaseline = false;

        Get the showBaseline property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let showBaseline = ganttchart.showBaseline;

        showProgressLabelboolean

        Displays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.

        Default value

        false

        Example

        Set the showProgressLabel property. 

         <smart-gantt-chart show-progress-label></smart-gantt-chart>

        Set the showProgressLabel property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.showProgressLabel = false;

        Get the showProgressLabel property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let showProgressLabel = ganttchart.showProgressLabel;

        snapToNearestboolean

        If enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.

        Default value

        false

        Example

        Set the snapToNearest property. 

         <smart-gantt-chart snap-to-nearest></smart-gantt-chart>

        Set the snapToNearest property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.snapToNearest = false;

        Get the snapToNearest property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let snapToNearest = ganttchart.snapToNearest;

        sortFunction{ (dataSource: any, sortColumns: string[], directions: string[], defaultCompareFunctions: { (firstRecord: any, secondRecord: any): number }[]): void }

        Enables you to specify a custom sorting function that will be invoked whenever a column in the table is sorted, allowing you to override the default sorting logic with customized behavior. The custom function receives the following parameters:


        1. dataSource – The complete array of data objects currently used by the table.

        2. sortColumns – An array containing the keys or data fields of the columns that need to be sorted, in the order of user preference or configuration.

        3. directions – An array specifying the sort direction ('asc' or 'desc') for each column listed in sortColumns. The direction at each index corresponds to the column at the same index.

        4. defaultCompareFunctions – An array of default comparison functions for each column, aligned by index with sortColumns. Use these as fallbacks when only some columns require custom sorting logic.



        By implementing your own sorting function, you can customize the way the table data is ordered—such as sorting complex data structures, handling locale-specific strings, or applying multi-level sorts—while optionally leveraging the provided default comparison functions for columns that do not require special handling.

        Example

        Set the sortFunction property. 

         <smart-gantt-chart sort-function='(dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => a - b)'></smart-gantt-chart>

        Set the sortFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.sortFunction = (dataSource, sortColumns, directions, compareFunctions) => dataSource.sort((a, b) => b - a);

        Get the sortFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let sortFunction = ganttchart.sortFunction;

        sortMode"none" | "one" | "many"

        Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.

        Allowed Values

        • "none" - Sorting is disabled. Default value.
        • "one" - Allows sorting by a single column.
        • "many" - Allows sorting by multiple columns.

        Default value

        "none"
        Try a demo showcasing the sortMode property.

        Example

        Set the sortMode property. 

         <smart-gantt-chart sort-mode='many'></smart-gantt-chart>

        Set the sortMode property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.sortMode = 'one';

        Get the sortMode property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let sortMode = ganttchart.sortMode;

        tasks{label: string, dateStart: string | Date, dateEnd: string | Date, expanded?: boolean, progress?: number, type?: string}[]

        A getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array.

        Default value

        null

        Properties

        connections
        class
        dateStart
        dateEnd
        deadline
        disableResources
        disableDrag
        disableResize
        dragProject
        duration
        expanded
        hidden
        id
        indicators
        label
        formatFunction
        onRender
        maxDateStart
        minDateStart
        maxDateEnd
        minDateEnd
        minDuration
        maxDuration
        overdue
        planned
        dateStart
        dateEnd
        duration

        connectionsarray

        Tasks connection.

        Default value

        null

        Get the connections property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let connections = ganttchart.tasks[0].connections;

        classstring

        Project, Task or Milestone CSS class.

        Default value

        ""

        Get the class property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let class = ganttchart.tasks[0].class;

        dateStartstring | Date

        Project, Task or Milestone start date.

        Default value

        ""

        Get the dateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateStart = ganttchart.tasks[0].dateStart;

        dateEndstring | Date

        Project, Task or Milestone end date.

        Default value

        ""

        Get the dateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateEnd = ganttchart.tasks[0].dateEnd;

        deadlinestring | Date

        Determines the deadline for the Project, Task or Milestone.

        Default value

        ""

        Get the deadline property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let deadline = ganttchart.tasks[0].deadline;

        disableResourcesboolean

        Project, Task or Milestone with disabled resources.

        Default value

        false

        Get the disableResources property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableResources = ganttchart.tasks[0].disableResources;

        disableDragboolean

        Project, Task or Milestone dragging is disabled.

        Default value

        false

        Get the disableDrag property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableDrag = ganttchart.tasks[0].disableDrag;

        disableResizeboolean

        Project, Task or Milestone resizing is disabled.

        Default value

        false

        Get the disableResize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableResize = ganttchart.tasks[0].disableResize;

        dragProjectboolean

        Project, Task or Milestone drag enabled in the view.

        Default value

        true

        Get the dragProject property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dragProject = ganttchart.tasks[0].dragProject;

        durationnumber | undefined

        The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.

        Default value

        0

        Get the duration property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let duration = ganttchart.tasks[0].duration;

        expandedboolean

        Project, Task or Milestone expanded state in the view.

        Default value

        false

        Get the expanded property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let expanded = ganttchart.tasks[0].expanded;

        hiddenboolean | undefined

        Task visibility.

        Default value

        false

        Get the hidden property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let hidden = ganttchart.tasks[0].hidden;

        idstring | null

        Project, Task or Milestone id.

        Default value

        ""

        Get the id property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let id = ganttchart.tasks[0].id;

        indicators{label?: string, date: Date | string, className?: string, icon?: string, tooltip?: string }[]

        Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.

        Properties

        label
        date
        className
        icon
        tooltip

        labelstring?

        Indicator label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.tasks[0].indicators[0].label;

        datestring | Date

        Indicator date(can include time).

        Default value

        ""

        Get the date property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let date = ganttchart.tasks[0].indicators[0].date;

        classNamestring?

        A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.

        Get the className property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let className = ganttchart.tasks[0].indicators[0].className;

        iconstring?

        Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.

        Get the icon property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let icon = ganttchart.tasks[0].indicators[0].icon;

        tooltipstring?

        Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.

        Get the tooltip property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let tooltip = ganttchart.tasks[0].indicators[0].tooltip;

        Get the indicators property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let indicators = ganttchart.tasks[0].indicators;

        labelstring | null

        Project, Task or Milestone label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.tasks[0].label;

        formatFunctionany

        Project, Task or Milestone format function.

        Get the formatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let formatFunction = ganttchart.tasks[0].formatFunction;

        onRenderany

        Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.

        • task - the task object.
        • segment - the task current segment object. If the task has only one segment, the task object is passed again.
        • taskElement - the task's html element.
        • segmentElement - the task's segment html element.
        • labelElement - the task's segment label html element.

        Get the onRender property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let onRender = ganttchart.tasks[0].onRender;

        maxDateStartstring | Date

        Project, Task or Milestone max start date.

        Default value

        ""

        Get the maxDateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let maxDateStart = ganttchart.tasks[0].maxDateStart;

        minDateStartstring | Date

        Project, Task or Milestone min start date.

        Default value

        ""

        Get the minDateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let minDateStart = ganttchart.tasks[0].minDateStart;

        maxDateEndstring | Date

        Project, Task or Milestone max end date.

        Default value

        ""

        Get the maxDateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let maxDateEnd = ganttchart.tasks[0].maxDateEnd;

        minDateEndstring | Date

        Project, Task or Milestone min end date.

        Default value

        ""

        Get the minDateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let minDateEnd = ganttchart.tasks[0].minDateEnd;

        minDurationnumber | undefined

        The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.

        Default value

        0

        Get the minDuration property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let minDuration = ganttchart.tasks[0].minDuration;

        maxDurationnumber | undefined

        The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.

        Default value

        0

        Get the maxDuration property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let maxDuration = ganttchart.tasks[0].maxDuration;

        overdueboolean

        Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.

        Default value

        false

        Get the overdue property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let overdue = ganttchart.tasks[0].overdue;

        planned{ dateStart: date | string | number, dateEnd: date | string | number, duration?: number }

        Determines the planned dateStart/dateEnd for as the baseline for the task.

        Default value

        null

        Properties

        dateStartstring | Date

        Determines the planned dateStart of the task.

        Default value

        ""

        Get the dateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateStart = ganttchart.tasks[0].dateStart;

        dateEndstring | Date

        Determines the planned dateEnd of the task.

        Default value

        ""

        Get the dateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateEnd = ganttchart.tasks[0].dateEnd;

        durationnumber | undefined

        Determines the planned duration of the task.

        Default value

        0

        Get the duration property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let duration = ganttchart.tasks[0].duration;

        Get the planned property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let planned = ganttchart.tasks[0].planned.planned;

        progressnumber

        Project, Task or Milestone progress.

        Default value

        0

        Get the progress property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let progress = ganttchart.tasks[0].planned.progress;

        resourcesarray

        Project, Task or Milestone resources.

        Get the resources property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let resources = ganttchart.tasks[0].planned.resources;

        segments{label: string, dateStart: date | string , dateEnd: date | string, disableDrag?: boolean, disableResize?: boolean, duration?: number | null, formatFunction?: any }[]

        Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.

        Properties

        label
        dateStart
        dateEnd
        disableDrag
        disableResize
        duration
        formatFunction

        labelstring | null

        Segment label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.tasks[0].planned.segments[0].label;

        dateStartstring | Date

        Segment start date.

        Default value

        ""

        Get the dateStart property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateStart = ganttchart.tasks[0].planned.segments[0].dateStart;

        dateEndstring | Date

        Segment end date.

        Default value

        ""

        Get the dateEnd property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateEnd = ganttchart.tasks[0].planned.segments[0].dateEnd;

        disableDragboolean

        Determines whether segment dragging is disabled.

        Default value

        false

        Get the disableDrag property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableDrag = ganttchart.tasks[0].planned.segments[0].disableDrag;

        disableResizeboolean

        Determines whether segment resizing is disabled.

        Default value

        false

        Get the disableResize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableResize = ganttchart.tasks[0].planned.segments[0].disableResize;

        durationnumber | undefined

        The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.

        Default value

        0

        Get the duration property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let duration = ganttchart.tasks[0].planned.segments[0].duration;

        formatFunctionany

        Segment label format function.

        Get the formatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let formatFunction = ganttchart.tasks[0].planned.segments[0].formatFunction;

        Get the segments property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let segments = ganttchart.tasks[0].planned.segments;

        synchronizedboolean

        Project, Task or Milestone synchronized in the view.

        Default value

        false

        Get the synchronized property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let synchronized = ganttchart.tasks[0].planned.synchronized;

        tasksarray

        Project's tasks. Only projects can have tasks.

        Get the tasks property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let tasks = ganttchart.tasks[0].planned.tasks;

        type"project" | "milestone" | "task"

        Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'

        Default value

        "task"

        Get the type property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let type = ganttchart.tasks[0].planned.type;

        valueany

        Project, Task or Milestone value.

        Default value

        ""

        Get the value property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let value = ganttchart.tasks[0].planned.value;

        taskColumns{label: string, value: string}[]

        'Description'

        Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:

        - label: Specifies the text that will appear as the column header in the Task Tree.
        - value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.

        By default, one column will be shown with all task labels. Additional columns can be configured using this property.

        'Optional properties for each column object:'


        • formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element).

        • min: Sets the minimum width of the column (in pixels or CSS units).

        • max: Sets the maximum width of the column (in pixels or CSS units).

        • size: Sets the default (actual) width of the column (in pixels or CSS units).

        • customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments:

          • label: The column label.

          • value: The current cell value in the column.


          The function should return the editor component or element.

        • setCustomEditorValue: A callback used to programmatically set the value of the custom editor.

        • getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.



        This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree.

        Properties

        disableEdit
        dateFormat
        numberFormat
        label
        value
        size
        minWidth
        formatFunction
        customEditor
        getCustomEditorValue
        setCustomEditorValue

        disableEditboolean

        Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.

        Default value

        false

        Get the disableEdit property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let disableEdit = ganttchart.taskColumns[0].disableEdit;

        dateFormatstring | object | null

        Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: 

        dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
        . Another option is to use a date format string. Built-in Date formats:
        // short date pattern
        'd' - 'M/d/yyyy',
        // long date pattern
        'D' - 'dddd, MMMM dd, yyyy',
        // short time pattern
        't' - 'h:mm tt',
        // long time pattern
        'T' - 'h:mm:ss tt',
        // long date, short time pattern
        'f' - 'dddd, MMMM dd, yyyy h:mm tt',
        // long date, long time pattern
        'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
        // month/day pattern
        'M' - 'MMMM dd',
        // month/year pattern
        'Y' - 'yyyy MMMM',
        // S is a sortable format that does not vary by culture
        'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

        Date format strings:
        'd'-the day of the month;
        'dd'-the day of the month
        'ddd'-the abbreviated name of the day of the week
        'dddd'- the full name of the day of the week
        'h'-the hour, using a 12-hour clock from 1 to 12
        'hh'-the hour, using a 12-hour clock from 01 to 12

        'H'-the hour, using a 24-hour clock from 0 to 23
        'HH'- the hour, using a 24-hour clock from 00 to 23
        'm'-the minute, from 0 through 59
        'mm'-the minutes,from 00 though59
        'M'- the month, from 1 through 12
        'MM'- the month, from 01 through 12
        'MMM'-the abbreviated name of the month
        'MMMM'-the full name of the month
        's'-the second, from 0 through 59
        'ss'-the second, from 00 through 59
        't'- the first character of the AM/PM designator
        'tt'-the AM/PM designator
        'y'- the year, from 0 to 99
        'yy'- the year, from 00 to 99
        'yyy'-the year, with a minimum of three digits
        'yyyy'-the year as a four-digit number;
        'yyyyy'-the year as a four-digit number.

        Get the dateFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let dateFormat = ganttchart.taskColumns[0].dateFormat;

        numberFormatstring | object | null

        Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
        'd' - decimal numbers.
        'f' - floating-point numbers.
        'n' - integer numbers.
        'c' - currency numbers.
        'p' - percentage numbers.

        For adding decimal places to the numbers, add a number after the formatting stri

        For example: 'c3' displays a number in this format $25.256

        Get the numberFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let numberFormat = ganttchart.taskColumns[0].numberFormat;

        labelstring | null

        Column's label.

        Default value

        ""

        Get the label property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let label = ganttchart.taskColumns[0].label;

        valuestring | null

        Column's value.

        Default value

        ""

        Get the value property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let value = ganttchart.taskColumns[0].value;

        sizestring | number | null

        Column's size.

        Default value

        0

        Get the size property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let size = ganttchart.taskColumns[0].size;

        minWidthstring | number | null

        Column's min width.

        Default value

        0

        Get the minWidth property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let minWidth = ganttchart.taskColumns[0].minWidth;

        formatFunctionany

        Column's format function. You can use it to customize the column label's rendering.

        Get the formatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let formatFunction = ganttchart.taskColumns[0].formatFunction;

        customEditorfunction | undefined | null

        A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:

        • name - the name of the task property that is going to be edited.
        • value - the value of the task property that is going to be edited.
        It's also important to define a getCustomEditorValue to return the value from the custom editor.

        Get the customEditor property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let customEditor = ganttchart.taskColumns[0].customEditor;

        getCustomEditorValuefunction | undefined | null

        A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.

        Get the getCustomEditorValue property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let getCustomEditorValue = ganttchart.taskColumns[0].getCustomEditorValue;

        setCustomEditorValuefunction | undefined | null

        A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -

        • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
        • columnValue - the value property of the column.
        • value - the value of the task property that the column displays(the editor value).

        Get the setCustomEditorValue property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let setCustomEditorValue = ganttchart.taskColumns[0].setCustomEditorValue;
        Try a demo showcasing the taskColumns property.

        Example

        Set the taskColumns property. 

         <smart-gantt-chart task-columns='{ "label": "Task Name", "value": "label" }'></smart-gantt-chart>

        Set the taskColumns property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.taskColumns = { "label": "Date Start", "value": "dateStart" }, { "label": "Duration", "value": "duration" };

        Get the taskColumns property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let taskColumns = ganttchart.taskColumns;

        taskFilteringboolean

        Specifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.

        Default value

        false

        Example

        Set the taskFiltering property. 

         <smart-gantt-chart task-filtering></smart-gantt-chart>

        Set the taskFiltering property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.taskFiltering = false;

        Get the taskFiltering property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let taskFiltering = ganttchart.taskFiltering;

        taskPanelMinstring | number

        Specifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.

        Default value

        200

        Example

        Set the taskPanelMin property. 

         <smart-gantt-chart task-panel-min='200'></smart-gantt-chart>

        Set the taskPanelMin property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.taskPanelMin = 50%;

        Get the taskPanelMin property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let taskPanelMin = ganttchart.taskPanelMin;

        taskPanelSizestring | number

        Specifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.

        Default value

        ""

        Example

        Set the taskPanelSize property. 

         <smart-gantt-chart task-panel-size='500'></smart-gantt-chart>

        Set the taskPanelSize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.taskPanelSize = 50%;

        Get the taskPanelSize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let taskPanelSize = ganttchart.taskPanelSize;

        timelineMinstring | number

        Specifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.

        Default value

        200

        Example

        Set the timelineMin property. 

         <smart-gantt-chart timeline-min='150'></smart-gantt-chart>

        Set the timelineMin property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.timelineMin = 50%;

        Get the timelineMin property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let timelineMin = ganttchart.timelineMin;

        treeMinstring | number

        Specifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.

        Default value

        100

        Example

        Set the treeMin property. 

         <smart-gantt-chart tree-min='200'></smart-gantt-chart>

        Set the treeMin property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.treeMin = 300;

        Get the treeMin property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let treeMin = ganttchart.treeMin;

        treeSizestring | number

        Specifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.

        Default value

        100
        Try a demo showcasing the treeSize property.

        Example

        Set the treeSize property. 

         <smart-gantt-chart tree-size='50%'></smart-gantt-chart>

        Set the treeSize property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.treeSize = 300;

        Get the treeSize property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let treeSize = ganttchart.treeSize;

        timelineHeaderFormatFunctionfunction | null

        A custom formatting function for the Timeline header, allowing you to control how each date cell in the header is displayed. The function receives the following arguments:


        • date (Date): The JavaScript Date object representing the date associated with the current header cell.

        • type (string): A string indicating the granularity of the header cell, such as 'month', 'week', 'day', etc., specifying what period the cell represents.

        • isHeaderDetails (boolean): A boolean value specifying whether the cell is part of the detailed header section (typically used for secondary or sub-header rows) or part of the main header row.

        • value (string): The default formatted label for the cell, as generated by the timeline component, which you may use or modify in your custom output.



        Use this function to return a custom string (or JSX/HTML element, depending on context) for each header cell, enabling advanced formatting of date headers in the timeline view.

        Try a demo showcasing the timelineHeaderFormatFunction property.

        Example

        Set the timelineHeaderFormatFunction property. 

         <smart-gantt-chart timeline-header-format-function='null'></smart-gantt-chart>

        Set the timelineHeaderFormatFunction property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.timelineHeaderFormatFunction = function(date, type, isHeaderDetails, value) { if (isHeaderDetails) { return 'Custom Header Function' } else { return date.toDateString() }  };

        Get the timelineHeaderFormatFunction property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let timelineHeaderFormatFunction = ganttchart.timelineHeaderFormatFunction;

        tooltipobject

        Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas.

        Properties

        arrow
        delay
        enabled
        offset

        arrowboolean

        Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.

        Default value

        false

        Get the arrow property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let arrow = ganttchart.tooltip.arrow;

        delaynumber

        Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).

        Default value

        50

        Get the delay property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let delay = ganttchart.tooltip.delay;

        enabledboolean

        Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.

        Default value

        false

        Get the enabled property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let enabled = ganttchart.tooltip.enabled;

        offsetnumber[]

        Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.

        Get the offset property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let offset = ganttchart.tooltip.offset;

        verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

        Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.

        Default value

        "auto"

        Example

        Set the verticalScrollBarVisibility property. 

         <smart-gantt-chart vertical-scroll-bar-visibility='hidden'></smart-gantt-chart>

        Set the verticalScrollBarVisibility property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.verticalScrollBarVisibility = 'visible';

        Get the verticalScrollBarVisibility property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let verticalScrollBarVisibility = ganttchart.verticalScrollBarVisibility;

        view"day" | "week" | "month" | "quarter" | "year"

        Specifies the date range displayed on the timeline. Accepted values include:


        • day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.

        • week: The timeline presents each day within a single week, providing a broader weekly overview.

        • month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.

        • year: The timeline displays each month of the year, providing a high-level annual perspective.

        • resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.



        The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.

        Allowed Values
        • "day" - The timeline displays days by hours.
        • "week" - The Timeline displays weeks by days.
        • "month" - The Timeline displays months by weeks. Depending on the 'monthScale' property value, it may display month by days.
        • "quarter" - The Timeline displays quarter by months.
        • "year" - The Timeline displays years by months.

        Default value

        "year"
        Try a demo showcasing the view property.

        Example

        Set the view property. 

         <smart-gantt-chart view='week'></smart-gantt-chart>

        Set the view property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.view = 'day';

        Get the view property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let view = ganttchart.view;

        yearFormat"2-digit" | "numeric"

        Specifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.

        Default value

        "numeric"

        Example

        Set the yearFormat property. 

         <smart-gantt-chart year-format='2-digit'></smart-gantt-chart>

        Set the yearFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.yearFormat = 'numeric';

        Get the yearFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let yearFormat = ganttchart.yearFormat;

        weekFormat"long" | "numeric"

        Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.

        Default value

        "long"

        Example

        Set the weekFormat property. 

         <smart-gantt-chart week-format='long'></smart-gantt-chart>

        Set the weekFormat property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.weekFormat = 'numeric';

        Get the weekFormat property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let weekFormat = ganttchart.weekFormat;

        themestring

        Specifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.

        Default value

        ""

        Example

        Set the theme property. 

         <smart-gantt-chart theme='material'></smart-gantt-chart>

        Set the theme property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.theme = 'material-purple';

        Get the theme property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let theme = ganttchart.theme;

        unfocusableboolean

        Determines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.

        Default value

        false

        Example

        Set the unfocusable property. 

         <smart-gantt-chart unfocusable></smart-gantt-chart>

        Set the unfocusable property by using the HTML Element's instance. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         ganttchart.unfocusable = false;

        Get the unfocusable property. 

         const ganttchart = document.querySelector('smart-gantt-chart');
         let unfocusable = ganttchart.unfocusable;

        Events

        beginUpdateCustomEvent

        This event is triggered when a batch update operation begins, specifically after the beginUpdate method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onBeginUpdate

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of beginUpdate event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('beginUpdate', function (event) {
	// event handling code goes here.
})

        endUpdateCustomEvent

        This event is triggered after the endUpdate method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onEndUpdate

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of endUpdate event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('endUpdate', function (event) {
	// event handling code goes here.
})

        connectionStartCustomEvent

        This event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onConnectionStart

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.startIndex - The index of the task that a connection is started from.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of connectionStart event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('connectionStart', function (event) {
    const detail = event.detail,
        startIndex = detail.startIndex;

	// event handling code goes here.
})

        connectionEndCustomEvent

        This event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onConnectionEnd

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the connection that was created.
        ev.detail.startTaskId - The id of the task that a connection is started from.
        ev.detail.startIndex - The index of the task that a connection is started from.
        ev.detail.endIndex - The index of the task that a connection ended to.
        ev.detail.endTaskId - The id of the task that a connection ended to.
        ev.detail.type - The type of connection. Fours types are available:
        • 0 - start-to-start
        • 1 - end-to-start
        • 2 - end-to-end
        • 3 - start-to-end

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of connectionEnd event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('connectionEnd', function (event) {
    const detail = event.detail,
        id = detail.id,
        startTaskId = detail.startTaskId,
        startIndex = detail.startIndex,
        endIndex = detail.endIndex,
        endTaskId = detail.endTaskId,
        type = detail.type;

	// event handling code goes here.
})

        changeCustomEvent

        This event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onChange

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.value - The index of the new selected task.
        ev.detail.oldValue - The index of the previously selected task.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of change event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

        columnResizeCustomEvent

        This event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the columnResize property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onColumnResize

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.dataField - The name of the column. Corresponds to the value attribute of a taskColumns/resourceColumns object.
        ev.detail.headerCellElement - The HTMLElement column cell element that was resized.
        ev.detail.widthInPercentages - The new width of the column in percentages.
        ev.detail.width - The new width of the column in pixels.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of columnResize event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('columnResize', function (event) {
    const detail = event.detail,
        dataField = detail.dataField,
        headerCellElement = detail.headerCellElement,
        widthInPercentages = detail.widthInPercentages,
        width = detail.width;

	// event handling code goes here.
})

        closingCustomEvent

        This event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.

        • Bubbles Yes
        • Cancelable Yes
        • Interface CustomEvent
        • Event handler property onClosing

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip.
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is going to close.
        ev.detail.type - The type of window/tooltip that is going to close. There are three types of windows inside GanttChart:
        • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
        • task - a window used for task editing.
        • connection - a window used to delete a connection.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of closing event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('closing', function (event) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

        closeCustomEvent

        This event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onClose

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is closed.
        ev.detail.type - The type of window/tooltip that is closed. There are three types of windows inside GanttChart:
        • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
        • task - a window used for task editing.
        • connection - a window used to delete a connection.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of close event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('close', function (event) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

        collapseCustomEvent

        This event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onCollapse

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
        ev.detail.item - The object details of the collapsed item.
        ev.detail.index - The index of the collapsed item.
        ev.detail.label - The label of the collapsed item.
        ev.detail.value - The value of the collapsed item.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of collapse event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('collapse', function (event) {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

        dragStartCustomEvent

        This event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.

        • Bubbles Yes
        • Cancelable Yes
        • Interface CustomEvent
        • Event handler property onDragStart

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task that is going to be dragged.
        ev.detail.item - The object of the task that is going to be dragged.
        ev.detail.dateStart - The start date of the task that is going to be dragged.
        ev.detail.dateEnd - The end date of the task that is going to be dragged.
        ev.detail.segment - The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of dragStart event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        dragEndCustomEvent

        This event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.

        • Bubbles Yes
        • Cancelable Yes
        • Interface CustomEvent
        • Event handler property onDragEnd

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task that is was dragged.
        ev.detail.item - The object of the task that is was dragged.
        ev.detail.dateStart - The start date of the task that is was dragged.
        ev.detail.dateEnd - The end date of the task that is was dragged.
        ev.detail.segment - The segment object that was dragged. This attribute is undefined if a segment has not been dragged.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of dragEnd event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        expandCustomEvent

        This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onExpand

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.isGroup - A boolean flag indicating whether the collapsed item is a resource group. This is the case when groupByResoruces is enabled.
        ev.detail.item - The index of the expanded item.
        ev.detail.index - The index of the expanded item.
        ev.detail.label - The label of the expanded item.
        ev.detail.value - The value of the expanded item.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of expand event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('expand', function (event) {
    const detail = event.detail,
        isGroup = detail.isGroup,
        item = detail.item,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

        filterCustomEvent

        This event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onFilter

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of items that have been filtered ( task or resource ).
        ev.detail.action - The name of the filtering action (whether filtering is added or removed).
        ev.detail.filters - The filters that have been applied. Filters represent Smart.Utilities.FilterGroup objects.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of filter event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('filter', function (event) {
    const detail = event.detail,
        type = detail.type,
        action = detail.action,
        filters = detail.filters;

	// event handling code goes here.
})

        itemClickCustomEvent

        This event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onItemClick

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.item - The item that was clicked. It can be a task, resource or connection.
        ev.detail.type - The type of item. Possible values are: 'task', 'project', 'resource', 'connection'.
        ev.detail.originalEvent - The original DOM event.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of itemClick event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        type = detail.type,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

        itemInsertCustomEvent

        This event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onItemInsert

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of itemInsert event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('itemInsert', function (event) {
    const detail = event.detail,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

        itemRemoveCustomEvent

        This event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onItemRemove

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of itemRemove event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('itemRemove', function (event) {
    const detail = event.detail,
        id = detail.id,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

        itemUpdateCustomEvent

        This event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onItemUpdate

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.type - The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'.
        ev.detail.item - An object that represents the actual item with it's attributes.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of itemUpdate event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('itemUpdate', function (event) {
    const detail = event.detail,
        id = detail.id,
        type = detail.type,
        item = detail.item;

	// event handling code goes here.
})

        openingCustomEvent

        This event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.

        • Bubbles Yes
        • Cancelable Yes
        • Interface CustomEvent
        • Event handler property onOpening

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is going to open.
        ev.detail.type - The type of window/tooltip that is going to open. There are three types of windows inside GanttChart:
        • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
        • task - a window used for task editing.
        • connection - a window used to delete a connection.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of opening event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('opening', function (event) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

        openCustomEvent

        This event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onOpen

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.owner - The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip
        ev.detail.item - The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip.
        ev.detail.target - The instance of the window/tooltip that is opened.
        ev.detail.type - The type of window/tooltip that is opened. There are three types of windows inside GanttChart:
        • confirm - a confirm window. This type of window is usually used to confirm the deletion of a task.
        • task - a window used for task editing.
        • connection - a window used to delete a connection.
        . If the event is a tooltip event, there are several tooltip types:
        • indicator - when the tooltip owner is an indicator.
        • segment - when the tooltip owner is a task segment.
        • task - when the tooltip owner is a task.
        • resource - when the tooltip target is a resource.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of open event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('open', function (event) {
    const detail = event.detail,
        owner = detail.owner,
        item = detail.item,
        target = detail.target,
        type = detail.type;

	// event handling code goes here.
})

        progressChangeStartCustomEvent

        This event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onProgressChangeStart

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.index - The index of the task which progress is going to be changed.
        ev.detail.progress - The progress of the task before it is changed.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of progressChangeStart event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('progressChangeStart', function (event) {
    const detail = event.detail,
        id = detail.id,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
})

        progressChangeEndCustomEvent

        This event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onProgressChangeEnd

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task.
        ev.detail.index - The index of the task which progress is has been changed.
        ev.detail.progress - The progress of the task after it was changed.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of progressChangeEnd event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('progressChangeEnd', function (event) {
    const detail = event.detail,
        id = detail.id,
        index = detail.index,
        progress = detail.progress;

	// event handling code goes here.
})

        resizeStartCustomEvent

        This event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onResizeStart

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task that is going to be resized.
        ev.detail.item - The object of the task that is going to be resized.
        ev.detail.dateStart - The start date of the task that is going to be resized.
        ev.detail.dateEnd - The end date of the task that is going to be resized.
        ev.detail.segment - The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of resizeStart event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        resizeEndCustomEvent

        This event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onResizeEnd

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.id - The id of the task that was resized.
        ev.detail.item - The object of the task that was resized.
        ev.detail.dateStart - The start date of the task that was resized.
        ev.detail.dateEnd - The end date of the task that was resized.
        ev.detail.segment - The segment object that was resized. This attribute is undefined if a segment has not been resized.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of resizeEnd event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        id = detail.id,
        item = detail.item,
        dateStart = detail.dateStart,
        dateEnd = detail.dateEnd,
        segment = detail.segment;

	// event handling code goes here.
})

        sortCustomEvent

        This event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onSort

        Arguments

        evCustomEvent
        ev.detailObject
        ev.detail.type - The type of columns that have been sorted ( task or resource column ).
        ev.detail.columns - An array of objects that contains the currently sorted column objects.
        ev.detail.sortDataFields - The dataFields of the columns that have been sorted. The dataField corresponds to the value property of a taskColumns/resourceColumns object.
        ev.detail.sortOrders - The orders of the columns that have been sorted.
        ev.detail.sortDataTypes - The data types of the columns that have been sorted.

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of sort event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('sort', function (event) {
    const detail = event.detail,
        type = detail.type,
        columns = detail.columns,
        sortDataFields = detail.sortDataFields,
        sortOrders = detail.sortOrders,
        sortDataTypes = detail.sortDataTypes;

	// event handling code goes here.
})

        scrollBottomReachedCustomEvent

        This event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onScrollBottomReached

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of scrollBottomReached event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

        scrollTopReachedCustomEvent

        This event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onScrollTopReached

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of scrollTopReached event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

        scrollLeftReachedCustomEvent

        This event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onScrollLeftReached

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of scrollLeftReached event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollLeftReached', function (event) {
	// event handling code goes here.
})

        scrollRightReachedCustomEvent

        This event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.

        • Bubbles Yes
        • Cancelable No
        • Interface CustomEvent
        • Event handler property onScrollRightReached

        Arguments

        evCustomEvent

        Methods

        isDefaultPrevented

        Returns true if the event was prevented by any of its subscribers.

        Returns

        boolean true if the default action was prevented. Otherwise, returns false.

        preventDefault

        The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

        stopPropagation

        The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

        Example

        Set up the event handler of scrollRightReached event. 

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addEventListener('scrollRightReached', function (event) {
	// event handling code goes here.
})

        Methods

        addFilter( columns: any, filterGroup: any): void

        Enables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.

        Arguments

        columnsany

        An object or an array of objects with the following syntax:

        • type - indicates the type of column to filter. Possible values are 'task' or 'resource'.
        • value - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).
        .

        filterGroupany

        A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: 

        const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);


        Invoke the addFilter method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.addFilter("{ type: 'task', value: 'label' }, FilterGroup");

        clearFilters(): void

        Removes all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.


        Invoke the clearFilters method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearFilters();

        clearSort(): void

        Removes any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.


        Invoke the clearSort method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearSort();

        clearSelection(): void

        Deselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.


        Invoke the clearSelection method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearSelection();

        clearState(): void

        Removes a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.


        Invoke the clearState method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearState("state");

        clearTasks(): void

        Deletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.


        Invoke the clearTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearTasks();

        clearResources(): void

        Deletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.


        Invoke the clearResources method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.clearResources();

        createConnection( startTaskIndex: number | string, taskEndIndex?: number | string, connectionType?: number, lag?: number): void

        Establishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.

        Arguments

        startTaskIndexnumber | string

        The id of the start task or the connection string like '2-3-0'. If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary

        taskEndIndex?number | string

        The id of the end task.

        connectionType?number

        The type of the connection. A numeric value from 0 to 3. The connection type can be:

        • 0 - Start-to-Start connection.
        • 1 - End-to-Start connection.
        • 2 - End-to-End connection.
        • 3 - Start-to-End connection.

        lag?number

        The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.


        Invoke the createConnection method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.createConnection("1, 2, 0");

        collapse( id: string | number): void

        Collapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.

        Arguments

        idstring | number

        The id of a project item that should be collapsed.


        Invoke the collapse method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.collapse("0");

        beginUpdate(): void

        Initiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.


        Invoke the beginUpdate method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.beginUpdate();

        endUpdate(): void

        Concludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.


        Invoke the endUpdate method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.endUpdate();

        refresh( fullRefresh?: boolean): void

        Refreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.

        Arguments

        fullRefresh?boolean

        If set the GanttChart will be re-rendered completely.


        Invoke the refresh method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.refresh(true,false);

        ensureVisible( taskId: string | number): void

        Ensures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.

        Arguments

        taskIdstring | number

        The id of the target Task.


        Invoke the ensureVisible method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.ensureVisible("0");

        expand( id: string | number): void

        Expands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.

        Arguments

        idstring | number

        The id of a project task that should be expanded.


        Invoke the expand method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.expand("0");

        exportData( dataFormat: string, callback?: any): void

        Exports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.

        Arguments

        dataFormatstring

        Determines the format of the exported file. Three possible values are available:

        • pdf
        • xlsx
        • html
        • tsv
        • csv
        • xml

        callback?any

        A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.


        Invoke the exportData method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.exportData("'pdf'");

        getConnections(): array

        Retrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:

        - **id**: A unique identifier for the connection.
        - **type**: The type or category of the connection (e.g., dependency, sequential, etc.).
        - **startTaskId**: The unique identifier of the task where the connection originates.
        - **endTaskId**: The unique identifier of the task where the connection terminates.
        - **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).
        - **endIndex**: The index position within the end task where the connection attaches.
        - **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.

        This structure provides all necessary details for understanding the relationship and timing between connected tasks.

        Returnsarray

        Invoke the getConnections method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getConnections();

        getConnectionDetails( connectionId: string): object | undefined

        Returns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.

        Arguments

        connectionIdstring

        A connection id. Each connection has a unique id that is assigned when a connection is created.

        Returnsobject | undefined

        Invoke the getConnectionDetails method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getConnectionDetails("0-3-0","6-15-1");

        getState(): []

        Provides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.

        Returns[]

        Invoke the getState method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getState();

        getItemPath( item: any): string

        Returns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.

        Arguments

        itemany

        A GattChartTask/GanttChartResource item object.

        Returnsstring

        Invoke the getItemPath method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getItemPath("task");

        getTask( itemId: string | number): object

        Returns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.

        Arguments

        itemIdstring | number

        The id/path of a task.

        Returnsobject

        Invoke the getTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTask("0.4");

        getTasks(): []

        Returns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.

        Returns[]

        Invoke the getTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTasks();

        getTaskIndex( task: any): number

        Returns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.

        Arguments

        taskany

        A GattChartTask object.

        Returnsnumber

        Invoke the getTaskIndex method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTaskIndex("gantt.tasks[0]");

        getTaskConnections( taskId: any): any

        Returns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.

        Arguments

        taskIdany

        A GanttChartTask object or it's id.

        Returnsany

        Invoke the getTaskConnections method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTaskConnections("0");

        getTaskProject( task: any): object | undefined

        Returns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.

        Arguments

        taskany

        A GantChartTask object.

        Returnsobject | undefined

        Invoke the getTaskProject method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getTaskProject("taskA","taskB");

        getResource( itemId: string | number): object

        Returns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.

        Arguments

        itemIdstring | number

        The id/path of a resource.

        Returnsobject

        Invoke the getResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResource("4");

        getResources(): []

        Returns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.

        Returns[]

        Invoke the getResources method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResources();

        getResourceIndex( resource: any): number

        Returns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.

        Arguments

        resourceany

        A GanttChartResource object.

        Returnsnumber

        Invoke the getResourceIndex method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResourceIndex("ganttChartResource");

        getResourceTasks( resource: any): array

        Returns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.

        Arguments

        resourceany

        A GanttChartResource object or it's id.

        Returnsarray

        Invoke the getResourceTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getResourceTasks("ganttChartResource");

        getSelectedIds(): array | null

        Returns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.

        Returnsarray | null

        Invoke the getSelectedIds method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedIds();

        getSelectedTasks(): array | null

        Returns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.

        Returnsarray | null

        Invoke the getSelectedTasks method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedTasks();

        getSelectedResources(): array | null

        Returns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.

        Returnsarray | null

        Invoke the getSelectedResources method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getSelectedResources();

        getWorkingHours(): array

        Returns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).

        Returnsarray

        Invoke the getWorkingHours method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.getWorkingHours();

        hideTooltip(): array

        Conceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.

        Returnsarray

        Invoke the hideTooltip method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.hideTooltip();

        isWorkingDay( date: Date): void

        Determines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.

        Arguments

        dateDate

        A javascript Date object or a string/number which represents a valid JS Date.


        Invoke the isWorkingDay method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.isWorkingDay("new Date(2021, 1, 10)");

        loadState( state?: any[]): void



        Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.

        Arguments

        state?any[]

        An Array containing a valid structure of Gantt Chart tasks.


        Invoke the loadState method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.loadState("state");

        removeAllConnections(): void

        Removes all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.


        Invoke the removeAllConnections method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.removeAllConnections();

        removeConnection( startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): object

        Removes a connection between two tasks.
        The function can be called in one of two ways:

        1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
        2. With a single connection string argument that describes the connection (e.g., "1->2:FS").

        This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.

        Arguments

        startTaskIndexnumber | string

        The index of the start task or the connection string like '2-3-0.

        taskEndIndex?number

        The index of the end task.

        connectionType?number

        The type of the connection. A numeric value from 0 to 3.

        Returnsobject

        Invoke the removeConnection method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.removeConnection("0, 4, 1");

        removeTaskConnection( taskStart: any, taskEnd?: any): void

        Deletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.

        Arguments

        taskStartany

        The start task object or it's id.

        taskEnd?any

        The end task object or it's id.


        Invoke the removeTaskConnection method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.removeTaskConnection("10, 4");

        showTooltip( target: HTMLElement, content?: string): void

        Displays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.

        Arguments

        targetHTMLElement

        The HTMLElement that will be the target of the tooltip.

        content?string

        Allows to set a custom content for the Tooltip.


        Invoke the showTooltip method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.showTooltip();

        scrollToDate( date: Date): void

        Scrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.

        Arguments

        dateDate

        The date to scroll to.


        Invoke the scrollToDate method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.scrollToDate("new Date(2024, 5, 5)");

        saveState( state?: any[]): void

        Stores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.

        Arguments

        state?any[]

        An Array containing a valid structure of Gantt Chart tasks.


        Invoke the saveState method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.saveState("state");

        insertTask( taskObject: any, project?: any, index?: number): string | number | undefined

        Inserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.

        Arguments

        taskObjectany

        An object describing a Gantt Chart task.

        project?any

        A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If null is passed as an arguemnt the new task will be inserted at root level without a parent project.

        index?number

        The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.

        Returnsstring | number | undefined

        Invoke the insertTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
const result = ganttchart.insertTask("{ label: 'Inserted Task 1', dateStart: '2020-08-10', dateEnd: '2020-12-23' }, '0.1', 1");

        updateTask( taskId: any, taskObject: any): void

        Updates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.

        Arguments

        taskIdany

        A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.

        taskObjectany

        An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.


        Invoke the updateTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.updateTask("'2', { label: 'Updated Task', dateEnd: '2020-12-23' }");

        removeTask( taskId: any): void

        Removes the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.

        Arguments

        taskIdany

        A number or string that represents the id of a task or the actual item object.


        Invoke the removeTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.removeTask("0");

        insertResource( resourceId: string | number, resourceObject?: any): void

        Adds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.

        Arguments

        resourceIdstring | number

        A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

        resourceObject?any

        An object describing a Gantt Chart resource.


        Invoke the insertResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.insertResource("0, { id: 'newResource', label: 'New Resource', capacity: 4 }");

        updateResource( resourceId: any, taskObject: any): void

        Updates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.

        Arguments

        resourceIdany

        A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.

        taskObjectany

        An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.


        Invoke the updateResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.updateResource("2, { label: 'Updated Task', capacity: 6 }");

        removeResource( resourceId: any): void

        Deletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.

        Arguments

        resourceIdany

        A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.


        Invoke the removeResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.removeResource("0");

        openWindow( taskId: any): void

        Opens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.

        Arguments

        taskIdany

        A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').


        Invoke the openWindow method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.openWindow("2");

        closeWindow(): void

        Closes any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.


        Invoke the closeWindow method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.closeWindow();

        print(): void

        Configures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.


        Invoke the print method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.print();

        setWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void

        Enables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.

        Arguments

        settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

        An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.


        Invoke the setWorkTime method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.setWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

        selectTask( id: string | number): void

        Enables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.

        Arguments

        idstring | number

        The id of the task to select.


        Invoke the selectTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.selectTask(1,"5");

        selectResource( id: string | number): void

        Enables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.

        Arguments

        idstring | number

        The id of the resource to select.


        Invoke the selectResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.selectResource(1,"5");

        unselectTask( id: string | number): void

        Enables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.

        Arguments

        idstring | number

        The id of the task to unselect.


        Invoke the unselectTask method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unselectTask(1,"5");

        unselectResource( id: string | number): void

        Enables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.

        Arguments

        idstring | number

        The id of the resource to unselect.


        Invoke the unselectResource method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unselectResource(1,"5");

        unsetWorkTime( settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void

        Removes any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.

        Arguments

        settings{ days: (number | string | number[])[], hours: (number | string | number[])[] }

        An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.


        Invoke the unsetWorkTime method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.unsetWorkTime("{ days: ['1-3']}","{ days: [[1,3]], hours: ['0:00-7:00']}");

        sort( columns: any): void

        Automatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.

        Arguments

        columnsany

        An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed.
        An object should have the following properties:

        • value - a string that represents the value of a taskColumn to sort.
        • sortOrder - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values.
        • type - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.


        Invoke the sort method.

        const ganttchart = document.querySelector('smart-gantt-chart');
ganttchart.sort("[{ value: 'label', sortOrder: 'asc', type: 'task' }]","[{ value: 'label', sortOrder: 'asc', type: 'task' }, { value: 'label', sortOrder: 'asc', type: 'resource' }]");

        CSS Variables

        --smart-gantt-chart-resource-splitter-bar-fit-sizevar()

        Default value

        "calc(var(--smart-gantt-chart-resource-timeline-content-height) + var(--smart-gantt-chart-task-default-height))"

        Determines the size of the splitter bar inside the Resource panel between the Table component and Resource timeline.

        --smart-gantt-chart-task-splitter-bar-fit-sizevar()

        Default value

        "var(--smart-gantt-chart-task-timeline-content-height)"

        Determines the height of the splitter nar inside the Task panel between the Table component and the Task timeline.

        --smart-gantt-chart-task-default-heightvar()

        Default value

        "30px"

        The height of a Task inside the Timeline

        --smart-gantt-chart-header-heightvar()

        Default value

        "var(--smart-gantt-chart-task-default-height)"

        The height of the Timeline Header container that is only displayed when the headerTemplate property is set. By default it's hidden.

        --smart-gantt-chart-task-bar-fill-paddingvar()

        Default value

        "5px"

        The padding of the Fill of the Task Bar

        --smart-gantt-chart-task-label-paddingvar()

        Default value

        "var(--smart-gantt-chart-task-bar-fill-padding)"

        --smart-gantt-chart-task-thumb-colorvar()

        Default value

        "rgba(0,0,0,.55)"

        The color of the thumb

        --smart-gantt-chart-task-progress-colorvar()

        Default value

        "rgba(0,0,0,.15)"

        The default color of the progress fill of all Tasks inside the Timeline

        --smart-gantt-chart-project-colorvar()

        Default value

        "#ffa558"

        The defaut color for all Project tasks

        --smart-gantt-chart-project-label-colorvar()

        Default value

        "#333"

        Determines the label color of the project tasks inside the Timeline.

        --smart-gantt-chart-project-label-color-selectedvar()

        Default value

        "#000"

        Determines the label color of the project tasks inside the Timeline when selected.

        --smart-gantt-chart-project-progress-colorvar()

        Default value

        "var(--smart-gantt-chart-task-progress-color)"

        The default color of the progress fill for all Project tasks

        --smart-gantt-chart-task-colorvar()

        Default value

        "rgb(43, 195, 190)"

        The default color of a Task inside the Timeline

        --smart-gantt-chart-milestone-colorvar()

        Default value

        "#800080"

        The default color for all Milestones

        --smart-gantt-chart-timeline-task-background-colorvar()

        Default value

        "transparent"

        Determines the background color of the tasks(rows) inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-feedback-colorvar()

        Default value

        "#e6510a"

        Determines the default color of the feedback that is shows when creating a connection between tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-feedback-widthvar()

        Default value

        "1px"

        Determines the default width of the feedback that is shows when creating a connection between tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-feedback-stylevar()

        Default value

        "dashed"

        Determines the style of the feedback that is shows when creating a connection between tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-colorvar()

        Default value

        "var(--smart-gantt-chart-timeline-task-connection-feedback-color)"

        Determines the color of the connections between Tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-color-hovervar()

        Default value

        "var(--smart-gantt-chart-timeline-task-connection-color)"

        Determines the color on hover of the connections between Tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-widthvar()

        Default value

        "var(--smart-gantt-chart-timeline-task-connection-feedback-width)"

        Determines the width of the connections between the tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-stylevar()

        Default value

        "solid"

        Determines the style of the connections between the tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-arrow-typevar()

        Default value

        "solid"

        Determines the border type of the arrow of the connections between Tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-connection-arrow-widthvar()

        Default value

        "5px"

        Determines the width of the arrow of the connections between Tasks inside the Timeline.

        --smart-gantt-chart-timeline-task-resize-indicator-widthvar()

        Default value

        "4px"

        Determines the defualt width of the resize indicator of the Task bars inside the Timeline.

        --smart-gantt-chart-timeline-task-resize-indicator-colorvar()

        Default value

        "#fff"

        Determines the background-color of the resize indicators of the Task bars insinde the Timeline.

        --smart-gantt-chart-timeline-task-resize-indicator-border-colorvar()

        Default value

        "#333"

        Determines the border-color of the resize indicator of the Task bars inside the Timeline.

        --smart-gantt-chart-timeline-task-progress-thumb-sizevar()

        Default value

        "10px"

        Determines the size of the thumb controlling the progress of a Task inside the Timeline.

        --smart-gantt-chart-timeline-cell-sizevar()

        Default value

        "auto"

        Determines the default width of the cells inside the Timeline.

        --smart-gantt-chart-timeline-cell-min-sizevar()

        Default value

        "70px"

        Determines the default min-width of the cells inside the Timeline and the Tree columns.

        --smart-gantt-chart-timeline-task-min-widthvar()

        Default value

        "5px"

        Determines the default min-width of the Tasks insinde the Timeline. Not applicable to Milestone tasks.

        --smart-gantt-chart-timeline-weekend-colorvar()

        Default value

        "#EFF5FD"

        Determines the default background color of the 'weekend' cells insinde the Timeline.

        --smart-gantt-chart-timeline-nonworking-colorvar()

        Default value

        "#F5F5F5"

        Determines the default background-color of the nonworking days/hours inside the Timeline.

        --smart-gantt-chart-default-widthvar()

        Default value

        "auto"

        Determines the default width of the element.

        --smart-gantt-chart-default-heightvar()

        Default value

        "600px"

        Determines the height of the element.

        --smart-gantt-chart-task-popup-window-default-widthvar()

        Default value

        "500px"

        Determines the width of the task editing popup windows of the element.

        --smart-gantt-chart-connection-popup-window-default-widthvar()

        Default value

        "300px"

        Determines the width of the connection editing popup windows of the element.

        --smart-gantt-chart-confirm-popup-window-default-widthvar()

        Default value

        "var(--smart-gantt-chart-connection-popup-default-width)"

        Determines the width of the confirm popup window of the element.

        --smart-gantt-chart-popup-window-header-heightvar()

        Default value

        "35px"

        Determines the height of the header of the popup windows inside the element.

        --smart-gantt-chart-popup-window-footer-heightvar()

        Default value

        "50px"

        Determines the height of the footer of the popup windows insinde the element.

        --smart-gantt-chart-header-placeholdervar()

        Default value

        " - "

        Determines the placeholder for the Timeline headers when there are no tasks.

        --smart-gantt-chart-progress-label-paddingvar()

        Default value

        "0 10px 0 10px"

        Determines the padding for the Timeline task progress label.

        --smart-gantt-chart-filter-row-heightvar()

        Default value

        "30px"

        Determines the height of the filter row that is displayed when taskFiltering or resourceFiltering is enabled.

        --smart-gantt-chart-task-fill-border-radiusvar()

        Default value

        "0"

        Determines the default border radius for the Timeline task bars.

        --smart-gantt-chart-segment-link-colorvar()

        Default value

        "var(--smart-gantt-chart-task-color)"

        Determines the color of the link between the segments of a task.

        --smart-gantt-chart-segment-link-sizevar()

        Default value

        "var(--smart-border-width)"

        Determines the size of the links between the segments of a task.

        --smart-gantt-chart-date-marker-colorvar()

        Default value

        "var(--smart-primary)"

        Determines the text color for the date markers.

        --smart-gantt-chart-date-marker-heightvar()

        Default value

        "25px"

        Determines the height of the date markers.

        --smart-gantt-chart-date-marker-widthvar()

        Default value

        "var(--smart-border-width)"

        Determines the width of the date markers.

        --smart-gantt-chart-date-marker-backgroundvar()

        Default value

        "var(--smart-primary)"

        Determines the background for the date marker label.

        --smart-gantt-chart-date-marker-colorvar()

        Default value

        "var(--smart-primary-color)"

        Determines the text color for the date marker label.

        --smart-gantt-chart-date-marker-h-offsetvar()

        Default value

        "10px"

        Determines the horizontal offset for the date marker label.

        --smart-gantt-chart-date-marker-v-offsetvar()

        Default value

        "15%"

        Determines the vertical offset for the date marker label.

        --smart-gantt-chart-deadline-iconvar()

        Default value

        "var(--smart-icon-attention-circled)"

        Determines the icon for the deadlines.

        --smart-gantt-chart-deadline-colorvar()

        Default value

        "var(--smart-error)"

        Determines the color for the deadlines icons.

        --smart-gantt-chart-baseline-proportionvar()

        Default value

        "2"

        Determines the proportion of the baseline compared to the task height. For example, the default value 2 means that the baseline will be taskHeight / 2.

        --smart-gantt-chart-baseline-backgroundvar()

        Default value

        "rgba(166, 205, 87, .5)"

        Determines the background of the baseline.

        --smart-gantt-chart-progress-label-widthvar()

        Default value

        "60px"

        Determines the width of the progress label.

        --smart-gantt-chart-current-time-indicator-sizevar()

        Default value

        "1px"

        Determines the current time indicator width.

        --smart-gantt-chart-current-time-indicator-backgroundvar()

        Default value

        "var(--smart-primary)"

        Determines the current time indicator background.

        --smart-gantt-chart-current-time-indicator-arrow-sizevar()

        Default value

        "7px"

        Determines the arrow size of the curernt time indicator.

        --smart-gantt-chart-current-time-indicator-header-sizevar()

        Default value

        "2px"

        Determines the current time indicator size inside the timeline header cell.

        --smart-gantt-chart-shader-backgroundvar()

        Default value

        "rgba(var(--smart-border-rgb), .5)"

        Determines the current time shader background color.