UsHiemVerhuur - calendar

by PhilQ

HTML

<div id="calendar">
    <div class="cal-buttons"></div>
    <div class="cal-days"></div>
</div>

CSS

*, *:before, *:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: sans-serif;
}

#calendar {
    width: 245px;
}
.cal-day-lbl {
    float: left;
    width: 35px;
    height: 30px;
    text-align: center;
    font-size: 11px;
    color: #aaaaaa;
    padding: 15px 5px 0px;
    border-radius: 0px;
    margin-left: -1px;
    background-color: #F2F2F2;
    border: 0px solid #ccc;
}
.cal-day-lbl:nth-child(1) {
    margin-left: 0px;
}
.cal-day {
    cursor: pointer;
    position: relative;
    z-index: 1;
    float: left;
    width: 35px;
    height: 30px;
    text-align: center;
    font-size: 14px;
    color: #666666;
    text-shadow: 0px 1px 0px rgba(255,255,255, 0.8);
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3);
    padding: 5px;
    border-radius: 0px;
    margin-top: -1px;
    margin-left: -1px;
    background-color: #F2F2F2;
    border: 1px solid #ccc;
}
.cal-day:nth-child(-n+14) {
    margin-top: 0px;
}
.cal-day-0 {
    margin-left: 0px;
    border-left: 1px solid #ccc;
}
.cal-day:hover {
    z-index: 2;
    width: 37px;
    height: 32px;
    padding: 6px;
    margin-left: -2px;
    margin-top: -2px;
    margin-right: -1px;
    margin-bottom: -1px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    font-size: 16px;
    color: #c0e4ce;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
    background-color: #419563;
    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3),
        0px 1px 5px 0px rgba(0, 0, 0, 0.5);
}
.cal-day:nth-child(-n+14):hover {
    padding-top: 6px;
    margin-top: -1px;
}
.cal-day-0:hover {
    padding-left: 6px;
    margin-left: -1px !important;
}
.cal-day-block {
    cursor: default !important;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.0) !important;
    box-shadow: none !important;
    color: #73c28b !important;
    background-color: #327454 !important;
    border: 1px solid #ccc !important;
}
.cal-day-prev,...

JavaScript

/**
 * Get the ISO week date week number
 */
Date.prototype.getWeek = function () {
	// Create a copy of this date object
	var target  = new Date(this.valueOf());

	// ISO week date weeks start on monday
	// so correct the day number
	var dayNr   = (this.getDay() + 6) % 7;

	// ISO 8601 states that week 1 is the week
	// with the first thursday of that year.
	// Set the target date to the thursday in the target week
	target.setDate(target.getDate() - dayNr + 3);

	// Store the millisecond value of the target date
	var firstThursday = target.valueOf();

	// Set the target to the first thursday of the year
	// First set the target to january first
	target.setMonth(0, 1);
	// Not a thursday? Correct the date to the next thursday
	if (target.getDay() != 4) {
		target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
	}

	// The weeknumber is the number of weeks between the 
	// first thursday of the year and the thursday in the target week
	return 1 + Math.ceil((firstThursday - target) / 604800000); // 604800000 = 7 * 24 * 3600 * 1000
}

function daysInMonth(month,year) {
   return new Date(year, month, 0).getDate();
}

var calDays = [
    "Ma",
    "Di",
    "Wo",
    "Do",
    "Vr",
    "Za",
    "Zo"
];
var calMonths = [
    "Januari",
    "Februari",
    "Maart",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Augustus",
    "September",
    "Oktober",
    "November",
    "December"
];

var calBlockdays = [
    20150211,
    20150220,
    20150127
];

var nu = new Date();

var calendar = {
    month: nu.getMonth(),
    year: nu.getFullYear(),
    week: nu.getWeek()
};


function calBuildMonth(m,y) {
    var html = '';
    var maxD = daysInMonth((m+1),y);
    var maxDPrev = daysInMonth(m,y);
    var dt = new Date();
    dt.setUTCFullYear(y, m, 1);
    var offD = (dt.getDay() + 6) % 7;
    offD = (offD === 0)? 7: offD;
    
    var prevdt = new Date();
    prevdt.setUTCFullYear(y, (m-1), 1);
    var divIDprev = ((prevdt.getMonth()+1)<10)?...