Calendar: Positioning Support

[markleppke]

Describe the feature you would like to see added

Allow parameters for hard positioning of the calendar popover vs the normal auto-positioning.

Is your feature request related to a problem?

There are situations where the UI has content relevant to the date that needs to be chosen, above or below the popover button. In these situations users may find that the popover covers the information they need to use.

Describe the solution you'd like

Allow for a parameter to pass positions such as Top, Left, Right, Bottom. To tell how the popover should position the calendar.

Describe alternatives you have considered

No response

Additional context

No response

[markleppke]

This is reopening 7578

[imnickvaughn]

Hello, @markleppke do you know if there has been any progress on this?

[markleppke]

@imnickvaughn from what I can tell it's not getting attention.

[knrk]

Any progress on this? This issue is there for ages!

[hnone]

I've writted this snippet to prevent the calendar frame from moving when its height changes, if it is opened at the bottom then it will remain at the bottom, the same if it opens above the input field.

Add this on p-calendar

(onShow)="onCalendarShow()"
(onClose)="onCalendarClose()"

And this two on ts file

  onCalendarShow() {
    this.clickFunction = () => {
      // if calendarOffet is less than inputFieldOffset, the calendar is positioned on top of the field and we have to maintain the calendar there
      if (this.calendarOffset < this.inputFieldOffset) {
        // height of calendar content
        let calendarHeight = this.rangeDateCalendar.contentViewChild.nativeElement.clientHeight;
        let newTopValue = this.inputFieldOffset - calendarHeight + 'px';
        this.rangeDateCalendar.contentViewChild.nativeElement.style.setProperty('top', newTopValue);
      }
    };
    // offet top of input field
    this.inputFieldOffset = this.rangeDateCalendar.inputfieldViewChild.nativeElement.getBoundingClientRect().top;
    // offset of the calendar content
    this.calendarOffset = this.rangeDateCalendar.contentViewChild.nativeElement.offsetTop;
    this.rangeDateCalendar.contentViewChild.nativeElement.addEventListener('click', this.clickFuntion);
  }

 onCalendarClose() {
    this.inputFieldOffset = null;
    this.calendarOffset = null;
}

[ZeroSkill830]

Any update on this would be nice.

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[github-actions[bot]]

Thanks a lot for this issue! PrimeNG team's roadmap is busy, but community feedback is crucial in prioritization. The more upvotes help ensure this fix can be addressed quickly or the related PR can be merged soon.