Lightbox - multiple time section labelling

Gantt
#1

Hi,

In the Gantt chart, I have multiple elements showing in each timeline. I’d like to configure the lightbox sections for these. For the most part, it’s showing the two extra elements (of time), however I’m having difficulties setting the labels that would appear above each ‘time’ section.

Here is a snippet of the lightbox.section configuration: (the desire outcome is to have ‘Plan B’ appear above the second ‘time’ section.

gantt.config.lightbox.sections = [
  { name: 'description', height: 70, map_to: 'text', type: 'textarea', focus: true },
  { name: 'time', section_description: 'ddd', map_to: 'auto', type: 'duration' },
  {
    name: 'time',
    section_description: 'Plan B Description',
    section_time: 'Plan B',
    map_to: {
      start_date: 'planned_start',
      end_date: 'planned_end'
    },
    button: false,
    type: 'duration_optional'
  },
  { name: 'time', map_to: { start_date: 'forecast_start', end_date: 'forecast_end' }, button: false, type: 'duration_optional' }
];

Thanks.

#2

Hello Joubin,
You can set the section name in the gantt.locale.labels.section_sectionNameHere property for example:

gantt.locale.labels.section_time = "Time section";

https://docs.dhtmlx.com/gantt/desktop__select.html#initialization
https://docs.dhtmlx.com/gantt/desktop__localization.html#creatingacustomlocale
However, you cannot have the sections with the same name parameter but different label parameter. You need to change the time value to time1, time2 and time3 or use other names.
If you want to change the section position, you can change the section order in the gantt.config.lightbox.sections configuration.
Here is the snippet that shows how it might be implemented:
http://snippet.dhtmlx.com/3ce45779e

#3

Thank you. Even though this works just fine, the transpiler/compiler gives the following error:

4 unchanged chunks
chunk {main} main.js, main.js.map (main) 608 kB [initial] [rendered]
Time: 451ms
i ｢wdm｣: Compiled successfully.

ERROR in src/app/app.component.ts(74,25): error TS2551: Property 'section_time1' does not exist on type 'GanttLocaleLabels'. Did you mean 'section_time'?
src/app/app.component.ts(75,25): error TS2551: Property 'section_time2' does not exist on type 'GanttLocaleLabels'. Did you mean 'section_time'?
#4

Hello Joubin,
Those are the custom sections, so you need to manually add the types for them.
As the typescript compiler suggests, you can copy the types from the section_time.

#5

I ended up extending the GanttLocaleLabels interface, and it works:

export interface LightboxLabels extends GanttLocaleLabels {
section_time1?: string;
section_time2?: string;
}