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.

Answer 3

The problem is the appendTo="body", it's change the context of monthpicker. To fix, I used a div in appendTo.

Answer 4

I had a problem where I was seeing the calendar popup inherit the width of the column it was in (I was using it for a column filter on a p-table), given my column was fairly narrow the calendar was narrow also, so if I widened the calendar using

[style]="{'width':'300px'}" 

then my column widened also which wasn't what I wanted.

To keep my column width and have the popup appear in full/normal size I added this to the p-table element: #myTable and in the p-calendar element I added this: [appendTo]="myTable"

Answer 5

I know this is old, but in case anyone comes across this issue in future and finds none of the above solutions affective. Please see below.

OP mentioned parent div:

<div>
  <p-calendar [(ngModel)]="date1" class="treetableDate"></p-calendar>
</div>

:host {
  ...
  > div {
    display: flex;
    > p-calendar {
      flex-grow: 1;
    }
  }
}