Resize Scheduler embedded in Dashboard Layout panel when panel is resized

[Michael DeLange]

Hello-

I have a Scheduler component embedded in a Dashboard Layout panel and I would like the Scheduler to resize and "autofit" to the panel size height when it is resized.  I don't see a way to get the height of a panel when it is resized so I could implement something similar to https://www.syncfusion.com/forums/162182/height-of-blazor-scheduler-control-to-window-size .  Your assistance is requested please, thank you.

[Praveen Sellappan]

Hi Michael,

Greetings from Syncfusion Support.

Based on your requirement, we have prepared a sample using the Dashboard Layout component, where the Scheduler is rendered inside the panel’s content template.

To make the Scheduler automatically fit and occupy the entire height of the panel when it is resized, you can call the refresh method of the Scheduler component within the Dashboard Layout’s resizeStop event. This ensures that the Scheduler recalculates its dimensions and adjusts properly to the updated panel size.

Code Snippet:

<SfDashboardLayout @ref="dashboardObj"

                    Columns="5"

                    AllowResizing="true"

                    AllowDragging="false">

 

     <DashboardLayoutEvents OnResizeStart="OnResizeStart"

                            OnResizeStop="OnResizeStop" >

     </DashboardLayoutEvents>

 

     <DashboardLayoutPanels>

         <DashboardLayoutPanel Id="schedulerPanel"

                               Row="0"

                               Column="0"

                               SizeX="2"

                               SizeY="2">

             <HeaderTemplate>

                 <b>Scheduler</b>

             </HeaderTemplate>

 

             <ContentTemplate>

                  

                     <div class="content-container">

                     <SfSchedule TValue=AppointmentData>

                         <ScheduleViews>

                             <ScheduleView Option="View.Day"></ScheduleView>

                             <ScheduleView Option="View.Week"></ScheduleView>

                             <ScheduleView Option="View.WorkWeek"></ScheduleView>

                             <ScheduleView Option="View.Month"></ScheduleView>

                             <ScheduleView Option="View.Agenda"></ScheduleView>

                         </ScheduleViews>

                     </SfSchedule>

                     </div>

                   

             </ContentTemplate>

         </DashboardLayoutPanel>

     </DashboardLayoutPanels>

</SfDashboardLayout>

<style>

    .e-panel-container {

        overflow: auto;

    }

   

</style>

private async Task OnResizeStop()

{

    IsResizing = false;

 

    if (scheduleObj != null)

    {

        await scheduleObj.RefreshAsync();

    }

}

We have attached a sample for your reference. Kindly review the sample and let us know if it addresses your requirement or if you need any further assistance.

Regards,

Praveen

Attachment: dashboardsample_58f010a7.zip