diff --git a/README.md b/README.md index 2af68ba..a173914 100644 --- 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 : + + + + +then to use it, insert in the body of your html file : + + + +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 new file mode 100644 index 0000000..869bea9 --- /dev/null +++ b/bower.json @@ -0,0 +1,28 @@ +{ + "name": "zdk-calendar", + "version": "0.0.1", + "authors": [ + "Fabrice " + ], + "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 new file mode 100644 index 0000000..f6548a8 --- /dev/null +++ b/index.htm @@ -0,0 +1,216 @@ + + + + + calendar test page + + + + + + + + +

Calendar component

+

Default calendar

+

To use the calendar compondent add to the head of your file :

+ 

+<script src="/bower_components/platform/platform.js"></script>
+<link rel="import" href="calendar.htm">
+
+

To display a calendar just type in your html code :

+ 
<zdk-calendar id="cal1"></zdk-calendar>
+

To get the clicked date :

+ 

+document.querySelector("#cal1").addEventListener('select', function(e) {
+	document.querySelector("#cal1Date").innerHTML = e.detail.day;
+}, false);
+
+
+
+
click on any date
+
+

The change event send an object containing a human readeable date and a timestamp to use in your script

+ 

+	
+	
change lang settings

+	
You could choose your own language settings for exemple : "en-US"

+	
<zdk-calendar i18n="en-US"></zdk-calendar>

+	
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.

+	
By default, the component takes the language settings of the browser.

+	

+	

+	
click on any date

+	
+	
+	

+	
change current date

+	
Changing the date of a calendar is very easy.

+	
in HTML, simply add a date property :

+	
<zdk-calendar id="cal3" date="2014-02-10"></zdk-calendar>

+	
programaticaly, set the date property of the object :

+	

+var cal3 = document.getElemementById("cal3");
+cal3.date = "2014-02-10";
+	

+	
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.

+	

+	
+	

+	
combine two calendars

+	
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

+	

+	
+	
+	
+	

+	
the 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);
+	

+
+
\ No newline at end of file
diff --git a/left.png b/left.png
new file mode 100644
index 0000000..ae7ad5f
Binary files /dev/null and b/left.png differ
diff --git a/point.png b/point.png
new file mode 100644
index 0000000..f68e202
Binary files /dev/null and b/point.png differ
diff --git a/right.png b/right.png
new file mode 100644
index 0000000..5e7e0df
Binary files /dev/null and b/right.png differ
diff --git a/zdk-calendar.css b/zdk-calendar.css
new file mode 100644
index 0000000..4b0ee80
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/zdk-calendar.htm b/zdk-calendar.htm
new file mode 100644
index 0000000..b2c50bc
--- /dev/null
+++ b/zdk-calendar.htm
@@ -0,0 +1,121 @@
+
+
+
+
+	
+	
+
\ No newline at end of file