Demos where updated

GramThanos · May 20, 2019 · 1d7e5f1 · 1d7e5f1
1 parent 474a592
commit 1d7e5f1
Show file tree

Hide file tree

Showing 4 changed files with 200 additions and 224 deletions.
diff --git a/demos.html b/demos.html
@@ -64,6 +64,7 @@
 						<li><a href="#load-demo" data-demo="date-picker">Date Picker</a></li>
 						<li><a href="#load-demo" data-demo="date-events">Date Events</a></li>
 						<li><a href="#load-demo" data-demo="date-calendar">Year Calendar</a></li>
+						<li><a href="#load-demo" data-demo="colorful-selects">Colorful Selects</a></li>
 					</ul>
 				</div>
 				<div class="wrapper-clear"></div>
@@ -93,9 +94,10 @@
 			var element = document.getElementById("demo-page");
 			var link = document.getElementById("demo-link");
 			var demos = {
-				"date-picker" : {height : 460, url : "demos/date picker.html"},
+				"date-picker" : {height : 480, url : "demos/date pickers.html"},
 				"date-events" : {height : 530, url : "demos/date events.html"},
-				"date-calendar" : {height : 1760, url : "demos/year calendar.html"}
+				"date-calendar" : {height : 1760, url : "demos/year calendar.html"},
+				"colorful-selects" : {height : 500, url : "demos/colorful selects.html"}
 			};
 
 			// Load a demo

diff --git a/demos/colorful selects.html b/demos/colorful selects.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>jsCalendar Demo</title>
+		<meta name="description" content="jsCalendar demo - date picker">
+		<meta name="author" content="GramThanos">
+
+		<!-- jsCalendar -->
+		<link rel="stylesheet" type="text/css" href="../css/jsCalendar.min.css">
+		<script type="text/javascript" src="../js/jsCalendar.min.js"></script>
+
+		<!--[if lt IE 9]>
+			<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+		<![endif]-->
+
+		<!-- Demo Style -->
+		<style>
+			html, body {
+				font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+				text-align: center;
+			}
+			.description {
+				padding-bottom: 40px;
+			}
+			.version {
+				font-size:12px;
+			}
+			.wrapper {
+				margin: 0 auto;
+				width: 300px;
+			}
+
+			.jsCalendar tbody td.jsCalendar-colorful-blue {border-color: #52C9FF;}
+			.jsCalendar tbody td.jsCalendar-colorful-yellow {border-color: #FFE31B;}
+			.jsCalendar tbody td.jsCalendar-colorful-orange {border-color: #FFB400;}
+			.jsCalendar tbody td.jsCalendar-colorful-red {border-color: #F6511D;}
+			.jsCalendar tbody td.jsCalendar-colorful-green {border-color: #7FB800;}
+		</style>
+	</head>
+	<body>
+		<div class="description">
+			<div style="font-size: 1.4em;">Colorful select</div>
+			<div>Rainbows</div>
+		</div>
+
+		<div class="wrapper">
+			<!-- Calendar element -->
+			<div id="my-calendar"></div>
+		</div>
+
+		<!-- Create the calendar -->
+		<script type="text/javascript">
+			// Colorful Select
+			jsCalendar.prototype.colorfulSelect = function(dates, color){
+				// If no arguments
+				if (typeof dates === 'undefined') {
+					// Return
+					return this;
+				}
+
+				// If dates not array
+				if (!(dates instanceof Array)) {
+					// Lets make it an array
+					dates = [dates];
+				}
+
+				// Save colors
+				this._colorful_saveDates(dates, color);
+				// Select dates
+				this._selectDates(dates);
+
+				if (!this._colorful_patched) {
+					this._colorful_patched = this.refresh;
+					this.refresh = function(date) {
+						// Call original refresh
+						this._colorful_patched(date);
+						// Refresh select Colors
+						this._colorful_update();
+						// Return
+						return this;
+					};
+				}
+				// Refresh
+				this.refresh();
+
+				// Return
+				return this;
+			};
+
+			// Save dates colors
+			jsCalendar.prototype._colorful_saveDates = function(dates, color) {
+				// Copy array instance
+				dates = dates.slice();
+
+				// Parse dates
+				for (var i = 0; i < dates.length; i++) {
+					dates[i] = jsCalendar.tools.parseDate(dates[i]);
+					dates[i].setHours(0, 0, 0, 0);
+					dates[i] = dates[i].getTime();
+				}
+
+				if (typeof this._colorful_colors == "undefined") {
+					this._colorful_colors = {};
+				}
+
+				// Save each date color
+				for (i = dates.length - 1; i >= 0; i--) {
+					this._colorful_colors[dates[i]] = color;
+				}
+			};
+
+			// Refresh colors
+			jsCalendar.prototype._colorful_update = function() {
+				// Get month info
+				var month = this._getVisibleMonth(this._date);
+
+				// Check days
+				var timestamp;
+				for (var i = month.days.length - 1; i >= 0; i--) {
+					// If date is selected
+					timestamp = month.days[i].getTime();
+					if (this._selected.indexOf(timestamp) >= 0 && this._colorful_colors.hasOwnProperty(timestamp)) {
+						this._elements.bodyCols[i].className = 'jsCalendar-selected' + ' ' + this._colorful_colors[timestamp];
+					}
+				}
+			};
+
+
+			var cal = new jsCalendar('#my-calendar');
+			cal.set('02/10/2018');
+			cal.select('03/10/2018');
+			cal.colorfulSelect('04/10/2018', 'jsCalendar-colorful-blue');
+			cal.colorfulSelect('05/10/2018', 'jsCalendar-colorful-yellow');
+			cal.colorfulSelect('06/10/2018', 'jsCalendar-colorful-orange');
+			cal.colorfulSelect('07/10/2018', 'jsCalendar-colorful-red');
+			cal.colorfulSelect('08/10/2018', 'jsCalendar-colorful-green');
+			cal.colorfulSelect(['09/10/2018', '10/10/2018'], 'jsCalendar-colorful-blue');
+		</script>
+
+		<br><br><br>
+		<div class="version">
+			You are using jsCalendar <script type="text/javascript">document.writeln(jsCalendar.version);</script>
+		</div>
+	</body>
+</html>
diff --git a/demos/date picker.html b/demos/date picker.html