How to get variable height on multiple GSTCs depending on filled rows

[Dako390]

Your question and description of the problem goes here
Is there a way to adapt the total height of the calendar depending on the rows used?

Currently I am using 4 gstcs below each other. Some have 3 rows, others only have 2 rows. Some have multiple entries in a single row, some only have a single entry per row. Depending on the amount of rows and overlapping items per row, each of those gstcs needs to have a different height. If I am adding a new entry to a specific gstc, its height needs to increase.

How am I able to automatically adapt the height of each gstc and not set a fixed height in a wrapper?

Code
Second question is if I am using the correct way to display all calendars in Angular.

ngOnInit(): void {
    const state1: DeepState<Config> = GSTC.api.stateFromConfig(this.generateConfig1());
    this.gstc = GSTC({
      element: (this.gsctFirstRow?.nativeElement as HTMLElement),
      state: state1,
    });
    const state2: DeepState<Config> = GSTC.api.stateFromConfig(this.generateConfig2());
    this.gstc = GSTC({
      element: (this.gsctSecondRow?.nativeElement as HTMLElement),
      state: state2,
    });
    const state3: DeepState<Config> = GSTC.api.stateFromConfig(this.generateConfig3());
    this.gstc = GSTC({
      element: (this.gsctThirdRow?.nativeElement as HTMLElement),
      state: state3,
    });
    const state4: DeepState<Config> = GSTC.api.stateFromConfig(this.generateConfig4());
    this.gstc = GSTC({
      element: (this.gsctFourthRow?.nativeElement as HTMLElement),
      state: state4,
    });
  }

Thank you very much in advance.

[neuronetio]

Maybe this will help - it will change the height automatically based on the currently expanded rows.

function watchRowsAndChangeHeight(gstc) {
  const state = gstc.state;
  gstc.component.vidoInstance.onDestroy(
    state.subscribe('$data.list.rowsWithParentsExpanded', (rowsWithParentsExpanded) => {
      const rowsData = gstc.api.getRowsData();
      let height = 0;
      for (const rowId of rowsWithParentsExpanded) {
        height += rowsData[rowId].actualHeight;
      }
      state.update('config.innerHeight', height + state.get('config.scroll.horizontal.width'));
    })
  );
}

// pseudo code
function mountGSTC() {
  gstc = GSTC({
    element,
    state,
  });
  watchRowsAndChangeHeight(gstc);
}

auto-height.mp4

[neuronetio]

PS Your code will not work properly because you are writing successive instances to the same variable this.gstc.

[Dako390]

Thank you, I just corrected the same variable problem. Interestingly, it still worked somehow.

This does not quite solve my problem. Is there an option to check whether the gstcResult object's displayed rows are empty or not? For example it has 3 rows but only row 1 and 2 have items inside of them - can I check that row 3 is empty?

Thank you for your time!