search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

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

Related article: Angular 4 Scheduler Quick Start Project
Asked by Shilpa
1 month ago.

Have tried below approaches:

1) I have tried HeightSpec: 'Parent100Pct' and have set the parent of this control to height 100%.
2) Tried keeping HeightSpec: 'Fixed' and have set the height property of control in ngAfterViewInit as 900
this.calendarweek.config.height = '900';

None of the above seems to work.

Could anyone please help.

Answer posted by Dan Letecky [DayPilot]
1 month ago.

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

Comment posted by Shilpa
1 month ago.

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. :(

Comment posted by Dan Letecky [DayPilot]
1 month ago.

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/

Comment posted by Shilpa
1 month ago.
 <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.

Comment posted by Dan Letecky [DayPilot]
1 month ago.

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

Comment posted by Shilpa
1 month ago.

Oh Yes! It was HeightSpec.

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

Comment posted by Dan Letecky [DayPilot]
1 month ago.

Great, thanks for the update!

New Reply
This reply is
Your name (optional):