<!-- AVAILACAL AVAILABILITY CALENDARS. Dynamic Pop-up Calendar Script v.2.0 Availacal.com-->

<!-- Paste the script below into the BODY of the web page at the place where you want the 
pop-up calendar link to appear. The word "Example" appears twice in this script. You will 
want to replace that with the ID name of the actual calendar that you want to display. 
Remember, if your calendar name has any spaces use the + character instead of a space-.->

<!-- Begin Availability Calendar Pop-up Link -->
<div style="position:relative; height:100vh">
<a class="awbg" onClick='document.getElementById("calpop").style.display="block"'><u>Click for Availability Calendar</u></a>
<div style="position:absolute; top:20px; left:15%;"><div align="center" id="calpop" style="width:250px; height:370px; display:none; position:absolute; top:0; left:0;"><img id="drgbar" src="https://availacal.com/dragbarg12.gif" style="margin-bottom:0px; cursor:move; width:228px; height:12px;"><a href='javascript:CloseCal();'><img height="12" width="12" src="https://availacal.com/closebtg12.gif" style="margin-bottom:0px"></a><iframe style="background-color:transparent;" src="https://availacal.com/dc.asp?id=Example" name="custom availability calendar" height="450px" width="244px" marginwidth="0" marginheight="0" align="center" frameborder="no" allowtransparency="true" scrolling="no"><a href="https://availacal.com/ac.asp?id=Example" target="_blank">SEE CALENDAR</a></iframe></div></div></div>

<script>
dragElement(document.getElementById("calpop"));

function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
document.getElementById("drgbar").onmousedown = dragMouseDown;
elmnt.onmousedown = dragMouseDown;
 function dragMouseDown(e) {
   e = e || window.event;
   e.preventDefault();
   pos3 = e.clientX;
   pos4 = e.clientY;
   document.onmousemove = elementDrag;
   document.onmouseup = closeDragElement;
 }

 function elementDrag(e) {
    elmnt.appendTo= "body";
elmnt.style.zIndex=9000000;

   e = e || window.event;
   e.preventDefault();
   pos1 = pos3 - e.clientX;
   pos2 = pos4 - e.clientY;
   pos3 = e.clientX;
   pos4 = e.clientY;
   elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
   elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
 }

 function closeDragElement() {
   document.onmouseup = null;
   document.onmousemove = null;
 }
}

function CloseCal(){document.getElementById("calpop").style.display="none";}
</script>
<!-- End Availability Calendar Pop-up Link -->