Recalculate events height on window resize

[micobarac]

How do I force Calendar to recalculate events height on window resize?

I am using Angular, with flex container:

<div #calendar class="calendar"></div>

@HostListener('window:resize', ['$event'])
onResize() {
  this.calendar.render();
}

.calendar {
  @apply flex flex-col h-screen;

  .toastui-calendar-layout {
    @apply flex-1;
  }
}

Before window resize:

After windows resize:

Events overflow, instead of compacting, like this (hard reload):

I tried calendar.clear() along with calendar.createEvents(), but the result is the same.

The only way it worked is by calendar.destroy() along with calendar.createEvents(), but this causes horrible flickering.

[adhrinae]

Recalculation after resizing in the month view is not implemented yet. I checked that the render method doesn't trigger a recalculation.

As a quick fix, you can edit this code invoked on resize and build your own calendar.

  useEffect(() => {
    const handleResize = () => {
      if (ref.current) {
        const rowHeight = getSize(ref.current).height;
        const headerHeight = MONTH_CELL_PADDING_TOP + (themeHeaderHeight ?? MONTH_CELL_BAR_HEIGHT);
        const footerHeight = themeFooterHeight ?? 0;

        const baseContentAreaHeight = rowHeight - headerHeight - footerHeight;
        const visibleEventCountHeight = visibleEventCount * (eventHeight + MONTH_EVENT_MARGIN_TOP);

        setCellContentAreaHeight(Math.min(baseContentAreaHeight, visibleEventCountHeight));
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);
  }, [themeFooterHeight, themeHeaderHeight, eventHeight, visibleEventCount]);