First version of zdk-calendar

zedesk · May 14, 2014 · 247a8dd · 247a8dd
1 parent df7f955
commit 247a8dd
Show file tree

Hide file tree

Showing 8 changed files with 435 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,33 @@
 zdk-calendar
 ============
+
+A simple mini calendar component.
+
+The component uses the [polymer library](http://www.polymer-project.org).
+
+To use it :
+
+    bower install zdk-calendar -S
+
+and include in your html header :
+
+    <script src="/bower_components/platform/platform.js"></script>
+    <link rel="import" href="/bower_components/zdk-calendar/zdk-calendar.htm">
+
+then to use it, insert in the body of your html file :
+
+    <zdk-calendar></zdkcalendar>
+
+the component expose the following attributes :
+
+  - i18n : The language setting for the calendar
+  - date : The date of the calendar ( by default today )
+
+the component emits one event : "select" when clicking on a date. The event come with the following object :
+
+    {
+        "day": "15/05/2014",      // A string represenation of the selected date in the selected language setting
+        "time": 1400104800000     // the timestamp of the selected date
+    }   
+
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "zdk-calendar",
+  "version": "0.0.1",
+  "authors": [
+    "Fabrice <[email protected]>"
+  ],
+  "description": "A Small calendar component",
+  "keywords": [
+    "calendar",
+    "polymer",
+    "web-component",
+    "component"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/zedesk/zdk-calendar",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "momentjs": "~2.6.0",
+    "polymer": "Polymer/polymer#0.2.4",
+    "platform": "polymer/platform#~0.2.4"
+  }
+}
diff --git a/index.htm b/index.htm
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+	<title>calendar test page</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link href="/css/font.css" rel="stylesheet">
+	<script src="/bower_components/platform/platform.js"></script>
+	<link rel="import" href="zdk-calendar.htm">
+
+	<style>
+		body {
+			font-size:16px;font-family:"Oxygen",Helvetica,Arial,sans-serif;font-weight:normal;line-height:24px
+		}
+		div.date {
+			display: inline-block;
+			border: 1px solid #ccc;
+			line-height: 1.4;
+			padding: 0px 10px;
+			min-width:100px;
+			text-align:center;
+		}
+		zdk-calendar {
+			background:white;
+		}
+		zdk-calendar.small {
+			width: 250px;
+			height: 250px;
+			font-size: 12px;
+			border:1px solid black;
+		}
+		zdk-calendar.small /deep/ div.head, 
+		zdk-calendar.small div.head {
+			background:#d61a7f;
+			font-weight: bold;
+			color: #ffffff;
+		}
+		zdk-calendar.small /deep/ div.d1 {
+			background:aliceblue;
+		}
+		zdk-calendar.small /deep/ div.d1:hover {
+			background:#B2DFDB;
+		}
+		zdk-calendar.small /deep/ div.we {
+			background:LemonChiffon;
+		}
+		zdk-calendar.small /deep/ div.we:hover {
+			background:Khaki;
+		}
+		pre {
+			margin: 5px 15px;
+			background: aliceblue;
+			padding: 0px 20px;
+			overflow: auto;
+		}
+	</style>
+</head>
+<body>
+	<h1>Calendar component</h1>
+	<h2>Default calendar</h2>
+	<p>To use the calendar compondent add to the head of your file :</p>
+	<pre><code>
+&lt;script src="/bower_components/platform/platform.js"&gt;&lt;/script&gt;
+&lt;link rel="import" href="calendar.htm"&gt;
+	</code></pre>
+	<p>To display a calendar just type in your html code :</p>
+	<pre><code>&lt;zdk-calendar id="cal1"&gt;&lt;/zdk-calendar&gt;</code></pre>
+	<p>To get the clicked date :</p>
+	<pre><code>
+document.querySelector("#cal1").addEventListener('select', function(e) {
+	document.querySelector("#cal1Date").innerHTML = e.detail.day;
+}, false);
+	</code></pre>
+	<div style="text-align: center;">
+	<zdk-calendar id="cal1"></zdk-calendar><br/>
+	<div id="cal1Date" class="date">click on any date</div>
+	</div>
+	<p>The change event send an object containing a human readeable date and a timestamp to use in your script</p>
+	<pre id="result"></pre>
+	<script>
+		document.querySelector("#cal1").addEventListener('select', function(e) {
+			document.querySelector("#cal1Date").innerHTML = e.detail.day;
+			document.querySelector("#result").innerHTML = JSON.stringify(e.detail,null,"    ");
+		}, false);
+	</script>
+	<h2>change lang settings</h2>
+	<p>You could choose your own language settings for exemple : "en-US"</p>
+	<pre><code>&lt;zdk-calendar i18n="en-US"&gt;&lt;/zdk-calendar&gt;</code></pre>
+	<p>The calendar will adapt to the setting of the selected language and also the format of the date of the event "change".
+		Change the property "i18n" programmatically will automatically update the component.</p>
+	<p>By default, the component takes the language settings of the browser.</p>
+	<div style="text-align: center;">
+	<zdk-calendar id="cal2" i18n="en-US"></zdk-calendar><br/>
+	<div id="cal2Date" class="date">click on any date</div>
+	<select id="i18n">
+		<option value="ar">Arabic</option>
+		<option value="bg">Bulgarian</option>
+		<option value="br">Breton</option>
+		<option value="ca">Catalan</option>
+		<option value="cs">Czech</option>
+		<option value="cv">Chuvash</option>
+		<option value="cy">Welsh</option>
+		<option value="da">Danish</option>
+		<option value="de">German</option>
+		<option value="el">Greek</option>
+		<option value="en-au">English Australia</option>
+		<option value="en-ca">English Canada</option>
+		<option value="en-gb">English Great Britain</option>
+		<option value="en-US" selected>English US</option>
+		<option value="eo">Esperanto</option>
+		<option value="es">Spanish</option>
+		<option value="et">Estonian</option>
+		<option value="eu">Basque</option>
+		<option value="fa">Persian (Farsi)</option>
+		<option value="fi">Finnish</option>
+		<option value="fr">French</option>
+		<option value="fr-ca">French Canada</option>
+		<option value="gl">Galician</option>
+		<option value="he">Hebrew</option>
+		<option value="hi">Hindi</option>
+		<option value="hr">Croatian</option>
+		<option value="hu">Hungarian</option>
+		<option value="hy-am">Armenian</option>
+		<option value="id">Indonesian</option>
+		<option value="is">Icelandic</option>
+		<option value="it">Italian</option>
+		<option value="ja">Japanese</option>
+		<option value="ka">Georgian</option>
+		<option value="km">Khmer</option>
+		<option value="ko">Korean</option>
+		<option value="lb">Luxembourgish</option>
+		<option value="lt">Lithuanian</option>
+		<option value="lv">Latvian</option>
+		<option value="mk">Macedonian</option>
+		<option value="ml">Malayalam</option>
+		<option value="mr">Marathi</option>
+		<option value="nb">Norwegian Bokmål</option>
+		<option value="ne">Nepali</option>
+		<option value="nl">Dutch</option>
+		<option value="nn">Norwegian Nynorsk</option>
+		<option value="pl">Polish</option>
+		<option value="pt">Portuguese</option>
+		<option value="ro">Romanian</option>
+		<option value="ru">Russian</option>
+		<option value="sk">Slovak</option>
+		<option value="sq">Albanian</option>
+		<option value="sr">Serbian</option>
+		<option value="sr-cyr">Serbian Cyrilic</option>
+		<option value="sv">Swedish</option>
+		<option value="ta">Tamil</option>
+		<option value="th">Thai</option>
+		<option value="ti-ph">Tigrinya</option>
+		<option value="tr">Turkish</option>
+		<option value="uk">Ukrainian</option>
+		<option value="uz">Uzbek</option>
+		<option value="vi">Vietnamese</option>
+		<option value="zh-cn">Chinese</option>
+		<option value="zh-tw">Chinese Taiwan</option>
+	</select>
+	<script>
+		document.querySelector("select#i18n").addEventListener("change", function(e) {
+			document.querySelector("#cal2").i18n = this.value;
+		}, false);
+		document.querySelector("#cal2").addEventListener('select', function(e) {
+			document.querySelector("#cal2Date").innerHTML = e.detail.day;
+		}, false);
+	</script>
+	</div>
+	<h2>change current date</h2>
+	<p>Changing the date of a calendar is very easy.</p>
+	<p>in HTML, simply add a date property :</p>
+	<pre><code>&lt;zdk-calendar id="cal3" date="2014-02-10"&gt;&lt;/zdk-calendar&gt;</code></pre>
+	<p>programaticaly, set the date property of the object :</p>
+	<pre><code>
+var cal3 = document.getElemementById("cal3");
+cal3.date = "2014-02-10";
+	</code></pre>
+	<p>The date property could be a miliseconds timestamp ( new Date().getTime() ), a string formated as "YYYY-MM-DD" or
+		a localy date string for example in france ( "10/02/2010" ), or a js Date object.</p>
+	<div style="text-align:center">
+	<zdk-calendar id="cal3" date="2014-02-10"></zdk-calendar>
+	</div>
+	<h2>combine two calendars</h2>
+	<p>You can easily combine two or more calendars, by listening to the "dateChange" event send when clicking the previous/next month or today button.
+	This event send the new reference timestamp in milliseconds</p>
+	<div style="text-align:center">
+	<zdk-calendar id="cal4" date="2014-05-10" class="small"></zdk-calendar>
+	<zdk-calendar id="cal5" date="2014-06-10" class="small"></zdk-calendar>
+	<script>
+		document.querySelector("#cal4").addEventListener('dateChange', function(e) {
+			var date = new Date(e.detail);
+			date.setMonth(date.getMonth()+1);
+			document.querySelector("#cal5").setAttribute("date", date);
+		}, false);
+		document.querySelector("#cal5").addEventListener('dateChange', function(e) {
+			var date = new Date(e.detail);
+			date.setMonth(date.getMonth()-1);
+			document.querySelector("#cal4").setAttribute("date", date);
+		}, false);
+	</script>
+	</div>
+	<p>the code :</p>
+	<pre><code>
+document.querySelector("#cal4").addEventListener('dateChange', function(e) {
+	var date = new Date(e.detail);
+	date.setMonth(date.getMonth()+1);
+	document.querySelector("#cal5").setAttribute("date", date);
+}, false);
+document.querySelector("#cal5").addEventListener('dateChange', function(e) {
+	var date = new Date(e.detail);
+	date.setMonth(date.getMonth()-1);
+	document.querySelector("#cal4").setAttribute("date", date);
+}, false);
+	</code></pre>
+</body>
+</html>
diff --git a/left.png b/left.png
diff --git a/point.png b/point.png
diff --git a/right.png b/right.png
diff --git a/zdk-calendar.css b/zdk-calendar.css
@@ -0,0 +1,39 @@
+:host {
+	display: inline-block;
+	width:300px;
+	height:300px;
+	font-family:Verdana, Helvetica;
+	font-size:14px;
+}
+* { box-sizing: border-box;}
+div#calendar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+div#calendar div {
+	flex:1; 
+	border-collapse:collapse;
+	display:flex; 
+}
+div.head img {
+	width:100%;
+}
+div.row div { 
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+div.day:hover {
+	background:#ccc;
+}
+div.today {
+	font-weight:bold;
+	color:tomato;
+}
+div.d1 {
+	background: antiquewhite;
+}
+div.head: {
+	background: var(head-bg);
+}