Increase the height of the DayPilot Calendar control to fit its parent dynamically

Please see the following tutorial for a working example (Scheduler with heightSpec set to "Parent100Pct"):
https://code.daypilot.org/75104/angular-scheduler-full-screen-layout

1) The solution mentioned above uses Angular6, and I am using angular4
2) I still tried applying the solutions mentioned above like Max100Pct and assigning height to parent of schedular, but it did not work. :(

Setting the parent height to 100% may not be enough. There needs to be a reference point which is used when calculating the height (100% of something). You need to set the height for all ancestors as well. Another (and maybe better) option is to use position: absolute and a set of left, right, top, bottom CSS properties.

See also the notes here:
https://doc.daypilot.org/scheduler/100-pct-height/

 <div class="mainBody">
  <daypilot-calendar [config]="configWeek" [events]="filterEvents" #calendarweek></daypilot-calendar>
  </div>

when I hover on mainBody, I can see that it has occupied the whole of the portion that I wanted, but when I hover on caledar it still occupies only its predefined height. In this case when mainBody is covering the whole area correctly is it still necessary to have all its parent to be set to 100%height?

2) For your 2nd solution: putting it absolute just distorts the UI. It has to be relative in my case.

Do you use "HeightSpec" or "heightSpec"? The first letter should be lowercase in JavaScript/Angular.

Oh Yes! It was HeightSpec.

I changed to heightSpec and it worked correctly for me. Thanks a ton for rectifying the code. :)

Great, thanks for the update!