From 07b6d16873df61c2ce5f2421f47f853c6034717c Mon Sep 17 00:00:00 2001
From: caribouflex <arthur.tressol@gmail.com>
Date: Thu, 15 Feb 2018 21:46:11 -0500
Subject: [PATCH] Creation of new file to separate the calendar in multiple
 views.

---
 bower.json                      |   6 +-
 caribou-calendar.html           | 440 ++++++++++++++++++++++++++++++++
 caribou-datepicker-overlay.html |  43 ++++
 caribou-datepicker.html         | 417 ++----------------------------
 caribou-month.html              | 341 +++++++++++++++++++++++++
 caribou-year.html               | 139 ++++++++++
 6 files changed, 986 insertions(+), 400 deletions(-)
 create mode 100644 caribou-calendar.html
 create mode 100644 caribou-datepicker-overlay.html
 create mode 100644 caribou-month.html
 create mode 100644 caribou-year.html

diff --git a/bower.json b/bower.json
index 84a46f0..86b9b50 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,9 @@
     "paper-button": "PolymerElements/paper-button#^2.0.0",
     "paper-input": "PolymerElements/paper-input#^2.1.1",
     "paper-icon-button": "PolymerElements/paper-icon-button#^2.1.0",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.1.0"
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.1.0",
+    "iron-dropdown": "PolymerElements/iron-dropdown#^2.1.0",
+    "web-animations-js": "^2.3.1"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
@@ -17,4 +19,4 @@
   "resolutions": {
     "polymer": "^2.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/caribou-calendar.html b/caribou-calendar.html
new file mode 100644
index 0000000..ce76158
--- /dev/null
+++ b/caribou-calendar.html
@@ -0,0 +1,440 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../paper-button/paper-button.html">
+
+<dom-module id="caribou-calendar">
+    <template>
+        <style>
+            :host {
+                display: block;
+            }
+
+            ul {
+                list-style-type: none;
+            }
+
+            body {
+                font-family: Verdana, sans-serif;
+            }
+
+            /* Month header */
+
+            .month {
+                padding: 70px 25px;
+                width: 100%;
+                background: #1abc9c;
+                text-align: center;
+            }
+
+            /* Month list */
+
+            .month ul {
+                margin: 0;
+                padding: 0;
+            }
+
+            .month ul li {
+                color: white;
+                font-size: 20px;
+                text-transform: uppercase;
+                letter-spacing: 3px;
+            }
+
+            /* Previous button inside month header */
+
+            .month .prev {
+                float: left;
+                padding-top: 10px;
+            }
+
+            /* Next button */
+
+            .month .next {
+                float: right;
+                padding-top: 10px;
+            }
+
+            /* Weekdays
+(Mon-Sun) */
+
+            .weekdays {
+                margin: 0;
+                padding: 10px 0;
+                background-color: #ddd;
+            }
+
+            .weekdays li {
+                display: inline-block;
+                width: 13.6%;
+                color: #666;
+                text-align: center;
+            }
+
+            /* Days (1-31) */
+
+            .days {
+                padding: 10px 0;
+                background: #eee;
+                margin: 0;
+            }
+
+            .days li {
+                list-style-type: none;
+                display: inline-block;
+                width: 13.6%;
+                text-align: center;
+                margin-bottom: 5px;
+                font-size: 12px;
+                color: #777;
+            }
+
+            /* Highlight the "current" day */
+
+            .days li .active {
+                padding: 5px;
+                background: #1abc9c;
+                color: white !important
+            }
+
+            .years {
+                display: -ms-flexbox;
+                display: -webkit-flex;
+                display: flex;
+                -ms-flex-direction: column;
+                -webkit-flex-direction: column;
+                flex-direction: column;
+            }
+
+            .years li paper-button .current {
+                padding: 5px;
+                color: #1abc9c;
+            }
+
+            .years li paper-button .active {
+                padding: 5px;
+                background: #1abc9c;
+                color: white !important;
+                font-size: 16px;
+            }
+
+            #years {
+                display: none;
+            }
+
+        </style>
+
+        <div class="month">
+            <ul>
+                <paper-button class="prev" on-tap="previousMonth">&#10094;</paper-button>
+                <paper-button class="next" on-tap="nextMonth">&#10095;</paper-button>
+                <li>
+                    <paper-button>{{getMonthValue(month)}}</paper-button>
+                    <br>
+                    <span style="font-size:18px">
+                        <paper-button on-tap="_toggleYearView">{{year}}</paper-button>
+                    </span>
+                </li>
+            </ul>
+        </div>
+
+        <ul class="weekdays" id="weekDays">
+            <li>Su</li>
+            <li>Mo</li>
+            <li>Tu</li>
+            <li>We</li>
+            <li>Th</li>
+            <li>Fr</li>
+            <li>Sa</li>
+        </ul>
+
+        <ul class="days" id="days">
+            <template is="dom-repeat" items="{{_getArrayOfDays(month,year)}}">
+                <li>
+                    <paper-button>
+                        <span class$="{{_getClassDate(item.isCurrentDay)}}">{{item.value}}</span>
+                    </paper-button>
+                </li>
+            </template>
+        </ul>
+
+        <ul id="years" class="years" hidden$="{{!showYear}}">
+            <paper-button on-tap="previousYear">
+                <svg width="25" height="25">
+                    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+                </svg>
+            </paper-button>
+            <template is="dom-repeat" items="{{_getArrayOfYears(year)}}">
+                <li>
+                    <paper-button data-year$="{{item.value}}" on-tap="_setYear">
+                        <span class$="{{_getClassYear(item.isCurrentYear, item.isActiveYear)}}">{{item.value}}</span>
+                    </paper-button>
+                </li>
+            </template>
+            <paper-button on-tap="nextYear">
+                <svg width="25" height="25">
+                    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+                </svg>
+            </paper-button>
+        </ul>
+
+
+
+        <!-- <li>
+        <span class="active">10</span>
+      </li> -->
+    </template>
+
+    <script>
+        /**
+         * `caribou-datepicker`
+         * Polymer 2 element used to select a date picker following material design.
+         *
+         * @customElement
+         * @polymer
+         * @demo demo/index.html
+         */
+        class CaribouCalendarElement extends Polymer.Element {
+            static get is() {
+                return 'caribou-calendar';
+            }
+
+            static get properties() {
+                return {
+                    year: {
+                        type: Number
+                    },
+
+                    currentYear: {
+                        type: Number
+                    },
+
+                    month: {
+                        type: Number
+                    },
+
+                    currentMonth: {
+                        type: Number
+                    },
+
+                    date: {
+                        type: Number
+                    },
+
+                    currentDate: {
+                        type: Number
+                    },
+
+                    /**
+                     * Sunday is 0 and monday is 1.
+                     * This is the number of the day
+                     */
+                    day: {
+                        type: Number
+                    },
+
+                    /**
+                     * Sunday is 0 and monday is 1.
+                     * This is the number of the current day
+                     */
+                    currentDay: {
+                        type: Number
+                    },
+
+                    __daysValue: {
+                        type: Array,
+                        value: function () {
+                            return [
+                                "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
+                            ];
+                        },
+                        readOnly: true
+                    },
+
+                    __monthsValue: {
+                        type: Array,
+                        value: function () {
+                            return ["January", "February", "March", "April", "May", "June", "July", "August",
+                                "September", "October", "November", "December"
+                            ];
+                        },
+                        readOnly: true
+                    },
+
+                    showYear: {
+                        type: Boolean,
+                        value: false
+                    }
+                };
+            }
+
+            ready() {
+                super.ready();
+                this.getCurrentDate();
+            }
+
+            /**
+             * Initialize the properties with the current values.
+             */
+            getCurrentDate() {
+                var today = new Date();
+                this.currentDate = today.getDate();
+                this.date = this.currentDate;
+                this.currentMonth = today.getMonth();
+                this.month = this.currentMonth;
+                this.currentYear = today.getFullYear();
+                this.year = this.currentYear;
+                this.currentDay = today.getDay();
+                this.day = this.currentDay;
+            }
+
+            /**
+             * Return the day value of the current number.
+             * @param {Number} day This is the number of the day. (0-6)
+             * @return {String} The day value.
+             */
+            getDayValue(day) {
+                return this.__daysValue[day];
+            }
+
+            /** 
+             * Return the month value of the current number. 
+             * @param {Number} day This is the number of the month. (1 to 12)  
+             * @return {String} The month value. 
+             */
+            getMonthValue(month) {
+                return this.__monthsValue[month];
+            }
+
+            /**
+             * Return the number of day in a month
+             * @param {Number} month The month number
+             * @param {Number} year The year number
+             * @return {Number} The number of day in a month
+             */
+            getNumberOfDaysInMonth(month, year) {
+                return new Date(year, month + 1, 0).getDate();
+            }
+
+            /**
+             * Return the number of the first day in the month
+             * @param {Number} month The month number
+             * @param {Number} year The year number
+             * @return {Number} An array of integer, the length is the number of the day in the month
+             */
+            getFirstMonthDay(month, year) {
+                return new Date(year, month + 1, 1).getDay();
+            }
+
+
+            _getArrayOfDays(month, year) {
+                let daysInMonth;
+                let firstDayOfWeek;
+                let daysArray = new Array();
+                if (month !== undefined && year !== undefined) {
+
+                    // Get the first day of the week.
+                    // We do -1 because we will use it 0 base.
+                    firstDayOfWeek = this.getFirstMonthDay(month, year);
+                    // Get the number of days in the month
+                    daysInMonth = this.getNumberOfDaysInMonth(month, year);
+
+                    //day number increment
+                    let j = 0
+
+                    for (var i = firstDayOfWeek; i < daysInMonth + firstDayOfWeek; i++) {
+                        j = j + 1;
+                        let isCurrentDay = false;
+                        if (this.currentMonth === month && this.currentYear === year && this.currentDate === j) {
+                            isCurrentDay = true;
+                        }
+
+                        daysArray[i] = {
+                            value: j,
+                            isCurrentDay: isCurrentDay,
+                        };
+                    }
+                    return daysArray;
+
+                }
+            }
+
+
+            _getArrayOfYears() {
+                let yearsArray = new Array();
+                yearsArray[0] = this._getYearObject(Number(this.year) - 3, false);
+                yearsArray[1] = this._getYearObject(Number(this.year) - 2, false);
+                yearsArray[2] = this._getYearObject(Number(this.year) - 1, false);
+                yearsArray[3] = this._getYearObject(Number(this.year), true);
+                yearsArray[4] = this._getYearObject(Number(this.year) + 1, false);
+                yearsArray[5] = this._getYearObject(Number(this.year) + 2, false);
+                yearsArray[6] = this._getYearObject(Number(this.year) + 3, false);
+
+                return yearsArray;
+            }
+
+            _getYearObject(year, isActiveYear) {
+                let isCurrentYear = false;
+                if (this.currentYear === year)
+                    isCurrentYear = true;
+
+                return {
+                    value: year,
+                    isCurrentYear: isCurrentYear,
+                    isActiveYear: isActiveYear
+                };
+            }
+
+            _getClassDate(isCurrentDay) {
+                if (isCurrentDay) return "active";
+            }
+
+            _getClassYear(isCurrentYear, isActiveYear) {
+                if (isActiveYear) return "active";
+                if (isCurrentYear) return "current";
+            }
+
+            previousMonth() {
+                var prevMonth = new Date(this.year, this.month, 0);
+                this.date = prevMonth.getDate();
+                this.month = prevMonth.getMonth();
+                this.year = prevMonth.getFullYear();
+                this.day = prevMonth.getDay();
+            }
+
+            nextMonth() {
+                var nextMonth = new Date(this.year, this.month + 1, 1);
+                this.date = nextMonth.getDate();
+                this.month = nextMonth.getMonth();
+                this.year = nextMonth.getFullYear();
+                this.day = nextMonth.getDay();
+            }
+
+            nextYear() {
+                this.year = Number(this.year) + 1;
+            }
+
+            previousYear() {
+                this.year = Number(this.year) - 1;
+            }
+
+            _setYear(e) {
+                this.year = e.currentTarget.dataset.year;
+                this._toggleYearView();
+            }
+
+            _toggleYearView() {
+                this.showYear = !this.showYear;
+                if (this.showYear) {
+                    this.$.weekDays.style.display = "none";
+                    this.$.years.style.display = "block";
+                    this.$.days.style.display = "none";
+                } else {
+                    this.$.weekDays.style.display = "block";
+                    this.$.years.style.display = "none";
+                    this.$.days.style.display = "block";
+                }
+            }
+        }
+
+        window.customElements.define(CaribouCalendarElement.is, CaribouCalendarElement);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/caribou-datepicker-overlay.html b/caribou-datepicker-overlay.html
new file mode 100644
index 0000000..3e7b8d2
--- /dev/null
+++ b/caribou-datepicker-overlay.html
@@ -0,0 +1,43 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="caribou-month.html">
+
+<dom-module id="caribou-datepicker-overlay">
+    <template>
+        <style>
+            :host {
+                display: block;
+            }
+        </style>
+
+        <caribou-month></caribou-month>
+    </template>
+
+    <script>
+        /**
+         * `caribou-datepicker`
+         * Polymer 2 element used to select a date picker following material design.
+         *
+         * @customElement
+         * @polymer
+         * @demo demo/index.html
+         */
+        class CaribouDatepickerOverlayElement extends Polymer.Element {
+            static get is() {
+                return 'caribou-datepicker-overlay';
+            }
+
+            static get properties() {
+                return {
+
+                };
+            }
+
+            ready() {
+                super.ready();
+            }
+
+        }
+
+        window.customElements.define(CaribouDatepickerOverlayElement.is, CaribouDatepickerOverlayElement);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/caribou-datepicker.html b/caribou-datepicker.html
index f88f5bf..99dca2c 100644
--- a/caribou-datepicker.html
+++ b/caribou-datepicker.html
@@ -3,8 +3,12 @@
 <link rel="import" href="../paper-input/paper-input-error.html">
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../iron-dropdown/iron-dropdown.html">
 <link rel="import" href="caribou-date-input.html">
 <link rel="import" href="caribou-datepicker-custom-icons.html">
+<link rel="import" href="caribou-datepicker-overlay.html">
+
+
 
 <dom-module id="caribou-datepicker">
   <template>
@@ -13,116 +17,11 @@
         display: block;
       }
 
-      ul {
-        list-style-type: none;
-      }
-
-      body {
-        font-family: Verdana, sans-serif;
-      }
-
-      /* Month header */
-
-      .month {
-        padding: 70px 25px;
-        width: 100%;
-        background: #1abc9c;
-        text-align: center;
-      }
-
-      /* Month list */
-
-      .month ul {
-        margin: 0;
-        padding: 0;
-      }
-
-      .month ul li {
-        color: white;
-        font-size: 20px;
-        text-transform: uppercase;
-        letter-spacing: 3px;
-      }
-
-      /* Previous button inside month header */
-
-      .month .prev {
-        float: left;
-        padding-top: 10px;
-      }
-
-      /* Next button */
-
-      .month .next {
-        float: right;
-        padding-top: 10px;
-      }
-
-      /* Weekdays
-(Mon-Sun) */
-
-      .weekdays {
-        margin: 0;
-        padding: 10px 0;
-        background-color: #ddd;
-      }
-
-      .weekdays li {
-        display: inline-block;
-        width: 13.6%;
-        color: #666;
-        text-align: center;
-      }
-
-      /* Days (1-31) */
-
-      .days {
-        padding: 10px 0;
-        background: #eee;
-        margin: 0;
-      }
-
-      .days li {
-        list-style-type: none;
-        display: inline-block;
-        width: 13.6%;
-        text-align: center;
-        margin-bottom: 5px;
-        font-size: 12px;
-        color: #777;
-      }
-
-      /* Highlight the "current" day */
-
-      .days li .active {
-        padding: 5px;
-        background: #1abc9c;
-        color: white !important
-      }
-
-      .years {
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        -ms-flex-direction: column;
-        -webkit-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .years li paper-button .current {
-        padding: 5px;
-        color: #1abc9c;
-      }
-
-      .years li paper-button .active {
-        padding: 5px;
-        background: #1abc9c;
-        color: white !important;
-        font-size: 16px;
-      }
-
-      #years {
-        display: none;
+      [slot=dropdown-content] {
+        background-color: red;
+        line-height: 20px;
+        border-radius: 3px;
+        box-shadow: 0px 2px 6px #ccc;
       }
 
       /* #calendarIcon {
@@ -133,71 +32,16 @@
     <paper-input-container always-float-label auto-validate attr-for-value="value">
       <label slot="label">Date</label>
       <caribou-date-input class="paper-input-input" slot="input"></caribou-date-input>
-      <paper-icon-button id="calendarIcon" slot="suffix" icon="caribou-datepicker-icons:calendar"></paper-icon-button>
+      <paper-icon-button id="calendarIcon" slot="suffix" on-tap="open" icon="caribou-datepicker-icons:calendar"></paper-icon-button>
       <paper-input-error slot="add-on">Error!</paper-input-error>
     </paper-input-container>
 
+    <iron-dropdown id="dropdown" opened>
+      <div slot="dropdown-content">
+        <caribou-datepicker-overlay></caribou-datepicker-overlay>
+      </div>
+    </iron-dropdown>
 
-
-    <div class="month">
-      <ul>
-        <paper-button class="prev" on-tap="previousMonth">&#10094;</paper-button>
-        <paper-button class="next" on-tap="nextMonth">&#10095;</paper-button>
-        <li>
-          <paper-button>{{getMonthValue(month)}}</paper-button>
-          <br>
-          <span style="font-size:18px">
-            <paper-button on-tap="_toggleYearView">{{year}}</paper-button>
-          </span>
-        </li>
-      </ul>
-    </div>
-
-    <ul class="weekdays" id="weekDays">
-      <li>Su</li>
-      <li>Mo</li>
-      <li>Tu</li>
-      <li>We</li>
-      <li>Th</li>
-      <li>Fr</li>
-      <li>Sa</li>
-    </ul>
-
-    <ul class="days" id="days">
-      <template is="dom-repeat" items="{{_getArrayOfDays(month,year)}}">
-        <li>
-          <paper-button>
-            <span class$="{{_getClassDate(item.isCurrentDay)}}">{{item.value}}</span>
-          </paper-button>
-        </li>
-      </template>
-    </ul>
-
-    <ul id="years" class="years" hidden$="{{!showYear}}">
-      <paper-button on-tap="previousYear">
-        <svg width="25" height="25">
-          <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
-        </svg>
-      </paper-button>
-      <template is="dom-repeat" items="{{_getArrayOfYears(year)}}">
-        <li>
-          <paper-button data-year$="{{item.value}}" on-tap="_setYear">
-            <span class$="{{_getClassYear(item.isCurrentYear, item.isActiveYear)}}">{{item.value}}</span>
-          </paper-button>
-        </li>
-      </template>
-      <paper-button on-tap="nextYear">
-        <svg width="25" height="25">
-          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
-        </svg>
-      </paper-button>
-    </ul>
-
-
-
-    <!-- <li>
-        <span class="active">10</span>
-      </li> -->
   </template>
 
   <script>
@@ -210,246 +54,23 @@
      * @demo demo/index.html
      */
     class CaribouDatepicker extends Polymer.Element {
+      // class CaribouDatepicker extends Polymer.Element {
       static get is() {
         return 'caribou-datepicker';
       }
 
       static get properties() {
-        return {
-          year: {
-            type: Number
-          },
-
-          currentYear: {
-            type: Number
-          },
-
-          month: {
-            type: Number
-          },
-
-          currentMonth: {
-            type: Number
-          },
-
-          date: {
-            type: Number
-          },
-
-          currentDate: {
-            type: Number
-          },
-
-          /**
-           * Sunday is 0 and monday is 1.
-           * This is the number of the day
-           */
-          day: {
-            type: Number
-          },
-
-          /**
-           * Sunday is 0 and monday is 1.
-           * This is the number of the current day
-           */
-          currentDay: {
-            type: Number
-          },
-
-          __daysValue: {
-            type: Array,
-            value: function () {
-              return [
-                "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"
-              ];
-            },
-            readOnly: true
-          },
-
-          __monthsValue: {
-            type: Array,
-            value: function () {
-              return ["January", "February", "March", "April", "May", "June", "July", "August",
-                "September", "October", "November", "December"
-              ];
-            },
-            readOnly: true
-          },
-
-          showYear: {
-            type: Boolean,
-            value: false
-          }
-        };
+        return {}
       }
 
       ready() {
         super.ready();
-        this.getCurrentDate();
-      }
-
-      /**
-       * Initialize the properties with the current values.
-       */
-      getCurrentDate() {
-        var today = new Date();
-        this.currentDate = today.getDate();
-        this.date = this.currentDate;
-        this.currentMonth = today.getMonth();
-        this.month = this.currentMonth;
-        this.currentYear = today.getFullYear();
-        this.year = this.currentYear;
-        this.currentDay = today.getDay();
-        this.day = this.currentDay;
-      }
-
-      /**
-       * Return the day value of the current number.
-       * @param {Number} day This is the number of the day. (0-6)
-       * @return {String} The day value.
-       */
-      getDayValue(day) {
-        return this.__daysValue[day];
-      }
-
-      /** 
-       * Return the month value of the current number. 
-       * @param {Number} day This is the number of the month. (1 to 12)  
-       * @return {String} The month value. 
-       */
-      getMonthValue(month) {
-        return this.__monthsValue[month];
       }
 
-      /**
-       * Return the number of day in a month
-       * @param {Number} month The month number
-       * @param {Number} year The year number
-       * @return {Number} The number of day in a month
-       */
-      getNumberOfDaysInMonth(month, year) {
-        return new Date(year, month + 1, 0).getDate();
+      open() {
+        this.$.dropdown.open()
       }
 
-      /**
-       * Return the number of the first day in the month
-       * @param {Number} month The month number
-       * @param {Number} year The year number
-       * @return {Number} An array of integer, the length is the number of the day in the month
-       */
-      getFirstMonthDay(month, year) {
-        return new Date(year, month + 1, 1).getDay();
-      }
-
-
-      _getArrayOfDays(month, year) {
-        let daysInMonth;
-        let firstDayOfWeek;
-        let daysArray = new Array();
-        if (month !== undefined && year !== undefined) {
-
-          // Get the first day of the week.
-          // We do -1 because we will use it 0 base.
-          firstDayOfWeek = this.getFirstMonthDay(month, year);
-          // Get the number of days in the month
-          daysInMonth = this.getNumberOfDaysInMonth(month, year);
-
-          //day number increment
-          let j = 0
-
-          for (var i = firstDayOfWeek; i < daysInMonth + firstDayOfWeek; i++) {
-            j = j + 1;
-            let isCurrentDay = false;
-            if (this.currentMonth === month && this.currentYear === year && this.currentDate === j) {
-              isCurrentDay = true;
-            }
-
-            daysArray[i] = {
-              value: j,
-              isCurrentDay: isCurrentDay,
-            };
-          }
-          return daysArray;
-
-        }
-      }
-
-
-      _getArrayOfYears() {
-        let yearsArray = new Array();
-        yearsArray[0] = this._getYearObject(Number(this.year) - 3, false);
-        yearsArray[1] = this._getYearObject(Number(this.year) - 2, false);
-        yearsArray[2] = this._getYearObject(Number(this.year) - 1, false);
-        yearsArray[3] = this._getYearObject(Number(this.year), true);
-        yearsArray[4] = this._getYearObject(Number(this.year) + 1, false);
-        yearsArray[5] = this._getYearObject(Number(this.year) + 2, false);
-        yearsArray[6] = this._getYearObject(Number(this.year) + 3, false);
-
-        return yearsArray;
-      }
-
-      _getYearObject(year, isActiveYear) {
-        let isCurrentYear = false;
-        if (this.currentYear === year)
-          isCurrentYear = true;
-
-        return {
-          value: year,
-          isCurrentYear: isCurrentYear,
-          isActiveYear: isActiveYear
-        };
-      }
-
-      _getClassDate(isCurrentDay) {
-        if (isCurrentDay) return "active";
-      }
-
-      _getClassYear(isCurrentYear, isActiveYear) {
-        if (isActiveYear) return "active";
-        if (isCurrentYear) return "current";
-      }
-
-      previousMonth() {
-        var prevMonth = new Date(this.year, this.month, 0);
-        this.date = prevMonth.getDate();
-        this.month = prevMonth.getMonth();
-        this.year = prevMonth.getFullYear();
-        this.day = prevMonth.getDay();
-      }
-
-      nextMonth() {
-        var nextMonth = new Date(this.year, this.month + 1, 1);
-        this.date = nextMonth.getDate();
-        this.month = nextMonth.getMonth();
-        this.year = nextMonth.getFullYear();
-        this.day = nextMonth.getDay();
-      }
-
-      nextYear() {
-        this.year = Number(this.year) + 1;
-      }
-
-      previousYear() {
-        this.year = Number(this.year) - 1;
-      }
-
-      _setYear(e) {
-        this.year = e.currentTarget.dataset.year;
-        this._toggleYearView();
-      }
-
-      _toggleYearView() {
-        this.showYear = !this.showYear;
-        if (this.showYear) {
-          this.$.weekDays.style.display = "none";
-          this.$.years.style.display = "block";
-          this.$.days.style.display = "none";
-        } else {
-          this.$.weekDays.style.display = "block";
-          this.$.years.style.display = "none";
-          this.$.days.style.display = "block";
-        }
-      }
     }
 
     window.customElements.define(CaribouDatepicker.is, CaribouDatepicker);
diff --git a/caribou-month.html b/caribou-month.html
new file mode 100644
index 0000000..2e70a46
--- /dev/null
+++ b/caribou-month.html
@@ -0,0 +1,341 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../paper-button/paper-button.html">
+
+<dom-module id="caribou-month">
+    <template>
+        <style>
+            :host {
+                display: block;
+            }
+
+            ul {
+                list-style-type: none;
+            }
+
+            body {
+                font-family: Verdana, sans-serif;
+            }
+
+            /* Month header */
+
+            .month {
+                padding: 70px 25px;
+                width: 100%;
+                background: #1abc9c;
+                text-align: center;
+            }
+
+            /* Month list */
+
+            .month ul {
+                margin: 0;
+                padding: 0;
+            }
+
+            .month ul li {
+                color: white;
+                font-size: 20px;
+                text-transform: uppercase;
+                letter-spacing: 3px;
+            }
+
+            /* Previous button inside month header */
+
+            .month .prev {
+                float: left;
+                padding-top: 10px;
+            }
+
+            /* Next button */
+
+            .month .next {
+                float: right;
+                padding-top: 10px;
+            }
+
+            /* Weekdays
+(Mon-Sun) */
+
+            .weekdays {
+                margin: 0;
+                padding: 10px 0;
+                background-color: #ddd;
+            }
+
+            .weekdays li {
+                display: inline-block;
+                width: 13.6%;
+                color: #666;
+                text-align: center;
+            }
+
+            /* Days (1-31) */
+
+            .days {
+                padding: 10px 0;
+                background: #eee;
+                margin: 0;
+            }
+
+            .days li {
+                list-style-type: none;
+                display: inline-block;
+                width: 13.6%;
+                text-align: center;
+                margin-bottom: 5px;
+                font-size: 12px;
+                color: #777;
+            }
+
+            /* Highlight the "current" day */
+
+            .days li .active {
+                padding: 5px;
+                background: #1abc9c;
+                color: white !important
+            }
+        </style>
+
+        <div class="month">
+            <ul>
+                <paper-button class="prev" on-tap="previousMonth">&#10094;</paper-button>
+                <paper-button class="next" on-tap="nextMonth">&#10095;</paper-button>
+                <li>
+                    <paper-button>{{getMonthValue(month)}}</paper-button>
+                    <br>
+                    <span style="font-size:18px">
+                        <paper-button on-tap="_toggleYearView">{{year}}</paper-button>
+                    </span>
+                </li>
+            </ul>
+        </div>
+
+        <ul class="weekdays" id="weekDays">
+            <li>Su</li>
+            <li>Mo</li>
+            <li>Tu</li>
+            <li>We</li>
+            <li>Th</li>
+            <li>Fr</li>
+            <li>Sa</li>
+        </ul>
+        <ul class="days" id="days">
+            <template is="dom-repeat" items="{{_getArrayOfDays(month,year)}}">
+                <li>
+                    <paper-button on-tap="dateSelected" data-dday$="{{item.value}}">
+                        <span class$="{{_getClassDate(item.isCurrentDay)}}">{{item.value}}</span>
+                    </paper-button>
+                </li>
+            </template>
+        </ul>
+    </template>
+
+    <script>
+        /**
+         * `caribou-datepicker`
+         * Polymer 2 element used to select a date picker following material design.
+         *
+         * @customElement
+         * @polymer
+         * @demo demo/index.html
+         */
+        class CaribouMonthElement extends Polymer.Element {
+            static get is() {
+                return 'caribou-month';
+            }
+
+            static get properties() {
+                return {
+                    year: {
+                        type: Number
+                    },
+
+                    currentYear: {
+                        type: Number
+                    },
+
+                    month: {
+                        type: Number
+                    },
+
+                    currentMonth: {
+                        type: Number
+                    },
+
+                    date: {
+                        type: Number
+                    },
+
+                    currentDate: {
+                        type: Number
+                    },
+
+                    /**
+                     * Sunday is 0 and monday is 1.
+                     * This is the number of the day
+                     */
+                    day: {
+                        type: Number
+                    },
+
+                    /**
+                     * Sunday is 0 and monday is 1.
+                     * This is the number of the current day
+                     */
+                    currentDay: {
+                        type: Number
+                    },
+
+                    __daysValue: {
+                        type: Array,
+                        value: function () {
+                            return [
+                                "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday",
+                                "Sunday"
+                            ];
+                        },
+                        readOnly: true
+                    },
+
+                    __monthsValue: {
+                        type: Array,
+                        value: function () {
+                            return ["January", "February", "March", "April", "May", "June", "July",
+                                "August",
+                                "September", "October", "November", "December"
+                            ];
+                        },
+                        readOnly: true
+                    }
+                };
+            }
+
+            ready() {
+                super.ready();
+                this.getCurrentDate();
+            }
+
+            /**
+             * Initialize the properties with the current values.
+             */
+            getCurrentDate() {
+                var today = new Date();
+                this.currentDate = today.getDate();
+                this.date = this.currentDate;
+                this.currentMonth = today.getMonth();
+                this.month = this.currentMonth;
+                this.currentYear = today.getFullYear();
+                this.year = this.currentYear;
+                this.currentDay = today.getDay();
+                this.day = this.currentDay;
+            }
+
+            /**
+             * Return the day value of the current number.
+             * @param {Number} day This is the number of the day. (0-6)
+             * @return {String} The day value.
+             */
+            getDayValue(day) {
+                return this.__daysValue[day];
+            }
+
+            /** 
+             * Return the month value of the current number. 
+             * @param {Number} day This is the number of the month. (1 to 12)  
+             * @return {String} The month value. 
+             */
+            getMonthValue(month) {
+                return this.__monthsValue[month];
+            }
+
+            /**
+             * Return the number of day in a month
+             * @param {Number} month The month number
+             * @param {Number} year The year number
+             * @return {Number} The number of day in a month
+             */
+            getNumberOfDaysInMonth(month, year) {
+                return new Date(year, month + 1, 0).getDate();
+            }
+
+            /**
+             * Return the number of the first day in the month
+             * @param {Number} month The month number
+             * @param {Number} year The year number
+             * @return {Number} An array of integer, the length is the number of the day in the month
+             */
+            getFirstMonthDay(month, year) {
+                return new Date(year, month + 1, 1).getDay();
+            }
+
+
+            _getArrayOfDays(month, year) {
+                let daysInMonth;
+                let firstDayOfWeek;
+                let daysArray = new Array();
+                if (month !== undefined && year !== undefined) {
+
+                    // Get the first day of the week.
+                    // We do -1 because we will use it 0 base.
+                    firstDayOfWeek = this.getFirstMonthDay(month, year);
+                    // Get the number of days in the month
+                    daysInMonth = this.getNumberOfDaysInMonth(month, year);
+
+                    //day number increment
+                    let j = 0
+
+                    for (var i = firstDayOfWeek; i < daysInMonth + firstDayOfWeek; i++) {
+                        j = j + 1;
+                        let isCurrentDay = false;
+                        if (this.currentMonth === month && this.currentYear === year && this.currentDate === j) {
+                            isCurrentDay = true;
+                        }
+
+                        daysArray[i] = {
+                            value: j,
+                            isCurrentDay: isCurrentDay,
+                        };
+                    }
+                    return daysArray;
+
+                }
+            }
+
+            _getClassDate(isCurrentDay) {
+                if (isCurrentDay) return "active";
+            }
+
+            _getClassYear(isCurrentYear, isActiveYear) {
+                if (isActiveYear) return "active";
+                if (isCurrentYear) return "current";
+            }
+
+            previousMonth() {
+                var prevMonth = new Date(this.year, this.month, 0);
+                this.date = prevMonth.getDate();
+                this.month = prevMonth.getMonth();
+                this.year = prevMonth.getFullYear();
+                this.day = prevMonth.getDay();
+            }
+
+            nextMonth() {
+                var nextMonth = new Date(this.year, this.month + 1, 1);
+                this.date = nextMonth.getDate();
+                this.month = nextMonth.getMonth();
+                this.year = nextMonth.getFullYear();
+                this.day = nextMonth.getDay();
+            }
+
+            _toggleYearView() {
+                console.log("FIRE EVENT TO DISPLAY YEAR VIEW");
+            }
+
+            dateSelected(e) {
+                var date = e.currentTarget.dataset.dday;
+                console.log("Date selected : " + date + " / " + (Number(this.month) + 1) + " / " + this.year);
+            }
+        }
+
+        window.customElements.define(CaribouMonthElement.is, CaribouMonthElement);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/caribou-year.html b/caribou-year.html
new file mode 100644
index 0000000..ee80a35
--- /dev/null
+++ b/caribou-year.html
@@ -0,0 +1,139 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../paper-button/paper-button.html">
+
+<dom-module id="caribou-year">
+    <template>
+        <style>
+            :host {
+                display: block;
+            }
+            
+            ul {
+                list-style-type: none;
+            }
+
+            .years {
+                display: -ms-flexbox;
+                display: -webkit-flex;
+                display: flex;
+                -ms-flex-direction: column;
+                -webkit-flex-direction: column;
+                flex-direction: column;
+            }
+
+            .years li paper-button .current {
+                padding: 5px;
+                color: #1abc9c;
+            }
+
+            .years li paper-button .active {
+                padding: 5px;
+                background: #1abc9c;
+                color: white !important;
+                font-size: 16px;
+            }
+
+           
+        </style>
+
+        <ul id="years" class="years">
+            <paper-button on-tap="previousYear">
+                <svg width="25" height="25">
+                    <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+                </svg>
+            </paper-button>
+            <template is="dom-repeat" items="{{_getArrayOfYears(year)}}">
+                <li>
+                    <paper-button data-year$="{{item.value}}" on-tap="_setYear">
+                        <span class$="{{_getClassYear(item.isCurrentYear, item.isActiveYear)}}">{{item.value}}</span>
+                    </paper-button>
+                </li>
+            </template>
+            <paper-button on-tap="nextYear">
+                <svg width="25" height="25">
+                    <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+                </svg>
+            </paper-button>
+        </ul>
+    </template>
+
+    <script>
+        /**
+         * `caribou-datepicker`
+         * Polymer 2 element used to select a date picker following material design.
+         *
+         * @customElement
+         * @polymer
+         * @demo demo/index.html
+         */
+        class CaribouYearElement extends Polymer.Element {
+            static get is() {
+                return 'caribou-year';
+            }
+
+            static get properties() {
+                return {
+                    year: {
+                        type: Number
+                    },
+
+                    currentYear: {
+                        type: Number
+                    }
+                };
+            }
+
+            ready() {
+                super.ready();
+                console.log("SET YEAR BUILT IN");
+                this.year = 2018;
+
+            }
+
+            _getArrayOfYears() {
+                let yearsArray = new Array();
+                yearsArray[0] = this._getYearObject(Number(this.year) - 3, false);
+                yearsArray[1] = this._getYearObject(Number(this.year) - 2, false);
+                yearsArray[2] = this._getYearObject(Number(this.year) - 1, false);
+                yearsArray[3] = this._getYearObject(Number(this.year), true);
+                yearsArray[4] = this._getYearObject(Number(this.year) + 1, false);
+                yearsArray[5] = this._getYearObject(Number(this.year) + 2, false);
+                yearsArray[6] = this._getYearObject(Number(this.year) + 3, false);
+
+                return yearsArray;
+            }
+
+            _getYearObject(year, isActiveYear) {
+                let isCurrentYear = false;
+                if (this.currentYear === year)
+                    isCurrentYear = true;
+
+                return {
+                    value: year,
+                    isCurrentYear: isCurrentYear,
+                    isActiveYear: isActiveYear
+                };
+            }
+
+            _getClassYear(isCurrentYear, isActiveYear) {
+                if (isActiveYear) return "active";
+                if (isCurrentYear) return "current";
+            }
+
+            nextYear() {
+                this.year = Number(this.year) + 1;
+            }
+
+            previousYear() {
+                this.year = Number(this.year) - 1;
+            }
+
+            _setYear(e) {
+                this.year = e.currentTarget.dataset.year;
+                console.log("Year selected : " + this.year);
+            }
+        }
+
+        window.customElements.define(CaribouYearElement.is, CaribouYearElement);
+    </script>
+</dom-module>
\ No newline at end of file