Stipe - Calendar

by PhilQ

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="calendar_popup">
	<div class="popup_background"></div>
	<div class="popup_wrapper">
		<a href="#" class="popup_close"><i class="fa fa-times" aria-hidden="true"></i></a>
		<div class="popup_content"></div>
	</div>
</div>

<div class="test">

	<div class="calendar"><div class="popup"></div></div>

</div>
hoi
<!-- 
TODO:
- onselect: show periods + book-link
 -->

SCSS

*,:before,:after{margin:0;padding:0;box-sizing:border-box;}
$background: #f3f5f6;
html,body{width:100%;background:$background;}
.test {
	position: relative;
	margin: 50px auto 0px;
	display: block;
	width: 100%;
	max-width: 875px;
	overflow-x: hidden;
	font-family: sans-serif;
}

$yellow: #febe10;
// $red: #e30613;
$red: #009fe3;
// $blue: #009fe3;
$blue: #e30613;

$green: #03B751;
$lightgreen: #7CE28A;

#calendar_popup {
	font-family: sans-serif;
	
	.popup_background {
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 20;
		background-color: rgba($background, 0.6);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
	}
	.popup_wrapper {
		position: fixed;
		display: inline-block;
		width: 100%;
		max-width: 550px;
		left: 50%;
		top: 50%;
		height: auto;
		min-height: 100px;
		max-height: 100%;
		transform: translate(-50%, -50%);
		background: #fff;
		box-shadow: 0px 5px 60px 0px rgba(#000, 0.2), 0px 1px 10px 0px rgba(#000, 0.15);
		z-index: 21;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
		
		.popup_close {
			position: absolute;
			top: 0px;
			right: 0px;
			width: 32px;
			height: 32px;
			padding-top: 3px;
			text-align: center;
			font-size: 22px;
			color: #ccc;
			z-index: 2;
			background: #fff;
			border-radius: 0px 0px 0px 50%;
			outline: none;
					
			&:hover, &:focus {
				color: $red;
			}
		}
		.popup_title {}
		.popup_content {
			position: relative;
			width: 100%;
			padding: 15px;
			//top: 10px;
			//bottom: 10px;
			//left: 10px;
			//right: 10px;
			overflow-y: auto;
			z-index: 1;
			//padding-top: 15px;
			
			&.not-start {
				padding: 25px 15px;
				text-align: center;
				line-height: 1.5;
				color: #888;
				&:after {
					display: inline;
					content: ' valt in een beschikbare periode.\aKlik op de startdag van deze periode om te boeken.';
					white-space: pre-wrap;
				}
			}
			
			ul {
				float: left;
				width: 100%;
				list-style:...

JavaScript

/**
 * jQuery onResizeEnd event
 */
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(e){function n(){var d=Date.now()-l;d<i&&d>=0?r=setTimeout(n,i-d):(r=null,t||(f=e.apply(u,o),u=null,o=null))}var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,t=arguments[2],r=void 0,o=void 0,u=void 0,l=void 0,f=void 0,d=function(){u=this;for(var d=arguments.length,a=Array(d),s=0;s<d;s++)a[s]=arguments[s];o=a,l=Date.now();var c=t&&!r;return r||(r=setTimeout(n,i)),c&&(f=e.apply(u,o),u=null,o=null),f};return d.clear=function(){r&&(clearTimeout(r),r=null)},d.flush=function(){r&&(f=e.apply(u,o),u=null,o=null,clearTimeout(r),r=null)},d}var n=window.jQuery;if(!n)throw new Error("resizeend require jQuery");n.event.special.resizeend={setup:function(){var i=n(this);i.on("resize.resizeend",e.call(null,function(e){e.type="resizeend",i.trigger("resizeend",e)},250))},teardown:function(){n(this).off("resize.resizeend")}}});

/**
 * 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 +...