Rewrite to es6 class

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": [ [ "env", { modules: "umd" } ], "stage-1", "react" ],
+    "retainLines": true
+}

calendar-material.css

@@ -4,7 +4,7 @@
 	width: 301px;
 	background: #fff;
 	position: absolute;
-	z-index: 100;
+	z-index: 10000;
 	padding: 0;
 	font-family: Roboto, sans-serif;
 	box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22)

calendar.js

@@ -4,7 +4,7 @@
  *
  * Original: http://www.openjs.com/scripts/ui/calendar/
  * Modified: http://yourcmc.ru/git/vitalif-js/calendar
- * Version: 2018-03-14
+ * Version: 2018-03-17
  * License: MIT-like, http://www.openjs.com/license.php
  *
  * Example:
@@ -13,12 +13,10 @@
  *     Calendar.set("date");
  * </script>
  */
-function Calendar()
+export class Calendar
 {
-}
-
-// Configuration
-Calendar.defaultOptions = {
+	// Configuration
+	static defaultOptions = {
 		month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
 		close_label: 'Закрыть',
 		weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
@@ -29,32 +27,57 @@ Calendar.defaultOptions = {
 		month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
 		// Today's date
 		today: new Date(),
-};
+		callback: null,
+		start: 'days',
+	}
 
-// State variables
-Calendar.instance = null;
-Calendar.box = null;
-Calendar.addedListener = false;
+	// State variables
+	static instance = null;
+	static box = null;
+	static addedListener = false;
 
-Calendar.prototype.setHTML = function(html)
-{
-	html += "<a class='calendar-cancel' onclick='Calendar.hideCalendar();'>"+this.close_label+"</a>";
+	setHTML(html)
+	{
+		html += "<a class='calendar-cancel' onclick='Calendar.instance.hideCalendar()'>"+this.close_label+"</a>";
 		Calendar.box.innerHTML = html;
-};
+	}
 
-/// Called when the user clicks on a date in the calendar.
-Calendar.prototype.selectDate = function(year, month, day)
-{
+	isVisible()
+	{
+		return Calendar.instance == this && Calendar.box.style.display == 'block';
+	}
+
+	/// Called when the user clicks on a date in the calendar.
+	selectDate(year, month, day)
+	{
 		var i = this.input;
 		var t = i.value.split(/\s+/, 2)[1]||'';
 		if (t)
 			t = ' '+t;
-	i.value = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
-	Calendar.hideCalendar();
-};
+		if (this.callback)
+		{
+			var c = this.callback;
+			t = year + '-' + month + '-' + day + t;
+			c(new Date(t));
+		}
+		else
+		{
+			t = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
+			i.value = t;
+			if ("Event" in window)
+			{
+				var evt = document.createEvent('Event');
+				evt.initEvent('change', true, true);
+				i.dispatchEvent(evt);
+			}
+			else
+				i.fireEvent("onchange");
+		}
+		Calendar.instance.hideCalendar();
+	}
 
-Calendar.prototype.showMonths = function(year, month)
-{
+	showMonths(year)
+	{
 		var cur_y = this.today.getFullYear();
 		var cur_m = this.today.getMonth();
 		var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
@@ -75,10 +98,10 @@ Calendar.prototype.showMonths = function(year, month)
 		html += "</tr>";
 		html += "</table>";
 		this.setHTML(html);
-};
+	}
 
-Calendar.prototype.showYears = function(year)
-{
+	showYears(year)
+	{
 		var beg = year & ~15;
 		var cur_y = this.today.getFullYear();
 		var sel_y = this.selected.getFullYear();
@@ -100,11 +123,11 @@ Calendar.prototype.showYears = function(year)
 		html += "</tr>";
 		html += "</table>";
 		this.setHTML(html);
-};
+	}
 
-/// Creates a calendar with the date given in the argument as the selected date.
-Calendar.prototype.makeCalendar = function(year, month)
-{
+	/// Creates a calendar with the date given in the argument as the selected date.
+	makeCalendar(year, month)
+	{
 		// Display the table
 		var next_month = month+1;
 		var next_month_year = year;
@@ -212,22 +235,14 @@ Calendar.prototype.makeCalendar = function(year, month)
 		}
 		html += "</table>";
 		this.setHTML(html);
-};
+	}
 
-/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
-Calendar.prototype.showCalendar = function()
-{
+	/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
+	showCalendar()
+	{
 		Calendar.instance = this;
 		var input = this.input;
 
-	//Position the div in the correct location...
-	var div = Calendar.box;
-	var xy = getOffset(input);
-	var width = input.clientWidth||input.offsetWidth;
-	var height = input.clientHeight||input.offsetHeight;
-	div.style.left = (xy.left-1)+"px";
-	div.style.top = (xy.top+height-1)+"px";
-
 		// Show the calendar with the date in the input as the selected date
 		this.selected = new Date();
 		var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
@@ -252,19 +267,35 @@ Calendar.prototype.showCalendar = function()
 			}
 		}
 
+		if (this.start == 'years')
+			this.showYears(this.selected.getFullYear());
+		else if (this.start == 'months')
+			this.showMonths(this.selected.getFullYear());
+		else
 			this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
-	Calendar.box.style.display = "block";
-};
 
-/// Hides the currently show calendar.
-Calendar.hideCalendar = function()
-{
+		// Position the div in the correct location...
+		var div = Calendar.box;
+		var xy = getOffset(input);
+		var height = input.clientHeight||input.offsetHeight;
+		div.style.display = "block";
+		div.style.left = (xy.left-1)+"px";
+		if (div.offsetHeight + xy.top+height-1 >= (document.documentElement.clientHeight||document.body.clientHeight) &&
+			xy.top-div.offsetHeight >= 0)
+			div.style.top = (xy.top-div.offsetHeight)+'px';
+		else
+			div.style.top = (xy.top+height-1)+"px";
+	};
+
+	/// Hides the currently show calendar.
+	hideCalendar()
+	{
 		Calendar.box.style.display = "none";
-};
+	}
 
-/// Setup a text input box to be a calendar box.
-Calendar.set = function(input_or_id, options)
-{
+	/// Setup a text input box to be a calendar box.
+	static set(input_or_id, options)
+	{
 		if (typeof input_or_id == 'string')
 			input_or_id = document.getElementById(input_or_id);
 		if (!input_or_id)
@@ -275,21 +306,21 @@ Calendar.set = function(input_or_id, options)
 			instance[i] = options[i] || Calendar.defaultOptions[i];
 		instance.input = input_or_id;
 		Calendar.init();
-	addListener(input_or_id, 'focus', function(ev) {
+		input_or_id.addEventListener('focus', function(ev) {
 			instance.showCalendar();
 		});
 		return instance;
-};
+	}
 
-/// Will be called once when the first input is set.
-Calendar.init = function()
-{
+	/// Will be called once when the first input is set.
+	static init()
+	{
 		if (!Calendar.box || !Calendar.box.parentNode) {
 			var div = document.createElement('div');
 			if (!Calendar.box)
 				Calendar.box = div;
 			div.className = "calendar-box";
-		addListener(div, "mousedown", function(ev) {
+			div.addEventListener("mousedown", function(ev) {
 				ev = ev || window.event;
 				if (ev.stopPropagation)
 					ev.stopPropagation();
@@ -299,8 +330,48 @@ Calendar.init = function()
 			});
 			document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
 			if (!Calendar.addedListener) {
-			addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
+				document.addEventListener("mousedown", function() { Calendar.instance && Calendar.instance.hideCalendar(); });
 				Calendar.addedListener = true;
 			}
 		}
-};
+	}
+}
+
+window.Calendar = Calendar;
+
+function getOffsetRect(elem)
+{
+	var box = elem.getBoundingClientRect();
+
+	var body = document.body;
+	var docElem = document.documentElement;
+
+	var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+	var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+	var clientTop = docElem.clientTop || body.clientTop || 0;
+	var clientLeft = docElem.clientLeft || body.clientLeft || 0;
+	var top = box.top + scrollTop - clientTop;
+	var left = box.left + scrollLeft - clientLeft;
+
+	return { top: Math.round(top), left: Math.round(left) };
+}
+
+function getOffsetSum(elem)
+{
+	var top = 0, left = 0;
+	while(elem)
+	{
+		top = top + parseInt(elem.offsetTop);
+		left = left + parseInt(elem.offsetLeft);
+		elem = elem.offsetParent;
+	}
+	return { top: top, left: left };
+}
+
+function getOffset(elem)
+{
+	if (elem.getBoundingClientRect)
+		return getOffsetRect(elem);
+	else
+		return getOffsetSum(elem);
+}

calendar.util.js

@@ -1,47 +0,0 @@
-(function() {
-
-// UTILITY FUNCTIONS
-window.addListener = (function() {
-	return window.addEventListener
-		? function(el, type, fn) { el.addEventListener(type, fn, false); }
-		: function(el, type, fn) { el.attachEvent('on'+type, fn); };
-})();
-
-var getOffsetRect = function(elem)
-{
-	var box = elem.getBoundingClientRect();
-
-	var body = document.body;
-	var docElem = document.documentElement;
-
-	var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
-	var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
-	var clientTop = docElem.clientTop || body.clientTop || 0;
-	var clientLeft = docElem.clientLeft || body.clientLeft || 0;
-	var top = box.top + scrollTop - clientTop;
-	var left = box.left + scrollLeft - clientLeft;
-
-	return { top: Math.round(top), left: Math.round(left) };
-};
-
-var getOffsetSum = function(elem)
-{
-	var top = 0, left = 0;
-	while(elem)
-	{
-		top = top + parseInt(elem.offsetTop);
-		left = left + parseInt(elem.offsetLeft);
-		elem = elem.offsetParent;
-	}
-	return { top: top, left: left };
-};
-
-window.getOffset = function(elem)
-{
-	if (elem.getBoundingClientRect)
-		return getOffsetRect(elem);
-	else
-		return getOffsetSum(elem);
-};
-
-})();

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "calendarjs",
+  "author": {
+    "name": "Vitaliy Filippov",
+    "email": "vitalif@yourcmc.ru",
+    "url": "http://yourcmc.ru/wiki/"
+  },
+  "description": "Yet another date picker",
+  "dependencies": {},
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
+    "uglify-js": "^3.3.15"
+  },
+  "scripts": {
+    "compile": "node_modules/.bin/babel calendar.js | node_modules/.bin/uglifyjs > calendar.min.js"
+  }
+}

test.htm

@@ -1,8 +1,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link rel="stylesheet" href="calendar-material.css">
-<script src="calendar.util.js"></script>
-<script src="calendar.js"></script>
+<script src="calendar.min.js"></script>
 
 <input id="x" style="margin: 50px">
 <script>