Tsch datepicker

by Michael Dibbets

HTML

<div class="tsch-datepicker-wrapper">
                                                        <div class="i-scroller-wrapper tsch-datepicker tsch-datepicker-month">
                            	<div class="i-scroller">
                            		<ul>
                            			<LI data-date-month="1" data-date-year="2016">januari<BR/>2016</LI><LI data-date-month="2" data-date-year="2016">februari<BR/>2016</LI><LI data-date-month="3" data-date-year="2016">maart<BR/>2016</LI><LI data-date-month="4" data-date-year="2016">april<BR/>2016</LI><LI data-date-month="5" data-date-year="2016">mei<BR/>2016</LI><LI data-date-month="6" data-date-year="2016">juni<BR/>2016</LI><LI data-date-month="7" data-date-year="2016">juli<BR/>2016</LI><LI data-date-month="8" data-date-year="2016">augustus<BR/>2016</LI><LI data-date-month="9" data-date-year="2016">september<BR/>2016</LI><LI data-date-month="10" data-date-year="2016">oktober<BR/>2016</LI><LI data-date-month="11" data-date-year="2016">november<BR/>2016</LI><LI data-date-month="12" data-date-year="2016">december<BR/>2016</LI><LI data-date-month="1" data-date-year="2017">januari<BR/>2017</LI><LI data-date-month="2" data-date-year="2017">februari<BR/>2017</LI><LI data-date-month="3" data-date-year="2017">maart<BR/>2017</LI><LI data-date-month="4" data-date-year="2017">april<BR/>2017</LI><LI data-date-month="5" data-date-year="2017">mei<BR/>2017</LI><LI data-date-month="6" data-date-year="2017">juni<BR/>2017</LI><LI data-date-month="7" data-date-year="2017">juli<BR/>2017</LI>                            		</ul>
                            	</div>
                            </div>

                            <div class="i-scroller-wrapper tsch-datepicker tsch-datepicker-day">
                            	<div class="i-scroller">
                            		<ul>
                            			<LI data-date-day="12" data-date-month="1" data-date-year="2016" >12<BR/>di<BR/></li><LI data-date-day="13" data-date-month="1"...

CSS

.i-scroller-wrapper {
	position: relative;
	z-index: 1;

	display:inline-block;
	border: 1px solid black;

	left: 0;
	width: 100%;

	height:15rem;
	background: #abc;
	overflow: hidden;
}

.i-scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	/*width: 5000px;*/
	height: 150%;
	background-color: #a00;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;

}

.i-scroller ul {
	list-style: none;
	padding: 0;
	display: table;
	margin: 0;
	white-space: nowrap;
	width: 100%;
	height: 100%;
	text-align: center;
}

.i-scroller li {
	display: table-cell;
	min-width: 80px;
	min-height: 220px;
	height: 100%;
	border-right: 1px solid #ccc;
	background-color: #fafafa;
	font-size: 18px;
}
.i-scroller li.scrolled-to:not(.active) {
  -moz-animation-delay: 2s;
  -moz-animation: flasher 1s cubic-bezier(0,0,0.58,1);
  -moz-animation-iteration-count: 1;

  -webkit-animation-delay: 2s;
  -webkit-animation: flasher 1s  cubic-bezier(0,0,0.58,1);
  -webkit-animation-iteration-count: 1;

  -ms-animation-delay: 2s;
  -ms-animation: flasher 1s  cubic-bezier(0,0,0.58,1);
  -ms-animation-iteration-count: 1;

}

@-webkit-keyframes flasher {
    0% { background-color: none; }
    100% { background-color: #d4d4d4; }
}

@-moz-keyframes flasher {
    0% { background-color: none; }
    100% { background-color: #dadada; }

}

@-ms-keyframes flasher {
    0% { background-color: none; }
    100% { background-color: #dadada; }

}
.tsch-datepicker-wrapper {
                                width: calc(60px * 7.5);
                                background-color:pink;
                            }
 ...

JavaScript

/*! iScroll v5.1.3 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
/**
 * Custom events added by Tschallacka
 * 			   myScroll.on('XScrollingToEnd',function(e) {
 *                 console.log('Scrolling to end');
 *             });
 *             myScroll.on('XScrollingToBeginning',function(e) {
 *                 console.log('Scrolling to beginning');
 *             });
 *             myScroll.on('XScrollEndReached',function(e) {
 *                 console.log('End reached');
 *             });
 *             myScroll.on('XScrollBeginningReached',function(e) {
 *                 console.log('beginning reached');
 *             });
 */
(function (window, document, Math) {
var rAF = window.requestAnimationFrame	||
	window.webkitRequestAnimationFrame	||
	window.mozRequestAnimationFrame		||
	window.oRequestAnimationFrame		||
	window.msRequestAnimationFrame		||
	function (callback) { window.setTimeout(callback, 1000 / 60); };

var utils = (function () {
	var me = {};

	var _elementStyle = document.createElement('div').style;
	var _vendor = (function () {
		var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
			transform,
			i = 0,
			l = vendors.length;

		for ( ; i < l; i++ ) {
			transform = vendors[i] + 'ransform';
			if ( transform in _elementStyle ) return vendors[i].substr(0, vendors[i].length-1);
		}

		return false;
	})();

	function _prefixStyle (style) {
		if ( _vendor === false ) return false;
		if ( _vendor === '' ) return style;
		return _vendor + style.charAt(0).toUpperCase() + style.substr(1);
	}

	me.getTime = Date.now || function getTime () { return new Date().getTime(); };

	me.extend = function (target, obj) {
		for ( var i in obj ) {
			target[i] = obj[i];
		}
	};

	me.addEvent = function (el, type, fn, capture) {
		el.addEventListener(type, fn, !!capture);
	};

	me.removeEvent = function (el, type, fn, capture) {
		el.removeEventListener(type, fn, !!capture);
	};

	me.prefixPointerEvent = function (pointerEvent) {
		return...