Skip to content

Commit 247a8dd

Browse files
fablec-telecomsantefablec-telecomsante
committed
First version of zdk-calendar
1 parent df7f955 commit 247a8dd

File tree

8 files changed

+435
-0
lines changed

8 files changed

+435
-0
lines changed

‎README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,33 @@
11
zdk-calendar
22
============
3+
4+
A simple mini calendar component.
5+
6+
The component uses the [polymer library](http://www.polymer-project.org).
7+
8+
To use it :
9+
10+
bower install zdk-calendar -S
11+
12+
and include in your html header :
13+
14+
<script src="/bower_components/platform/platform.js"></script>
15+
<link rel="import" href="/bower_components/zdk-calendar/zdk-calendar.htm">
16+
17+
then to use it, insert in the body of your html file :
18+
19+
<zdk-calendar></zdkcalendar>
20+
21+
the component expose the following attributes :
22+
23+
- i18n : The language setting for the calendar
24+
- date : The date of the calendar ( by default today )
25+
26+
the component emits one event : "select" when clicking on a date. The event come with the following object :
27+
28+
{
29+
"day": "15/05/2014", // A string represenation of the selected date in the selected language setting
30+
"time": 1400104800000 // the timestamp of the selected date
31+
}
32+
33+

‎bower.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "zdk-calendar",
3+
"version": "0.0.1",
4+
"authors": [
5+
"Fabrice <fabrice.lecoz@zedesk.net>"
6+
],
7+
"description": "A Small calendar component",
8+
"keywords": [
9+
"calendar",
10+
"polymer",
11+
"web-component",
12+
"component"
13+
],
14+
"license": "MIT",
15+
"homepage": "https://github.com/zedesk/zdk-calendar",
16+
"ignore": [
17+
"**/.*",
18+
"node_modules",
19+
"bower_components",
20+
"test",
21+
"tests"
22+
],
23+
"dependencies": {
24+
"momentjs": "~2.6.0",
25+
"polymer": "Polymer/polymer#0.2.4",
26+
"platform": "polymer/platform#~0.2.4"
27+
}
28+
}

‎index.htm‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
5+
<title>calendar test page</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="/css/font.css" rel="stylesheet">
8+
<script src="/bower_components/platform/platform.js"></script>
9+
<link rel="import" href="zdk-calendar.htm">
10+
11+
<style>
12+
body {
13+
font-size:16px;font-family:"Oxygen",Helvetica,Arial,sans-serif;font-weight:normal;line-height:24px
14+
}
15+
div.date {
16+
display: inline-block;
17+
border: 1px solid #ccc;
18+
line-height: 1.4;
19+
padding: 0px 10px;
20+
min-width:100px;
21+
text-align:center;
22+
}
23+
zdk-calendar {
24+
background:white;
25+
}
26+
zdk-calendar.small {
27+
width: 250px;
28+
height: 250px;
29+
font-size: 12px;
30+
border:1px solid black;
31+
}
32+
zdk-calendar.small /deep/ div.head,
33+
zdk-calendar.small div.head {
34+
background:#d61a7f;
35+
font-weight: bold;
36+
color: #ffffff;
37+
}
38+
zdk-calendar.small /deep/ div.d1 {
39+
background:aliceblue;
40+
}
41+
zdk-calendar.small /deep/ div.d1:hover {
42+
background:#B2DFDB;
43+
}
44+
zdk-calendar.small /deep/ div.we {
45+
background:LemonChiffon;
46+
}
47+
zdk-calendar.small /deep/ div.we:hover {
48+
background:Khaki;
49+
}
50+
pre {
51+
margin: 5px 15px;
52+
background: aliceblue;
53+
padding: 0px 20px;
54+
overflow: auto;
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<h1>Calendar component</h1>
60+
<h2>Default calendar</h2>
61+
<p>To use the calendar compondent add to the head of your file :</p>
62+
<pre><code>
63+
&lt;script src="/bower_components/platform/platform.js"&gt;&lt;/script&gt;
64+
&lt;link rel="import" href="calendar.htm"&gt;
65+
</code></pre>
66+
<p>To display a calendar just type in your html code :</p>
67+
<pre><code>&lt;zdk-calendar id="cal1"&gt;&lt;/zdk-calendar&gt;</code></pre>
68+
<p>To get the clicked date :</p>
69+
<pre><code>
70+
document.querySelector("#cal1").addEventListener('select', function(e) {
71+
document.querySelector("#cal1Date").innerHTML = e.detail.day;
72+
}, false);
73+
</code></pre>
74+
<div style="text-align: center;">
75+
<zdk-calendar id="cal1"></zdk-calendar><br/>
76+
<div id="cal1Date" class="date">click on any date</div>
77+
</div>
78+
<p>The change event send an object containing a human readeable date and a timestamp to use in your script</p>
79+
<pre id="result"></pre>
80+
<script>
81+
document.querySelector("#cal1").addEventListener('select', function(e) {
82+
document.querySelector("#cal1Date").innerHTML = e.detail.day;
83+
document.querySelector("#result").innerHTML = JSON.stringify(e.detail,null," ");
84+
}, false);
85+
</script>
86+
<h2>change lang settings</h2>
87+
<p>You could choose your own language settings for exemple : "en-US"</p>
88+
<pre><code>&lt;zdk-calendar i18n="en-US"&gt;&lt;/zdk-calendar&gt;</code></pre>
89+
<p>The calendar will adapt to the setting of the selected language and also the format of the date of the event "change".
90+
Change the property "i18n" programmatically will automatically update the component.</p>
91+
<p>By default, the component takes the language settings of the browser.</p>
92+
<div style="text-align: center;">
93+
<zdk-calendar id="cal2" i18n="en-US"></zdk-calendar><br/>
94+
<div id="cal2Date" class="date">click on any date</div>
95+
<select id="i18n">
96+
<option value="ar">Arabic</option>
97+
<option value="bg">Bulgarian</option>
98+
<option value="br">Breton</option>
99+
<option value="ca">Catalan</option>
100+
<option value="cs">Czech</option>
101+
<option value="cv">Chuvash</option>
102+
<option value="cy">Welsh</option>
103+
<option value="da">Danish</option>
104+
<option value="de">German</option>
105+
<option value="el">Greek</option>
106+
<option value="en-au">English Australia</option>
107+
<option value="en-ca">English Canada</option>
108+
<option value="en-gb">English Great Britain</option>
109+
<option value="en-US" selected>English US</option>
110+
<option value="eo">Esperanto</option>
111+
<option value="es">Spanish</option>
112+
<option value="et">Estonian</option>
113+
<option value="eu">Basque</option>
114+
<option value="fa">Persian (Farsi)</option>
115+
<option value="fi">Finnish</option>
116+
<option value="fr">French</option>
117+
<option value="fr-ca">French Canada</option>
118+
<option value="gl">Galician</option>
119+
<option value="he">Hebrew</option>
120+
<option value="hi">Hindi</option>
121+
<option value="hr">Croatian</option>
122+
<option value="hu">Hungarian</option>
123+
<option value="hy-am">Armenian</option>
124+
<option value="id">Indonesian</option>
125+
<option value="is">Icelandic</option>
126+
<option value="it">Italian</option>
127+
<option value="ja">Japanese</option>
128+
<option value="ka">Georgian</option>
129+
<option value="km">Khmer</option>
130+
<option value="ko">Korean</option>
131+
<option value="lb">Luxembourgish</option>
132+
<option value="lt">Lithuanian</option>
133+
<option value="lv">Latvian</option>
134+
<option value="mk">Macedonian</option>
135+
<option value="ml">Malayalam</option>
136+
<option value="mr">Marathi</option>
137+
<option value="nb">Norwegian Bokmål</option>
138+
<option value="ne">Nepali</option>
139+
<option value="nl">Dutch</option>
140+
<option value="nn">Norwegian Nynorsk</option>
141+
<option value="pl">Polish</option>
142+
<option value="pt">Portuguese</option>
143+
<option value="ro">Romanian</option>
144+
<option value="ru">Russian</option>
145+
<option value="sk">Slovak</option>
146+
<option value="sq">Albanian</option>
147+
<option value="sr">Serbian</option>
148+
<option value="sr-cyr">Serbian Cyrilic</option>
149+
<option value="sv">Swedish</option>
150+
<option value="ta">Tamil</option>
151+
<option value="th">Thai</option>
152+
<option value="ti-ph">Tigrinya</option>
153+
<option value="tr">Turkish</option>
154+
<option value="uk">Ukrainian</option>
155+
<option value="uz">Uzbek</option>
156+
<option value="vi">Vietnamese</option>
157+
<option value="zh-cn">Chinese</option>
158+
<option value="zh-tw">Chinese Taiwan</option>
159+
</select>
160+
<script>
161+
document.querySelector("select#i18n").addEventListener("change", function(e) {
162+
document.querySelector("#cal2").i18n = this.value;
163+
}, false);
164+
document.querySelector("#cal2").addEventListener('select', function(e) {
165+
document.querySelector("#cal2Date").innerHTML = e.detail.day;
166+
}, false);
167+
</script>
168+
</div>
169+
<h2>change current date</h2>
170+
<p>Changing the date of a calendar is very easy.</p>
171+
<p>in HTML, simply add a date property :</p>
172+
<pre><code>&lt;zdk-calendar id="cal3" date="2014-02-10"&gt;&lt;/zdk-calendar&gt;</code></pre>
173+
<p>programaticaly, set the date property of the object :</p>
174+
<pre><code>
175+
var cal3 = document.getElemementById("cal3");
176+
cal3.date = "2014-02-10";
177+
</code></pre>
178+
<p>The date property could be a miliseconds timestamp ( new Date().getTime() ), a string formated as "YYYY-MM-DD" or
179+
a localy date string for example in france ( "10/02/2010" ), or a js Date object.</p>
180+
<div style="text-align:center">
181+
<zdk-calendar id="cal3" date="2014-02-10"></zdk-calendar>
182+
</div>
183+
<h2>combine two calendars</h2>
184+
<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.
185+
This event send the new reference timestamp in milliseconds</p>
186+
<div style="text-align:center">
187+
<zdk-calendar id="cal4" date="2014-05-10" class="small"></zdk-calendar>
188+
<zdk-calendar id="cal5" date="2014-06-10" class="small"></zdk-calendar>
189+
<script>
190+
document.querySelector("#cal4").addEventListener('dateChange', function(e) {
191+
var date = new Date(e.detail);
192+
date.setMonth(date.getMonth()+1);
193+
document.querySelector("#cal5").setAttribute("date", date);
194+
}, false);
195+
document.querySelector("#cal5").addEventListener('dateChange', function(e) {
196+
var date = new Date(e.detail);
197+
date.setMonth(date.getMonth()-1);
198+
document.querySelector("#cal4").setAttribute("date", date);
199+
}, false);
200+
</script>
201+
</div>
202+
<p>the code :</p>
203+
<pre><code>
204+
document.querySelector("#cal4").addEventListener('dateChange', function(e) {
205+
var date = new Date(e.detail);
206+
date.setMonth(date.getMonth()+1);
207+
document.querySelector("#cal5").setAttribute("date", date);
208+
}, false);
209+
document.querySelector("#cal5").addEventListener('dateChange', function(e) {
210+
var date = new Date(e.detail);
211+
date.setMonth(date.getMonth()-1);
212+
document.querySelector("#cal4").setAttribute("date", date);
213+
}, false);
214+
</code></pre>
215+
</body>
216+
</html>

‎left.png‎

859 Bytes
Loading

‎point.png‎

780 Bytes
Loading

‎right.png‎

880 Bytes
Loading

‎zdk-calendar.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
:host {
2+
display: inline-block;
3+
width:300px;
4+
height:300px;
5+
font-family:Verdana, Helvetica;
6+
font-size:14px;
7+
}
8+
* { box-sizing: border-box;}
9+
div#calendar {
10+
height: 100%;
11+
display: flex;
12+
flex-direction: column;
13+
}
14+
div#calendar div {
15+
flex:1;
16+
border-collapse:collapse;
17+
display:flex;
18+
}
19+
div.head img {
20+
width:100%;
21+
}
22+
div.row div {
23+
justify-content: center;
24+
align-items: center;
25+
text-align: center;
26+
}
27+
div.day:hover {
28+
background:#ccc;
29+
}
30+
div.today {
31+
font-weight:bold;
32+
color:tomato;
33+
}
34+
div.d1 {
35+
background: antiquewhite;
36+
}
37+
div.head: {
38+
background: var(head-bg);
39+
}

0 commit comments

Comments
 (0)