Steps to reproduce the issue

Create a calendar field at the bottom of a long page. As an example, you can add one to the bottom of the J! article options tab, in administrator/components/com_content/models/forms/article.xml, add this around line 604, before the close fieldset:

			<field
					name="foobar"
					type="calendar"
					label="foobar"
					description="foobar"
					translateformat="true"
					showtime="true"
					size="22"
					filter="user_utc"
			/>

Edit an article, go to Options, scroll down so the new foobar field is in view at the bottom of the window, and pop up the new calendar.

Expected result

Expected result is it should open above the field instead of below.

Actual result

Actual result is that the calendar opens mostly off screen. See first image (caloff).

System information (as much as possible)

Latest 3.9.1 release.

Additional comments

I believe this is because the code in the show() method in media/system/js/fields/calendar.js ...

   	/** Move the calendar to top position if it doesn't fit below. */
   	var containerTmp = this.element.querySelector('.js-calendar');

   	if ((window.innerHeight + window.scrollY) < containerTmp.getBoundingClientRect().bottom + 20) {
   		containerTmp.style.marginTop = - (containerTmp.getBoundingClientRect().height + this.inputField.getBoundingClientRect().height) + "px";
   	}

... adds window.scrollY to window.innerHeight, when it checks against the bottom of the calendar container. Which is incorrect, as getBoundingClientRect() always returns coordinates relative to the viewport, not the document. So the code as-is will work fine, until you scroll down.

If you simply remove the "+ window.scrollY", it seems to work fine in all cases. See second image (calon) for example.

I'm happy to submit a PR, if someone can sanity check me on this.

I've marked it as Medium, as although it's not high priority, in certain front end uses, it is making the calendar field unusable.