Primeng p-calendar same size as parent

Question

I am using p-calendar from the primeng within a tabletree. How can I make the p-calendar field same size as the cell it sits in? Or mor general - how can I make it same size as a parent div?

You can make it work with absolute width using style and inputStyle - but my table is resizable - so it doesnt work in this case. I tried as recommended at various places:

<p-calendar appendTo="body"  [style]="{'width':'95%'}" [inputStyle]="{'width':'95%'}"
</p-calendar>

But this doesnt work since the button of the date selector has a fixed size.

This appears to me to be a very basic requirement - being able to make a component same size as its parent. Really surprised this doesnt work.

Thanks, Michael

Answer 1

This works for me:

<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [timeOnly]="true"></p-calendar>

Answer 2

I tried below to achieve this:

Add your own class to override the CSS of date container. As I added class="treetableDate"

    <p-calendar [(ngModel)]="date1" 
[style]="{'width':'70%'}" [inputStyle]="{'width':'70%'}" class="treetableDate"></p-calendar>

Now override the CSS of calendar component. Like below:

.treetableDate .ui-widget-content{
    width: 80%; // or in pixel depends how much width you want.
}

Note: Do not override .ui-widget-content directly. Otherwise it will affect the width of each and every component in your application. Using your own class it will affect only that particular element.