Merge pull request #3 from zigomir/range

Range selection

package.json

@@ -1,6 +1,6 @@
 {
   "name": "caly",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "Caly is a small calendar!",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,7 +22,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@stencil/core": "^1.8.9",
+    "@stencil/core": "^1.8.11",
     "@types/jest": "24.0.25",
     "@types/puppeteer": "1.20.3",
     "cntdys": "^0.3.2",

readme.md

@@ -1,16 +1,16 @@
 # caly
 
-> 6k calendar
+> 7k calendar with range selection 📅
 
 ## usage example on codepen
 
-https://codepen.io/zigomir/pen/LYVpJGa?editors=1010
+- [caly](https://codepen.io/zigomir/pen/LYVpJGa?editors=1000)
+- [caly with range selection](https://codepen.io/zigomir/pen/mdJwXOB?editors=1000)
 
 ## docs
 
 see [caly-calendar component](./src/components/caly-calendar/readme.md)
 
 ## todo
 
-- customizable day names?
-- range selection? -> another component
+- customizable day names

src/components.d.ts

@@ -20,6 +20,22 @@ export namespace Components {
     */
     'month': number;
     /**
+    * (optional) Number of months rendered
+    */
+    'numberOfMonths': number;
+    /**
+    * (optional) Range
+    */
+    'range': boolean;
+    /**
+    * (optional) Range end (dd-mm-yyyy)
+    */
+    'rangeEnd': string;
+    /**
+    * (optional) Range start (dd-mm-yyyy)
+    */
+    'rangeStart': string;
+    /**
     * (optional) Selected day (dd-mm-yyyy)
     */
     'selected': string;
@@ -58,10 +74,34 @@ declare namespace LocalJSX {
     */
     'month': number;
     /**
+    * (optional) Number of months rendered
+    */
+    'numberOfMonths'?: number;
+    /**
     * (optional) Event to listen for when new day is selected.
     */
     'onDaySelected'?: (event: CustomEvent<any>) => void;
     /**
+    * (optional) Event to listen for when range end day is selected.
+    */
+    'onRangeEndSelected'?: (event: CustomEvent<any>) => void;
+    /**
+    * (optional) Event to listen for when range start day is selected.
+    */
+    'onRangeStartSelected'?: (event: CustomEvent<any>) => void;
+    /**
+    * (optional) Range
+    */
+    'range'?: boolean;
+    /**
+    * (optional) Range end (dd-mm-yyyy)
+    */
+    'rangeEnd'?: string;
+    /**
+    * (optional) Range start (dd-mm-yyyy)
+    */
+    'rangeStart'?: string;
+    /**
     * (optional) Selected day (dd-mm-yyyy)
     */
     'selected'?: string;