I can't get Scheduler to fit to the container! The Scheduler is stretching!

[Vaiker]

Hi there,

I have a grid with one row and two columns. sidePanel column and the mainPanel coulmn where the scheduler should be shown.

So the red container is where the scheduler should fit in. I tried hight: 100% or inherit ... It didn't work !

So I tried every thing to make the scheduler fits the parent automatically without doing any JavaScript tricks to do so.

Can you please help me.

Regards,

Karam Ramadn

[Vaiker]

this is the style.scss

._grid-scheduler-container{
  display: grid;
  grid-template-areas: "scheduler-sidepanel scheduler-mainpanel";
  grid-auto-columns: 15em auto;
  grid-column-gap: 1em;
  height: 100%;
  
  ._grid-scheduler-container__sidepanel{
    grid-area: scheduler-sidepanel;
    background: rgba(199, 194, 173, .3);
    ._grid-scheduler-container__sidepanel__content{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  
  // this is the parent div
  ._grid-scheduler-container__mainpanel{
    grid-area: scheduler-mainpanel;
    background: red;
    
    // this is the scheduler parent div
    ._grid-scheduler-container__mainpanel__content {
      background: darkslategrey;
      display: flex;
      flex-direction: column;
      align-items: center;
      //height: 100%;

      // this is the scheduler css class
      .main-scheduler-cssClass {
        //height: 50% !important;
      }
    }
  }
}

[Balasubramanian Sattanathan]

Hi Karam,

We suggest you to use CSS like the below code snippet. In the below snippet, we have set the height as 600px for the parent div of the Scheduler and set the height as 100% for Scheduler. So the scheduler height will be fit in based on the parent div’s height.

@using Syncfusion.EJ2.Schedule

@using Syncfusion.EJ2.Calendars

 

<div style="display: flex;">

    <div style="width: 25%;">

        <div>Calendar Panel</div>

        <div>

            <ejs-calendar id="calendar"></ejs-calendar>

        </div>

    </div>

    <div style="width: 75%; height: 600px;">

        <ejs-schedule id="schedule" width="100%" height="100%"></ejs-schedule>

    </div>

</div>

Kindly refer and follow the above solution and let us know if this is helpful.

Regards,

Balasubramanian S

[Vaiker]

Hello Balasubramanian,

the problem is that I have a grid that is taking the full height of the window.

So the parent has 100% height. So this is does not work.

I did in JavaScript. I've calculated the height I need and change it there.

If you have another approach in pure CSS, It will be great. Please let me know if you have a pure CSS solution.

But for now I got it working.

Thanks again.

Regards,

Vaiker

[Balasubramanian Sattanathan]

Hi Vaiker,

We are happy that you have found the solution using JavaScript hacks. But we need a working sample that illustrates to replicate the issue and provide a prompt solution. So can you please share the code or issue reproduced sample(if possible)?.

Meanwhile, we would suggest you to use the JavaScript solution at your end.

Regards,
Balasubramanian S