I'm working on an Angular application where I have a specific requirement for a component that uses the Angular Material date range picker. I need the calendar to be always open and displayed directly below the input field that shows the selected date range.

I've managed to keep the calendar open by overriding the close method in the ngAfterViewInit lifecycle hook:

ngAfterViewInit() {
  this.surgeryDatepicker.open();
  const originalClose = this.surgeryDatepicker.close.bind(this.surgeryDatepicker);
  this.surgeryDatepicker.close = () => {};
}

However, I'm struggling to position the calendar below the input field. The date range picker calendar is displayed as a dialog relative to the body, and my attempts to manually set the top and left position of my container div to align the calendar below the input field have not been successful.

Here's what I've tried so far:

• I attempted to get the top and left position of the container div and set those values to the calendar's position.
• I've looked into the Angular Material documentation for any configuration options that might help with positioning but found none that fit my needs.

I'm looking for suggestions or approaches to ensure that the date range picker calendar is always visible and positioned right below the input field, regardless of other UI elements or page scrolling.

Any help or guidance would be greatly appreciated!

Thank you for the reference to the existing question. However, my requirement is slightly different as I need to implement a solution for the mat-date-range-picker rather than a single date. The solutions provided in the linked question seem to be tailored for a single date selection.