@syncfusion/ej2-react-gantt

{ "name": "Gantt", "description": "Gantt Components", "keywords": { "common": ["ej2", "syncfusion", "JavaScript", "TypeScript", "gantt", "gantt-chart", "project-management", "project-planning", "task-scheduling", "timeline-chart", "project-tracking", "project-timeline", "resource-management", "task-management", "schedule-management", "timeline-management", "gantt-view", "gantt-chart-component", "gantt-chart-control"], "angular": ["angular", "angular-gantt", "angular-gantt-chart", "gantt", "gantt-chart", "project-management", "project-planning", "task-scheduling", "timeline-chart", "project-tracking", "project-timeline", "resource-management", "task-management", "schedule-management", "timeline-management", "gantt-view", "gantt-chart-component", "gantt-chart-control" ], "react": ["react", "reactjs", "react-gantt", "react-gantt-chart", "JavaScript", "gantt", "gantt-chart", "project-management", "project-planning", "task-scheduling", "timeline-chart", "project-tracking", "project-timeline", "resource-management", "task-management", "schedule-management", "timeline-management", "gantt-view", "gantt-chart-component", "gantt-chart-control"], "vue": ["vue", "vuejs", "vue-gantt", "vue-gantt-chart", "gantt", "gantt-chart", "project-management", "project-planning", "task-scheduling", "timeline-chart", "project-tracking", "project-timeline", "resource-management", "task-management", "schedule-management", "timeline-management", "gantt-view", "gantt-chart-component", "gantt-chart-control" ] }, "repository": { "type": "git", "url": "https://github.com/syncfusion/ej2-gantt" }, "eventInterfaces": [ "IQueryTaskbarInfoEventArgs", "ITaskbarEditedEventArgs", "ITaskDeletedEventArgs", "ITimeSpanEventArgs", "IActionBeginEventArgs", "IValidateLinkedTaskArgs", "ISplitterResizedEventArgs", "BeforeTooltipRenderEventArgs", "IDependencyEventArgs", "ITaskAddedEventArgs" ], "components": [{ "baseClass": "Gantt", "directoryName": "gantt", "type": "simple", "isPartialClass": true, "defaultTag": "<div id='sample'></div>", "twoWays": [ "dataSource" ], "blazorPlaceholder": "gantt", "isGenericClass": true, "blazorDependency": [ "ej2-base" ], "blazorType": "native", "dynamicModules": [ "Filter", "Selection", "Sort", "Reorder", "Resize", "Edit", "DayMarkers", "Toolbar", "ContextMenu", "ExcelExport", "RowDD", "ColumnMenu", "PdfExport", "VirtualScroll", "CriticalPath", "UndoRedo" ], "diModuleFiles": [ { "fileName": "filter" }, { "fileName": "selection" }, { "fileName": "sort" }, { "fileName": "column-reorder" }, { "fileName": "column-resize" }, { "fileName": "edit" }, { "fileName": "day-marker" }, { "fileName": "toolbar" }, { "fileName": "context-menu"}, { "fileName": "excel-export"}, { "fileName": "rowdragdrop"}, { "fileName": "column-menu"}, { "fileName": "pdf-export"}, { "fileName": "virtual-scroll"}, { "fileName": "critical-path"}, { "fileName": "undo-redo"} ], "comment": [ "/**", " * `ejs-gantt` represents the Angular Gantt Component.", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'></ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `GanttComponent` represents the react Gantt.", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}/>", " * ```", " */" ], "vueComment": [ "/**", " * `ejs-gantt` represents the VueJS Gantt Component.", " * ```vue", " * <ejs-gantt :dataSource='data' allowSelection='true' allowSorting='true'></ejs-gantt>", " * ```", " */" ], "complexDirective": [ { "propertyName": "labelSettings", "baseClass": "LabelSettings", "blazorTemplates": [ "rightLabel:rightLabelTemplate", "leftLabel:leftLabelTemplate", "taskLabel:taskLabelTemplate" ] }, { "propertyName": "taskFields", "baseClass": "TaskFields" }, { "propertyName": "resourceFields", "baseClass": "ResourceFields" }, { "propertyName": "timelineSettings", "baseClass": "TimelineSettings", "complexDirective": [ { "propertyName": "topTier", "baseClass": "TimelineTierSettings", "blazorClassName": "GanttTopTierSettings", "isCommon": true, "blazorCommonClassName": "GanttTimelineTierSettings" }, { "propertyName": "bottomTier", "baseClass": "TimelineTierSettings", "blazorClassName": "GanttBottomTierSettings", "isCommon": true, "blazorCommonClassName": "GanttTimelineTierSettings" } ] }, { "propertyName": "sortSettings", "baseClass": "SortSettings", "tagDirective": [ { "arrayDirectiveClassName": "SortDescriptors", "directiveClassName": "SortDescriptor", "propertyName": "columns", "arrayDirectiveSelector": "ejs-gantt>e-sort-settings>e-sort-descriptors", "directiveSelector": "ejs-gantt>e-sort-settings>e-sort-descriptor", "directoryName": "gantt", "baseClass": "SortDescriptor", "comment": [ "/**", " * `e-sort-descriptor` directive represent a sorted column of the Angular Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-sort-settings>", " * <e-sort-descriptors>", " * <e-sort-descriptor field='taskName' direction='Ascending'></e-column>", " * </e-sort-descriptors>", " * </e-sort-settings>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `SortDescriptorDirective` represent a sorted column of the react Gantt. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <SortSettingsDirective>", " * <SortDescriptorsDirective>", " * <SortDescriptorDirective field='taskName' direction='Ascending'></SortDescriptorDirective>", " * </SortDescriptorsDirective>", " * </SortSettingsDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-sort-descriptor` directive represent a sorted column of the VueJS Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource='data' allowSelection='true' allowSorting='true'> ", " * <e-sort-settings>", " * <e-sort-descriptors>", " * <e-sort-descriptor field='ID' width='150'/>", " * </e-sort-descriptors>", " * </e-sort-settings>", " * </ejs-gantt>", " * ```", " */" ] } ] }, { "propertyName": "loadingIndicator", "baseClass": "LoadingIndicator" }, { "propertyName": "editSettings", "baseClass": "EditSettings", "isPartialClass": true }, { "propertyName": "tooltipSettings", "baseClass": "TooltipSettings" }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings" }, { "propertyName": "filterSettings", "baseClass": "FilterSettings" }, { "propertyName": "splitterSettings", "baseClass": "SplitterSettings" }, { "propertyName": "searchSettings", "baseClass": "SearchSettings" } ], "tagDirective": [ { "arrayDirectiveClassName": "columns", "directiveClassName": "column", "propertyName": "columns", "arrayDirectiveSelector": "ejs-gantt>e-columns", "directiveSelector": "ejs-gantt>e-columns>e-column", "directoryName": "gantt", "baseClass": "Column", "comment": [ "/**", " * `e-column` directive represent a column of the Angular Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='150'></e-column>", " * <e-column field='taskName' headerText='Task Name' width='200'></e-column>", " * </e-columns>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `ColumnDirective` represent a column of the react Gantt. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <ColumnsDirective>", " * <ColumnDirective field='ID' width='150'></ColumnDirective>", " * <ColumnDirective field='taskName' headerText='Task Name' width='200'></ColumnDirective>", " * </ColumnsDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-column` directive represent a column of the VueJS Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource='data' allowSelection='true' allowSorting='true'> ", " * <e-columns>", " * <e-column field='ID' width='150'/>", " * <e-column field='taskName' headerText='Task Name' width='200'/>", " * </e-columns>", " * </ejs-gantt>", " * ```", " */" ], "templateProperties": [ "template", "headerTemplate" ], "blazorTemplates": [ "template", "headerTemplate" ] }, { "arrayDirectiveClassName": "AddDialogFields", "directiveClassName": "AddDialogField", "arrayDirectiveSelector": "ejs-gantt>e-add-dialog-fields", "directiveSelector": "ejs-gantt>e-add-dialog-fields>e-add-dialog-field", "directoryName": "gantt", "propertyName": "addDialogFields", "baseClass": "AddDialogFieldSettings", "comment": [ "/**", " * `e-add-dialog-field` directive represent a add dialog fields collection in Gantt task add dialog. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-add-dialog-fields>", " * <e-add-dialog-field type='General' headerText='General'></e-add-dialog-field>", " * <e-add-dialog-field type='Dependency' headerText='Dependency'></e-add-dialog-field>", " * </e-add-dialog-fields>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `AddDialogFieldDirective` represent a add dialog fields of the react Gantt. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <AddDialogFieldsDirective>", " * <AddDialogFieldDirective type='General' headerText='General'></AddDialogFieldDirective>", " * <AddDialogFieldDirective type='Dependency' headerText='Dependency'></AddDialogFieldDirective>", " * </AddDialogFieldsDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-add-dialog-fields` directive represent a add dialog fields in VueJS Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-add-dialog-fields>", " * <e-add-dialog-field type='General' headerText='General'/>", " * <e-add-dialog-field type='Dependency' headerText='Dependency'/>", " * </e-add-dialog-fields>", " * </ejs-gantt>", " * ```", " */" ] }, { "arrayDirectiveClassName": "EditDialogFields", "directiveClassName": "EditDialogField", "arrayDirectiveSelector": "ejs-gantt>e-edit-dialog-fields", "directiveSelector": "ejs-gantt>e-edit-dialog-fields>e-edit-dialog-field", "directoryName": "gantt", "propertyName": "editDialogFields", "baseClass": "EditDialogFieldSettings", "comment": [ "/**", " * `e-edit-dialog-field` directive represent a edit dialog fields collection in Gantt task add dialog. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-edit-dialog-fields>", " * <e-edit-dialog-field type='General' headerText='General'></e-edit-dialog-field>", " * <e-edit-dialog-field type='Dependency' headerText='Dependency'></e-edit-dialog-field>", " * </e-edit-dialog-fields>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `EditDialogFieldDirective` represent a add dialog fields in VueJS Gantt. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <EditDialogFieldsDirective>", " * <EditDialogFieldDirective type='General' headerText='General'></EditDialogFieldDirective>", " * <EditDialogFieldDirective type='Dependency' headerText='Dependency'></EditDialogFieldDirective>", " * </EditDialogFieldsDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-edit-dialog-fields` directive represent a add dialog fields in VueJS Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-edit-dialog-fields>", " * <e-edit-dialog-field type='General' headerText='General'/>", " * <e-edit-dialog-field type='Dependency' headerText='Dependency'/>", " * </e-edit-dialog-fields>", " * </ejs-gantt>", " * ```", " */" ] }, { "arrayDirectiveClassName": "DayWorkingTimeCollection", "directiveClassName": "DayWorkingTime", "arrayDirectiveSelector": "ejs-gantt>e-day-working-time-collection", "directiveSelector": "ejs-gantt>e-day-working-time-collection>e-day-working-time", "directoryName": "gantt", "propertyName": "dayWorkingTime", "baseClass": "DayWorkingTime", "comment": [ "/**", " * `e-day-working-time-collection` directive represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-day-working-time-collection>", " * <e-day-working-time from='8' to='12'></e-day-working-time>", " * <e-day-working-time from='13' to='17'></e-day-working-time>", " * </e-day-working-time-collection>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `DayWorkingTimeDirective` represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <DayWorkingTimeCollection>", " * <DayWorkingTime from='8' to='12'></DayWorkingTimeCollection>", " * <DayWorkingTime from='13' to='17'></DayWorkingTimeCollection>", " * </DayWorkingTimeCollection>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-day-working-time-collection` directive represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-day-working-time-collection>", " * <e-day-working-time from='8' to='12'/>", " * <e-day-working-time from='13' to='17'/>", " * </e-day-working-time-collection>", " * </ejs-gantt>", " * ```", " */" ] }, { "arrayDirectiveClassName": "WeekWorkingTimes", "directiveClassName": "WeekWorkingTime", "arrayDirectiveSelector": "ejs-gantt>e-week-working-times", "directiveSelector": "ejs-gantt>e-week-working-times>e-week-working-time", "directoryName": "gantt", "propertyName": "weekWorkingTime", "baseClass": "WeekWorkingTime", "comment": [ "/**", " * `e-week-working-times` directive represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-week-working-times>", " * <e-week-working-time dayOfWeek='Monday'></e-week-working-time>", " * <e-week-working-time dayOfWeek='Monday'></e-week-working-time>", " * </e-week-working-times>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `WeekWorkingTimeDirective` represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <WeekWorkingTimeCollection>", " * <WeekWorkingTime dayOfWeek='Monday' from='8' to='12'></WeekWorkingTimeCollection>", " * <WeekWorkingTime dayOfWeek='Monday' from='13' to='17'></WeekWorkingTimeCollection>", " * </WeekWorkingTimeCollection>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-week-working-time-collection` directive represent a working time ranges in a day. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-week-working-time-collection>", " * <e-week-working-time dayOfWeek='Monday' from='8' to='12'/>", " * <e-week-working-time dayOfWeek='Monday' from='13' to='17'/>", " * </e-week-working-time-collection>", " * </ejs-gantt>", " * ```", " */" ] }, { "arrayDirectiveClassName": "Holidays", "directiveClassName": "Holiday", "arrayDirectiveSelector": "ejs-gantt>e-holidays", "directiveSelector": "ejs-gantt>e-holidays>e-holidays", "directoryName": "gantt", "propertyName": "holidays", "baseClass": "Holiday", "comment": [ "/**", " * `e-holidays` directive represent a holidays collection in Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-holidays>", " * <e-holiday from='02/20/2018' label='Holiday 1'></e-holiday>", " * <e-holiday from='05/15/2018' label='Holiday 2'></e-holiday>", " * </e-holidays>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `HolidaysDirective` represent a holidays collection in Gantt.. ", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <HolidaysDirective>", " * <HolidayDirective from='02/20/2018' label='Holiday 1'></HolidayDirective>", " * <HolidayDirective from='05/15/2018' label='Holiday 2'></HolidayDirective>", " * </HolidaysDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-holidays` directive represent a holidays collection in Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-holidays>", " * <e-holiday from='02/20/2018' label='Holiday 1'/>", " * <e-holiday from='05/15/2018' label='Holiday 2'/>", " * </e-holidays>", " * </ejs-gantt>", " * ```", " */" ] }, { "arrayDirectiveClassName": "EventMarkers", "directiveClassName": "EventMarker", "arrayDirectiveSelector": "ejs-gantt>e-event-markers", "directiveSelector": "ejs-gantt>e-event-markers>e-event-marker", "directoryName": "gantt", "propertyName": "eventMarkers", "baseClass": "EventMarker", "comment": [ "/**", " * `e-event-markers` directive represent a event marker collection in Gantt. ", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```html", " * <ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'> ", " * <e-event-markers>", " * <e-event-marker day='02/10/2018' label='Project Starts'></e-event-marker>", " * </e-event-markers>", " * </ejs-gantt>", " * ```", " */" ], "reactComment": [ "/**", " * `EventMarkersDirective` represent a event marker collection in Gantt", " * It must be contained in a Gantt component(`GanttComponent`). ", " * ```tsx", " * <GanttComponent dataSource={data} allowSelection={true} allowSorting={true}> ", " * <EventMarkersDirective>", " * <EventMarkerDirective day='02/10/2018' label='Project Starts'></EventMarkerDirective>", " * </EventMarkersDirective>", " * </GanttComponent>", " * ```", " */" ], "vueComment": [ "/**", " * `e-event-markers` directive represent a event marker collection in Gantt", " * It must be contained in a Gantt component(`ejs-gantt`). ", " * ```vue", " * <ejs-gantt :dataSource]='data' allowSelection='true' allowSorting='true'>", " * <e-event-markers>", " * <e-event-marker day='02/10/2018' label='Project Starts'/>", " * </e-event-markers>", " * </ejs-gantt>", " * ```", " */" ] } ], "templateProperties": [ "parentTaskbarTemplate", "timelineTemplate", "milestoneTemplate", "taskbarTemplate", "labelSettings.rightLabel", "labelSettings.leftLabel", "labelSettings.taskLabel", "tooltipSettings.taskbar", "tooltipSettings.baseline", "tooltipSettings.connectorLine", "tooltipSettings.editing", "tooltipSettings.timeline" ], "blazorTemplates": [ "parentTaskbarTemplate", "milestoneTemplate", "taskbarTemplate" ] } ] }