<style>
ul {list-style-type: none;}
.inlineMonth {
display:inline-block;
width:32%;
list-style-type: none;
}
#firstMonth {
float: left;
}
#secondMonth {
width: 32%;
margin-left:2%;
margin-right:1%;
}
#thirdMonth {
float: right;
}
#calContainer {
width: 100%;
background: #013564;
padding-left: 1px;
padding-right: 1px;
padding-bottom: 1px;
}
/* Month header */
.month {
padding: 10px 0px;
width: 100%;
background: #11518a;
text-align: center;
list-style-type: none;
}
.titleSpan {
padding: 25px 0px;
padding-bottom: 15px;
width: 100%;
background: #013564;
text-align: center;
list-style-type: none;
}
.selectionSpan {
padding: 0px;
padding-bottom: 0px;
width: 100%;
background: #013564;
text-align: center;
}
.selectionSpan ul{
}
.selectionSpan li {
display: inline-block;
width: 49%;
text-align: center;
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
height:100%;
}
#checkIn {
margin-left:0px;
margin-right: .5%;
padding: 10px 5px;
cursor: pointer;
}
#checkOut {
display: inline-block;
padding: 10px 5px;
cursor: pointer;
margin-left: .5%;
}
.active {
padding: 10px 5px;
background: #11518a;
color: white !important
}
/* Month list */
.month ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Month list */
.titleSpan ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.titleSpan ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
/* Previous button inside month header */
#prev {
float: left;
padding-top: 10px;
margin-left: 10px;
cursor: pointer;
}
/* Next button */
#next {
float: right;
padding-top: 10px;
margin-right: 10px;
cursor: pointer;
}
/* Weekdays (Mon-Sun) */
.weekdays {
margin: 0;
padding: 10px 0;
background-color:#ddd;
width: 100%;
}
.weekdays li {
display: inline-block;
width: 13.5%;
color: #666;
text-align: center;
margin-left:1%;
font-size: 12px;
}
/* Days (1-31) */
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.5%;
text-align: center;
margin-bottom: 3px;
font-size:10px;
color: #777;
}
/* Highlight the "current" day */
.days li .active {
padding: 6px 6px;
background: #11518a;
color: white !important
}
.entry-content ul li, .entry-content ol li {
margin-left: 0px;
}
</style>
<div id="calContainer">
<div class="titleSpan">
<ul>
<li id="prev">❮</li>
<li id="next">❯</li>
<li> Availability<br>
Calendar
</li>
</ul>
</div>
<div class="selectionSpan">
<ul>
<li id="checkIn" class="active">
CHECK-IN
</li>
<li id="checkOut">
CHECK-OUT
</li>
</ul>
</div>
<div class="inlineMonth" id="firstMonth">
<div class="month">
<ul>
<li id="mOneHeader">
MONTH YEAR
</li>
</ul>
</div>
<ul class="weekdays">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ul>
<ul class="days">
</ul>
</div>
<div class="inlineMonth" id="secondMonth">
<div class="month">
<ul>
<li id="mTwoHeader">
MONTH YEAR
</li>
</ul>
</div>
<ul class="weekdays">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ul>
<ul class="days">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<a href=""><li>1</li></a>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li><span class="active">11</span></li>
<li><span class="active">12</span></li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
<div class="inlineMonth" id="thirdMonth">
<div class="month">
<ul>
<li id="mThreeHeader">
MONTH YEAR
</li>
</ul>
</div>
<ul class="weekdays">
<li>S</li>
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
</ul>
<ul class="days">
<li></li>
<a href=""><li>1</li></a>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</div>
<script>
$j=jQuery.noConflict();
function resize() {
//Script to auto size calendar heights to maintain even structure
var firstCal = document.querySelector('#firstMonth .days');
console.log(firstCal.clientHeight);
var secondCal = document.querySelector('#secondMonth .days');
console.log(secondCal.clientHeight);
var thirdCal = document.querySelector('#thirdMonth .days');
console.log(thirdCal.clientHeight);
var firstHeight = firstCal.clientHeight;
var secondHeight = secondCal.clientHeight;
var thirdHeight = thirdCal.clientHeight;
if(firstHeight >= secondHeight && firstHeight >= thirdHeight){
//set css props
secondCal.style.height = firstHeight + "px";
thirdCal.style.height = firstHeight + "px";
} else if(secondHeight >= firstHeight && secondHeight >= thirdHeight){
//set css props
firstCal.style.height = secondHeight + "px";
thirdCal.style.height = secondHeight + "px";
} else if(thirdHeight >= firstHeight && thirdHeight >= secondHeight){
//set css props
secondCal.style.height = thirdHeight + "px";
firstCal.style.height = thirdHeight + "px";
}
}
window.onresize = function() {
if(window.innerWidth <= 750){
$j("#secondMonth").css("display","none");
$j("#thirdMonth").css("display","none");
$j("#firstMonth").css("float","none");
$j("#firstMonth").css("width","96%");
$j("#firstMonth").css("margin-left","2%");
$j(".days li").css("width","14%");
$j(".weekdays li").css("width","14%");
} else if(window.innerWidth > 750){
$j("#secondMonth").css("display","inline-block");
$j("#thirdMonth").css("display","inline-block");
$j("#firstMonth").css("float","left");
$j("#firstMonth").css("width","32%");
$j("#firstMonth").css("margin-left","0");
$j(".days li").css("width","13.5%");
$j(".weekdays li").css("width","13.5%");
}
}
var selected = 0; //0 = checkin 1 = checkout
document.getElementById("checkIn").onclick = function(){
$j("#checkOut").removeClass("active");
$j("#checkIn").addClass("active");
selected = 0;
}
document.getElementById("checkOut").onclick = function(){
$j("#checkIn").removeClass("active");
$j("#checkOut").addClass("active");
selected = 1;
}
var d = new Date();
var month = d.getMonth();
console.log(month);
var monthStr = getMonthString(month);
var year = d.getFullYear();
//init data pop
populateData(month);
var monthTracker = month;
var maxMonth = 7 - 2;
var distanceTravel = 0;
//click functionality month swap
$j("#next").onclick = function(){
if(distanceTravel != maxMonth){
monthTracker++;
distanceTravel++;
populateData(monthTracker);
}
console.log("next test");
};
function populateData(seedMonth){
setMonthHeaders(seedMonth);
fillMonthData(seedMonth,0);
fillMonthData(seedMonth+1,1);
fillMonthData(seedMonth+2,2);
}
function setMonthHeaders(seedMonthNumber){
var date = new Date();
var monthStr = getMonthString(seedMonthNumber);
var year = d.getFullYear();
$j("#mOneHeader").html("" + monthStr + " <br>" + year);
if((++seedMonthNumber) == 12){ //start of new year
seedMonthNumber = 0;
year++;
}
monthStr = getMonthString(seedMonthNumber);
$j("#mTwoHeader").html("" + monthStr + " <br>" + year);
if((++seedMonthNumber) == 12){ //start of new year
seedMonthNumber = 0;
year++;
}
monthStr = getMonthString(seedMonthNumber);
$j("#mThreeHeader").html("" + monthStr + " <br>" + year);
}
function fillMonthData(monthNum, subNum){
var selector;
switch(subNum){
case 0: selector = $j("#firstMonth .days");
break;
case 1: selector = $j("#secondMonth .days");
break;
case 2: selector = $j("#thirdMonth .days");
break;
default: selector = $j("#null");
break;
}
var labeler = 1;
var today = new Date();
var year = today.getFullYear();
var firstDay = new Date(year,monthNum,1).getDay();
console.log(firstDay);
selector.html("");
for(i = 0; i < firstDay; i++){
selector.append("<li></li>");
console.log("HEY");
console.log(i);
console.log(firstDay);
}
if(today.getMonth() == monthNum){ //do additional segmenting for past dates
for(i = 0; i < today.getDate()-1; i++){
selector.append("<li></li>");
}
labeler = today.getDate();
}
var maxDate = getMaxNumberOfDays(year,monthNum);
for(x = labeler; x <= maxDate; x++){
selector.append("<li>"+x+"</li>");
var dop = new Date(year,monthNum,x).getDay();
}
resize();
}
function getMaxNumberOfDays(year, month){
return new Date(year,++month,0).getDate();
}
function getMonthString(monthNum){
switch(monthNum){
case 0: return "Jan";
case 1: return "Feb";
case 2: return "Mar";
case 3: return "Apr";
case 4: return "May";
case 5: return "Jun";
case 6: return "Jul";
case 7: return "Aug";
case 8: return "Sep";
case 9: return "Oct";
case 10: return "Nov";
case 11: return "Dec";
default: return "Null";
}
}
</script>
Contact Us
Select Vacation Properties
703 Tarpon Bay Road, Suite A
Sanibel, Fl 33957 USA
239-395-0028
703 Tarpon Bay Road, Suite A
Sanibel, Fl 33957 USA
239-395-0028
Rental Links
Quick Links
Email Sign Up