C3 AI Documentation Home

Gantt Chart Bryntum Concepts and Features

Bryntum

UiSdlGanttChart is built on top of Bryntum Scheduler Pro, a javascript library that manages and creates schedules for events associated to resources.

Bryntum has the following concepts:

Project Model

A Project defines the main characteristics and specifications of the whole chart. A project is represented by a "project model" which holds the main structure of the chart. The project holds the definitions for different objects that are called "stores" used for events, resources, calendars, etc. See more information here

Data stores

EventStore, ResourceStore, CalendarManagerStore, AssignmentStore, DependencyStore, TimeRangeStore, are configuration objects that are used by Bryntum to define data and other attributes for each of the elements in the Chart, in UiSdlGanttChart not all of them are open and, in general, they are mapped to UiSdlGanttChart...DataSpec types that will take care of the data but you might need to be aware of this structure in order to both contribute and build a component. You can find more info here

View presets

A view Preset represents a set of guidelines to show a header in the chart. This is a concept from Bryntum where you can define different headers and levels for data zooming, time configurations and labels. Bryntum provides a set of default values that can be passed just as a string, but if you want more customization you might want to provide the whole config object for the view preset. You can find the documentation here

Scheduler Pro Features

Scheduler Pro includes several features that modify the behavior of different elements of the chart. The UiSdlGanttChart component has a bryntumConfig field where you can pass in the json configuration that Bryntum will use.

For example, if you want to disable event dragging in the chart, you need to first add the entry of the feature: eventDragFeature and then set it to its desired config, or just a boolean value. So, for this feature, Bryntum requires this setup:

Text
const scheduler = new SchedulerPro({
  eventDragFeature : {
      constrainDragToResource : true
  }
});

which, in our config is added to the bryntumConfig field:

Text
  "bryntumConfig": {
    "eventDragFeature": {
      "constrainDragToResource" : "true"
    }
  }

In Bryntum's config, you will find the list of features in a "features" object inside the SchedulerPro config object but for React and our implementation you need to use the name of the feature concatenated to the "feature" word. For example, for feature "eventDrag" (which is the name of the feature) you will have to provide: "eventDragFeature". This is required because of the way the Scheduler Pro React wrapper is implemented. You can check more info regarding the wrapper here

Calendar highlihgt on resources

Users can define a set of calendars attached to either events or resources, you can define a simple highlighting strategy by just specifying which calendar to use under the calendarHighlight feature under the bryntumConfig option.

Text
{
  "bryntumConfig": {
    "calendarHighlight": "event"
  }
}

There is a more advanced way of using this option. If you want to only highlight specific resources and time ranges when dragging, you can pass in a type to the collectAvailableResources property of your configuration, this type will be used to invoke the funtion that it implements and the result of the function will be used to filter out the resources that don't match with the result. You can find more information in Bryntum's documentation on calendarHighlight feature. You can also review the type for more details on implementation.

Localization

Bryntum offers some basic localization features that offer translations and internationalization. In the UiSdl implementation, we are using the preferred locale from the user's local computer and then importing the available locale from Bryntum. This means that, if you have a Es_mx locale defined, we will first check which locale it can be mapped to in Bryntum, and then import the available file, in this case Es.js. In order to change that, you need to define a different locale in you app configuration. Please note that the provided translations will only work for labels, and this will work as any other component in the library, from the translations file. The localization process from Bryntum will be used to define:

  1. Adjusting date, time, numbers and currency formats
  2. Setting the day week starts on
  3. Translation of day, months and other units' names

To check the complete usage of Bryntum's Localization feature, please check the documentation here

You can review all the different features in the Bryntum documentation

Was this page helpful?