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

score 20 · Answer 1 · answered Jan 22 '19 at 08:39

20

This works for me:

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

answered Jan 22 '19 at 08:39

KimCindy

1,159
1
11
15

score 1 · Answer 2 · answered Sep 30 '18 at 18:57

1

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.

answered Sep 30 '18 at 18:57

DirtyMind

2,353
2
22
43

1

Hi, tried - but doesnt work. The p-calendar field wont be the size of the parent div/ table cell. I also played around with the percentages. I guess the issue is the calendar icon has a fixed size but the input field has a variable size. It would work if I can set the width of the input field to 100%-width of icon. But I havent found a way to do this. I also have some problem understanding how style and inputStyle are applied to this component. If set style="width: 100%" I would expect this sizes the whole calendar component incl. icon. But this is obviously not the case. – Michael H. Oct 01 '18 at 09:44
Can you share your code snippet to look into it properly. Even I found it weird that we have to use both [style] and [inputStyle] in terms of applying CSS. Individually they are not working. – DirtyMind Oct 01 '18 at 10:37
3

Hi, I already found a solution: style="''width':'100%,[display': 'flex', 'flex-direction': 'row-reverse}'' is doing the job! – Michael H. Oct 03 '18 at 13:58

score 1 · Answer 3 · answered Feb 10 '21 at 12:34

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"

score 0 · Answer 4 · answered Oct 11 '20 at 01:20

0

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

answered Oct 11 '20 at 01:20

Daniel Huebes

1

score 0 · Answer 5 · edited Jul 17 '21 at 08:14

0

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;
    }
  }
}

edited Jul 17 '21 at 08:14

Josef

2,869
2
22
23

answered Jul 15 '21 at 06:00

Vipermia

1

score 0 · Answer 6 · answered Jan 27 '22 at 09:43

0

It is work for me

::ng-deep .ui-calendar {
  width: 100%;
}

::ng-deep .ui-calendar .ui-inputtext {
  width: calc(100% - 2.357em);
}

answered Jan 27 '22 at 09:43

Guscha Vladislav

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 27 '22 at 12:04

Primeng p-calendar same size as parent

6 Answers6