CODEWITHSUNDEEP
angularprimeng
S.Chandra Sekhar
S.Chandra Sekhar

Reputation: 503

How to change the primeng calendar height?

how to change height of primeng calendar not input field.

enter image description here

Update 1:

After applying below styles, calendar appear as below

.ui-calendar .ui-datepicker {
height : 200px;
}

enter image description here

Upvotes: 3

Views: 16958

Answers (12)

Ashik CH
Ashik CH

Reputation: 1

::ng-deep .p-datepicker.p-component.ng-star-inserted {
  scale: 0.8;
}

Upvotes: 0

Eduardo Romero
Eduardo Romero

Reputation: 119

When using vuejs, I add my custom class to the "pt" attribute in the calendar like this:

<Calendar :pt="{
  root: {
    class: 'customClass'
  }" 
>
...    
</Calendar>

<style>
.customClass {
  height: 50vh;
}
</style>

Upvotes: 0

ILIYA ILCHEV
ILIYA ILCHEV

Reputation: 61

This css is work for me:

::ng-deep .p-datepicker table td {
  padding: 0.2rem !important;
}

::ng-deep .p-datepicker table td > span {
  width: 1.7rem;
  height: 1.7rem;
}

::ng-deep .p-datepicker table {
  font-size: 10pt;
  margin: -0.143rem 0;
}

::ng-deep .p-datepicker .p-datepicker-header {
  padding: 0.2rem;
}

enter image description here

Upvotes: 1

ajit deshmukh
ajit deshmukh

Reputation: 131

I have tried all this solutions it's not working for me so basically we need to reduce the padding between the td element of date picker try to override/use below class.

 //first try below
**body .p-datepicker table td {
    padding: 0.13rem; // use as per your requirement.
  }** 

 //if not working above then use with ng:deep

 **::ng-deep .p-datepicker table td {
            padding: 0.13rem; // use as per your requirement.
          }**

Note: These classes working after primeng version >=10 because previous they are using ui-datepicker class.enter image description here in primeng v10 now they using p-datepicker prefix p- instead of ui

see below images

Upvotes: 2

M1rwen
M1rwen

Reputation: 1932

One workaround is to set display to initial on .p-datepicker td>span, like this:

.p-datepicker td>span {
    display: initial;
  }

Then you change the font-size as you which so it changes the width.

Upvotes: 0

Haseena P A
Haseena P A

Reputation: 17406

The following solution works for me

:host >>> .p-datepicker table td > span {
    height: unset;
    width: unset;
}

Upvotes: 0

C&#233;dric S
C&#233;dric S

Reputation: 519

Put it in you global stylesheet with !important behind like this:

.ui-calendar .ui-datepicker {
height : 200px !important;
}

But maybe you are annoyed by the fact your datepicker is hidden behind your button. If so, simply add appendTo="body" in your p-calendar element, like this:

<p-calendar appendTo="body" [(ngModel)]="myDate"></p-calendar>

Upvotes: 0

Phil Huhn
Phil Huhn

Reputation: 4121

I am using PrimeNG v10.

On a per a single control for the date-picker you can use panelStyle:

<p-calendar [(ngModel)]='addTime.StartTime' [panelStyle]="{'height':'280px'}"></p-calendar>

Or use panelStyleClass, documentation say:

panelStyleClass string null Style class of the datetimepicker container element.

panelStyle object null Inline style of the datetimepicker container element.

Upvotes: 0

Jayesh Patil
Jayesh Patil

Reputation: 1

Override primeng calender-widget height CSS:

 ::ng-deep .ui-datepicker.ui-widget{
    line-height: 0.5rem;
 }

Upvotes: 0

Saad Qamar
Saad Qamar

Reputation: 1099

Didn't find any solution so what I did to reduce the height of calender

HTML:

<div class="container">
  <span class="ui-float-label">
    <p-calendar showTime="true" hourFormat="12" [(ngModel)]="value" inputId="text" id="text" [showIcon]="true" [inline]="true"></p-calendar>
    <label id="inline-lable" for="text" class="ml-2">{{label}}</label>
  </span>
</div>

CSS:

.container ::ng-deep p-calendar .ui-datepicker table td {
  padding: 1px !important;
}
.container ::ng-deep p-calendar .ui-datepicker .ui-timepicker {
  padding: 2px 0 0 0 !important;
}
.container ::ng-deep p-calendar .ui-datepicker {
  padding: 0.857em 0.857em 0 0.857em !important;
}

Before:

enter image description here

After:

enter image description here

Upvotes: 0

Prashant M Bhavsar
Prashant M Bhavsar

Reputation: 1164

You can overwrite below class of prime ng calendar

.ui-calendar .ui-datepicker {
height : 200px;
}

Add below css also:

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0px;
}

Upvotes: 1

Gourav Garg
Gourav Garg

Reputation: 2911

use [style] or [styleClass]

<p-calendar [styleClass]="'custom-height'"></p-calendar>

In your css use below:

.custom-height:{height:300px}

Upvotes: 0

Related Questions