Schedule - How to make scheduler respond to layout changes around it.

Question

I have a page with two sections on it. It looks like this:

My users have the ability to hide the first section (the one showing the filters). When they do so, the section disappears and the other section containing the scheduler gets larger to fill the area of the page. However, the scheduler itself is not resizing to take up all the available room, even though I have assigned height=100% to it.

Here is what the issue looks like after collapsing the top area:

As you can see, the scheduler did not get taller to fill its area.

However, if I change the current view (which causes a reload of events from the API), it will re-render the component and cause it fill its height.

Here is a screenshot of what it looks like after I clicked TIMELINE MONTH and then changed back to TIMELINE WEEK again:

Now the Schedule is taking up as much vertical height as possible.

How can I force the Schedule component to always expand to take the available vertical space? (I already have height=100%)

Ravikumar Venkatesan · Answer

Hi Justin,Greetings from Syncfusion support.We have validated your query “How to make scheduler
respond to layout changes around it” at our end. You can use the refershLayout
method of the Schedule to force the Schedule layout to adjust the layout based
on the available space. We have prepared a sample for your reference.Sample: https://stackblitz.com/edit/ej2-react-schedule-auto-height-adjustment-sample?file=index.jsKindly try the shared solution and let us know if you need
any further assistance on this.API: https://ej2.syncfusion.com/react/documentation/api/schedule#refreshlayoutRegards,Ravikumar VenkatesanIf this post is helpful, kindly consider accepting it as the
solution so that other members can locate it more quickly.

Justin Schnurer · Answer

Thanks it works. Here is how I implemented it for my React app. I need my ScheduleComponent to refresh its layout whenever a particular Redux property changes (because that Redux prop controls the visibility of the top section of my web page). I had to do it this way to prevent the Scheduler from re-querying its data from the API.

In the component that renders the Scheduler, I used a useCallback to create a method that calls the refreshLayout method of the scheduler:

  const scheduler = useRef<ScheduleComponent>(null);
  const currentScheduler = scheduler?.current;
  
  // Create a callback that only changes reference when the scheduler changes.
  // This callback will be used to refresh the scheduler's layout later.
  const refreshLayoutMethod = useCallback(() => {
    if (currentScheduler) {
      currentScheduler.refreshLayout();
    }
  }, [currentScheduler]);

Then, in this component, I render a child component named SchedulerLayoutRefresher and I pass in the refreshLayoutMethod:

<SchedulerLayoutRefresher
        refreshMethod={refreshLayoutMethod}
      />

Finally, here is my SchedulerLayoutRefresher component:

import React, { useEffect } from "react";
import { useAppSelector } from "store/store";

interface ISchedulerLayoutRefresherProps {
  refreshMethod(): void,
}

/**
 * An invisible component that calls the refresh method whenever "areFiltersOpen" changes in the audit plan calendar slice.
 */
const SchedulerLayoutRefresher: React.FC<ISchedulerLayoutRefresherProps> = ({
  refreshMethod,
}) => {
  const areFiltersOpen = useAppSelector(store => store.auditPlanCalendar.areFiltersOpen);

  useEffect(() => {
    refreshMethod();
  }, [areFiltersOpen, refreshMethod]);

  return null;
};

export default SchedulerLayoutRefresher;

Ravikumar Venkatesan · Answer

Hi Justin,Thanks for the update.We are happy that our solution works for you.Regards,Ravikumar Venkatesan