diff --git a/bower.json b/bower.json
index eb51d922..5bbab50b 100644
--- a/bower.json
+++ b/bower.json
@@ -20,7 +20,14 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0"
+    "iron-dropdown": "polymerelements/iron-dropdown#~1.1.0",
+    "iron-icon": "polymerelements/iron-icon#~1.0.7",
+    "iron-icons": "polymerelements/iron-icons#~1.1.2",
+    "iron-input": "polymerelements/iron-input#~1.0.8",
+    "iron-list": "polymerelements/iron-list#~1.0.0",
+    "paper-input": "polymerelements/paper-input#~1.1.5",
+    "polymer": "Polymer/polymer#^1.2.0",
+    "paper-styles": "polymerelements/paper-styles#^1.1.3"
   },
   "devDependencies": {
     "web-component-tester": "^4.1.0",
diff --git a/demo/index.html b/demo/index.html
index e69de29b..b9f22010 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vaadin-date-picker Code Examples</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../vaadin-date-picker.html">
+
+  <style is="custom-style">
+    body {
+      background: #f9f9f9;
+    }
+
+    :root {
+      --primary-color: #2899f2;
+    }
+  </style>
+</head>
+
+<body>
+  <vaadin-date-picker label="Pick a date"></vaadin-date-picker>
+  <vaadin-date-picker label="Birthday" value="2000-01-01"></vaadin-date-picker>
+</body>
+
+</html>
diff --git a/index.html b/index.html
index e69de29b..7b7e1293 100644
--- a/index.html
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>vaadin-date-picker</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>
diff --git a/test/basic.html b/test/basic.html
new file mode 100644
index 00000000..9e452f94
--- /dev/null
+++ b/test/basic.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../vaadin-date-picker.html">
+</head>
+
+<body>
+
+  <test-fixture id="datepicker">
+    <template>
+      <vaadin-date-picker></vaadin-date-picker>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('Basic features', function() {
+      var datepicker;
+
+      function monthsEqual(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+      }
+
+      function tap(element) {
+        Polymer.Base.fire('tap', {}, {
+          bubbles: true,
+          node: element
+        });
+      }
+
+      beforeEach(function() {
+        datepicker = fixture('datepicker');
+      });
+
+      it('should have default value', function() {
+        expect(datepicker.value).to.equal('');
+      });
+
+      it('should notify value change', function() {
+        var spy = sinon.spy();
+        datepicker.addEventListener('value-changed', spy);
+        datepicker.value = new Date(2000, 1, 1);
+        expect(spy.calledOnce).to.be.true;
+      });
+
+      it('should open on input tap', function(done) {
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          done();
+        });
+        tap(datepicker.$.input);
+      });
+
+      it('should open on label tap', function(done) {
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          done();
+        });
+        tap(datepicker.$.label);
+      });
+
+      it('should scroll to today by default', function(done) {
+        var spy = sinon.spy(datepicker.$.overlay, 'scrollToDate');
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          expect(monthsEqual(spy.firstCall.args[0], new Date())).to.be.true;
+          done();
+        });
+        datepicker._open();
+      });
+
+      it('should scroll to selected value by default', function(done) {
+        var spy = sinon.spy(datepicker.$.overlay, 'scrollToDate');
+        datepicker.value = new Date(2000, 1, 1);
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          expect(monthsEqual(spy.firstCall.args[0], datepicker.value)).to.be.true;
+          done();
+        });
+        datepicker._open();
+      });
+
+      it('should close on overlay date tap', function(done) {
+        datepicker.addEventListener('iron-overlay-closed', function() {
+          done();
+        });
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          Polymer.Base.fire('date-tap', {}, {
+            bubbles: true,
+            node: datepicker.$.overlay
+          });
+        });
+        datepicker._open();
+      });
+
+      it('should not have label defined by default', function() {
+        expect(datepicker.label).to.be.undefined;
+      });
+
+      it('label should be bound to label element', function() {
+        datepicker.label = 'This is LABEL';
+        expect(datepicker.$.label.innerHTML).to.eql('This is LABEL');
+      });
+
+      it('should clear the value', function() {
+        datepicker.value = new Date(2000, 1, 1);
+        tap(datepicker.$.clear);
+        expect(datepicker.value).to.equal('');
+      });
+
+      it('should format value correctly', function() {
+        datepicker.value = new Date(2000, 1, 1);
+        expect(datepicker.$.input.bindValue).to.equal('2000-02-01');
+        datepicker.value = new Date(1999, 11, 31);
+        expect(datepicker.$.input.bindValue).to.equal('1999-12-31');
+      });
+
+      it('should not show clear icon', function(done) {
+        expect(datepicker.$.clear.clientHeight).to.equal(0);
+        datepicker.value = new Date(2000, 1, 1);
+        expect(datepicker.$.clear.clientHeight).to.equal(0);
+        datepicker.value = '';
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          expect(datepicker.$.clear.clientHeight).to.equal(0);
+          done();
+        });
+        datepicker._open();
+      });
+
+      it('should show clear icon', function(done) {
+        datepicker.value = new Date(2000, 1, 1);
+        datepicker.addEventListener('iron-overlay-opened', function() {
+          expect(datepicker.$.clear.clientHeight).not.to.equal(0);
+          done();
+        });
+        datepicker._open();
+      });
+
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/test/index.html b/test/index.html
index e69de29b..a0c67ccf 100644
--- a/test/index.html
+++ b/test/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>vaadin-date-picker tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html',
+      'overlay.html',
+      'month-calendar.html'
+    ]);
+  </script>
+</body>
+
+</html>
diff --git a/test/month-calendar.html b/test/month-calendar.html
new file mode 100644
index 00000000..3342f00e
--- /dev/null
+++ b/test/month-calendar.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>vaadin-month-calendar basic tests</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../vaadin-month-calendar.html">
+</head>
+
+<body>
+  <test-fixture id="vaadin-month-calendar">
+    <template>
+      <vaadin-month-calendar></vaadin-month-calendar>
+    </template>
+  </test-fixture>
+
+  <script>
+    function tap(element) {
+      Polymer.Base.fire('tap', {}, {
+        bubbles: true,
+        node: element
+      });
+    }
+
+    describe('vaadin-month-calendar', function() {
+      var monthCalendar;
+
+      beforeEach(function(done) {
+        monthCalendar = fixture('vaadin-month-calendar');
+        monthCalendar.month = new Date(2016, 1, 1); // Feb 2016
+
+        valueChangedSpy = sinon.spy();
+        monthCalendar.addEventListener('selected-date-changed', valueChangedSpy);
+
+        // Need to wait for the templates to be rendered.
+        Polymer.Base.async(done);
+      });
+
+      // A helper for creating async test functions for 2016 month rendering.
+      function createMonthTest(monthNumber) {
+        var expectedDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+        return function(done) {
+          monthCalendar.month = new Date(2016, monthNumber, 1);
+          Polymer.Base.async(function() {
+            var numberOfDays = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)').length;
+            expect(numberOfDays).to.equal(expectedDays[monthNumber]);
+            done();
+          });
+        };
+      }
+
+      // Create 12 tests for each month of 2016.
+      for (var i = 0; i < 12; i++) {
+        it('should render correct number of days for 2016/' + (i + 1), createMonthTest(i));
+      }
+
+      it('should render days in correct order by default', function() {
+        var weekdays = monthCalendar.$.monthGrid.querySelectorAll('div.weekday');
+        var weekdayTitles = Array.prototype.map.call(weekdays, function(weekday) {
+          return weekday.textContent;
+        });
+        expect(weekdayTitles).to.eql(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+      });
+
+      it('should render days in correct order by first day of week', function(done) {
+        monthCalendar._firstDayOfWeek = 1; // Start from Monday.
+
+        Polymer.Base.async(function() {
+          var weekdays = monthCalendar.$.monthGrid.querySelectorAll('div.weekday');
+          var weekdayTitles = Array.prototype.map.call(weekdays, function(weekday) {
+            return weekday.textContent;
+          });
+          expect(weekdayTitles).to.eql(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']);
+          done();
+        });
+      });
+
+      it('should re-render after changing the month', function(done) {
+        monthCalendar.month = new Date(2000, 0, 1); // Feb 2016 -> Jan 2000
+        Polymer.Base.async(function() {
+          var days = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)').length;
+          expect(days).to.equal(31);
+          expect(monthCalendar.$.title.textContent).to.equal('January');
+          done();
+        });
+      });
+
+      it('should fire value change on tap', function() {
+        var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
+        tap(dateElements[10]);
+        expect(valueChangedSpy.calledOnce).to.be.true;
+      });
+
+      it('should fire date-tap on tap', function() {
+        tapSpy = sinon.spy();
+        monthCalendar.addEventListener('date-tap', tapSpy);
+        var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
+        tap(dateElements[10]);
+        expect(tapSpy.calledOnce).to.be.true;
+        tap(dateElements[10]);
+        expect(tapSpy.calledTwice).to.be.true;
+      });
+
+      it('should not fire value change on tapping an empty cell', function() {
+        var emptyDateElement = monthCalendar.$.monthGrid.querySelector('div:not(.weekday):empty');
+        tap(emptyDateElement);
+        expect(valueChangedSpy.called).to.be.false;
+      });
+
+      it('should update value on tap', function() {
+        var dateElements = monthCalendar.$.monthGrid.querySelectorAll('div:not(.weekday):not(:empty)');
+        for (var i = 0; i < dateElements.length; i++) {
+          if (dateElements[i].date.getDate() === 10) {
+            // Tenth of February.
+            tap(dateElements[i]);
+          }
+        }
+        expect(monthCalendar.selectedDate.getFullYear()).to.equal(2016);
+        expect(monthCalendar.selectedDate.getMonth()).to.equal(1);
+        expect(monthCalendar.selectedDate.getDate()).to.equal(10);
+      });
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/test/overlay.html b/test/overlay.html
new file mode 100644
index 00000000..55b48b55
--- /dev/null
+++ b/test/overlay.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="../vaadin-date-picker-overlay.html">
+</head>
+
+<body>
+
+  <test-fixture id="overlay">
+    <template>
+      <vaadin-date-picker-overlay></vaadin-date-picker-overlay>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('vaadin-date-picker-overlay', function() {
+      var overlay;
+
+      beforeEach(function() {
+        overlay = fixture('overlay');
+      });
+
+      function waitUntilScrolledTo(date, callback) {
+        var monthIndex = overlay._differenceInMonths(date, new Date());
+        if (overlay._visibleMonthIndex === monthIndex) {
+          callback();
+        } else {
+          setTimeout(waitUntilScrolledTo, 10, date, callback);
+        }
+      }
+
+      function getFirstVisibleCalendar() {
+        return overlay.$.list._getModelFromItem(overlay._visibleMonthIndex)._children.filter(function(i) {
+          return i.nodeType === 1;
+        })[0];
+      }
+
+      function monthsEqual(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+      }
+
+      it('should reflect the year of currently visible month on the toolbar', function(done) {
+        var date = new Date(2000, 1, 1);
+        overlay.scrollToDate(date);
+        waitUntilScrolledTo(date, function() {
+          expect(parseInt(overlay.$.toolbar.textContent)).to.equal(2000);
+          done();
+        });
+      });
+
+      it('should scroll to the given date', function(done) {
+        var date = new Date(2000, 1, 1);
+        overlay.scrollToDate(date);
+        waitUntilScrolledTo(date, function() {
+          expect(monthsEqual(getFirstVisibleCalendar().month, date)).to.be.true;
+          done();
+        });
+      });
+
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/vaadin-date-picker-overlay.html b/vaadin-date-picker-overlay.html
new file mode 100644
index 00000000..cfd393a4
--- /dev/null
+++ b/vaadin-date-picker-overlay.html
@@ -0,0 +1,127 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-list/iron-list.html">
+<link rel="import" href="../paper-styles/shadow.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="vaadin-month-calendar.html">
+
+<dom-module id="vaadin-date-picker-overlay">
+  <template>
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: #fff;
+        font: inherit;
+        @apply(--paper-font-common-base);
+        @apply(--shadow-elevation-2dp);
+      }
+
+      #toolbar {
+        padding: 1em;
+        background: #eee;
+        @apply(--shadow-elevation-2dp);
+      }
+
+      #scroller {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+      }
+
+      #list {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding-right: 40px;
+        margin-right: -40px;
+        transform: none !important;
+      }
+
+      vaadin-month-calendar {
+        height: 16em;
+      }
+    </style>
+
+    <div id="toolbar">[[_yearAfterXMonths(_originDate, _visibleMonthIndex)]]</div>
+
+    <div id="scroller">
+      <iron-list id="list" items="[[_months]]" as="monthIndex" on-scroll="_onListScroll">
+        <template>
+          <vaadin-month-calendar month="[[_dateAfterXMonths(_originDate, monthIndex)]]" selected-date="{{selectedDate}}"></vaadin-month-calendar>
+        </template>
+      </iron-list>
+    </div>
+
+  </template>
+  <script>
+    Polymer({
+      is: 'vaadin-date-picker-overlay',
+
+      properties: {
+
+        /**
+         * The value for this element.
+         */
+        selectedDate: {
+          type: Date,
+          notify: true
+        },
+
+        _originDate: {
+          value: new Date()
+        },
+
+        _visibleMonthIndex: Number,
+
+        _months: {
+          computed: '_computeMonths(_originIndex)'
+        },
+
+        // As iron-list isn't two way scrollable by default, it needs to be pre-scrolled
+        // to an index in the middle beforehand. This property states the index of the
+        // 'origin' position in the array and also dictates the array size at the same
+        // time.
+        _originIndex: {
+          value: 5000
+        }
+
+      },
+
+      _computeMonths: function(_originIndex) {
+        var months = [];
+        for (var i = -_originIndex; i < _originIndex; i++) {
+          months.push('' + i);
+        }
+        return months;
+      },
+
+      /**
+       * Scrolls the list to the given Date.
+       */
+      scrollToDate: function(date) {
+        this.$.list.scrollToIndex(this._differenceInMonths(date, this._originDate) + this._originIndex);
+      },
+
+      _onListScroll: function() {
+        this._visibleMonthIndex = this.$.list.firstVisibleIndex - this._originIndex;
+      },
+
+      _yearAfterXMonths: function(date, months) {
+        return this._dateAfterXMonths(date, months).getFullYear();
+      },
+
+      _dateAfterXMonths: function(date, months) {
+        var result = new Date(date);
+        result.setMonth(parseInt(months) + date.getMonth());
+        return result;
+      },
+
+      _differenceInMonths: function(date1, date2) {
+        var months = (date1.getFullYear() - date2.getFullYear()) * 12;
+        return months - date2.getMonth() + date1.getMonth();
+      }
+
+    });
+  </script>
+</dom-module>
diff --git a/vaadin-date-picker.html b/vaadin-date-picker.html
index 5cbb389d..49370f08 100644
--- a/vaadin-date-picker.html
+++ b/vaadin-date-picker.html
@@ -1,4 +1,30 @@
+<!--
+@license
+Copyright (c) 2016 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<!--
+`<vaadin-date-picker>` is a date selection field which includes a scrollable
+month calendar view.
+```html
+<vaadin-date-picker label="Birthday"></vaadin-date-picker>
+```
+```js
+datePicker.value = new Date();
+```
+When the selected `value` is changed, a `value-changed` event is triggered.
+@element vaadin-date-picker
+@demo demo/
+-->
+
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-dropdown/iron-dropdown.html">
+<link rel="import" href="../paper-input/paper-input-container.html">
+<link rel="import" href="../iron-input/iron-input.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="vaadin-date-picker-overlay.html">
 
 <dom-module id="vaadin-date-picker">
   <template>
@@ -6,12 +32,96 @@
       :host {
         display: block;
       }
+
+      #overlay {
+        width: 350px;
+        height: 100vh;
+      }
+
+      #inputcontainer:not([hideclear]) #input {
+        margin-right: -24px;
+        display: block;
+      }
+
+      #clear {
+        width: 24px;
+        cursor: pointer;
+      }
+
+      [hideclear] #clear {
+        display: none;
+      }
     </style>
 
+    <paper-input-container id="inputcontainer" hideclear$="[[_hideClearIcon(value, _opened)]]">
+      <label id="label" on-tap="_open">[[label]]</label>
+      <input id="input" readonly is="iron-input" autocomplete="off" bind-value="[[_formatValue(value)]]" type="text" on-tap="_open">
+      <iron-icon id="clear" suffix on-tap="_clear" icon="clear"></iron-icon>
+    </paper-input-container>
+
+    <iron-dropdown id="dropdown" allow-outside-scroll on-iron-overlay-opened="_onOverlayOpened" opened="{{_opened}}">
+      <vaadin-date-picker-overlay id="overlay" on-date-tap="_close" selected-date="{{value}}" class="dropdown-content"></vaadin-date-picker-overlay>
+    </iron-dropdown>
+
   </template>
   <script>
     Polymer({
-      is: 'vaadin-date-picker'
+      is: 'vaadin-date-picker',
+
+      properties: {
+
+        /**
+         * The value for this element.
+         */
+        value: {
+          type: Date,
+          notify: true,
+          value: ''
+        },
+
+        /**
+         * The label for this element.
+         */
+        label: String,
+
+        _opened: Boolean
+      },
+
+      _zeroPad: function(i) {
+        return i < 10 ? '0' + i : i;
+      },
+
+      _formatValue: function(value) {
+        if (value) {
+          return value.getFullYear() + '-' + this._zeroPad(value.getMonth() + 1) + '-' + this._zeroPad(value.getDate());
+        }
+      },
+
+      _open: function() {
+        this.$.dropdown.verticalOffset = this.clientHeight;
+        this.$.dropdown.open();
+      },
+
+      _onOverlayOpened: function() {
+        if (this.value) {
+          this.$.overlay.scrollToDate(this.value);
+        } else {
+          this.$.overlay.scrollToDate(new Date());
+        }
+      },
+
+      _close: function() {
+        this.$.dropdown.close();
+      },
+
+      _hideClearIcon: function(value, opened) {
+        return !value || !opened;
+      },
+
+      _clear: function() {
+        this.value = '';
+      }
+
     });
   </script>
 </dom-module>
diff --git a/vaadin-month-calendar.html b/vaadin-month-calendar.html
new file mode 100644
index 00000000..59560bea
--- /dev/null
+++ b/vaadin-month-calendar.html
@@ -0,0 +1,191 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/typography.html">
+
+<dom-module id="vaadin-month-calendar">
+  <template>
+    <style>
+      :host {
+        display: block;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        font: inherit;
+        @apply(--paper-font-common-base);
+      }
+
+      #title {
+        font-size: 120%;
+        text-align: center;
+        padding: 0.4em 0;
+      }
+
+      #monthGrid {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      #monthGrid div {
+        text-align: center;
+        width: 14.285714286%;
+        box-sizing: border-box;
+        padding: 0.4em 0;
+      }
+
+      #monthGrid div:not(:empty) {
+        cursor: pointer;
+      }
+
+      #monthGrid div.weekday {
+        text-transform: uppercase;
+        font-size: 70%;
+        color: #999;
+        cursor: default;
+      }
+
+      #monthGrid div[today] {
+        position: relative;
+      }
+
+      #monthGrid div[today]:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        border: 2px solid #03a9f4;
+        border-radius: 50%;
+        box-sizing: border-box;
+        width: 1.6em;
+        height: 1.6em;
+        margin-left: -0.8em;
+        margin-top: -0.8em;
+      }
+
+      #monthGrid div[today][selected]:before {
+        border-color: #fff;
+      }
+
+      #monthGrid div[selected] {
+        color: #fff;
+        background: #03a9f4;
+        box-sizing: border-box;
+        border-radius: 2px;
+      }
+    </style>
+
+    <div id="title">[[_getTitle(month, _monthNames)]]</div>
+    <div id="monthGrid" on-tap="_handleTap">
+      <template is="dom-repeat" items="[[_getWeekDayNames(_weekDayNames, _firstDayOfWeek)]]">
+        <div class="weekday">[[item]]</div>
+      </template>
+      <template is="dom-repeat" items="[[_getDays(month, _firstDayOfWeek)]]">
+        <div today$="[[_isToday(item)]]" selected$="[[_isSelected(item, selectedDate)]]" date="[[item]]">[[_getDate(item)]]</div>
+      </template>
+    </div>
+  </template>
+  <script>
+    Polymer({
+      is: 'vaadin-month-calendar',
+
+      properties: {
+
+        /**
+         * A `Date` object defining the month to be displayed. Only year and
+         * month properties are actually used.
+         */
+        month: {
+          type: Date,
+          value: new Date()
+        },
+
+        /**
+         * A `Date` object for the currently selected date.
+         */
+        selectedDate: {
+          type: Date,
+          notify: true
+        },
+
+        _monthNames: {
+          value: [
+            'January', 'February', 'March', 'April', 'May', 'June', 'July',
+            'August', 'September', 'October', 'November', 'December'
+          ]
+        },
+
+        _weekDayNames: {
+          value: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+
+        _firstDayOfWeek: {
+          type: Number,
+          value: 0
+        }
+      },
+
+      _getTitle: function(month) {
+        return this._monthNames[month.getMonth()];
+      },
+
+      _dateEquals: function(date1, date2) {
+        if (date1 && date2) {
+          return date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate();
+        } else {
+          return false;
+        }
+      },
+
+      _dateAdd: function(date, delta) {
+        date.setDate(date.getDate() + delta);
+      },
+
+      _getWeekDayNames: function(weekDayNames, firstDayOfWeek) {
+        return weekDayNames.slice(firstDayOfWeek).concat(weekDayNames.slice(0, firstDayOfWeek));
+      },
+
+      _getDate: function(date) {
+        return date ? date.getDate() : '';
+      },
+
+      _isSelected: function(date, selectedDate) {
+        return this._dateEquals(selectedDate, date);
+      },
+
+      _isToday: function(date) {
+        return this._dateEquals(new Date(), date);
+      },
+
+      _getDays: function() {
+        // First day of the month (at noon).
+        var date = new Date(this.month.getFullYear(), this.month.getMonth(), 1, 12, 0, 0);
+
+        // Rewind to first day of the week.
+        while (date.getDay() !== this._firstDayOfWeek) {
+          this._dateAdd(date, -1);
+        }
+
+        var days = [];
+        var startMonth = date.getMonth();
+        var targetMonth = this.month.getMonth();
+        while (date.getMonth() === targetMonth || date.getMonth() === startMonth) {
+          days.push(date.getMonth() === targetMonth ? new Date(date) : null);
+
+          // Advance to next day.
+          this._dateAdd(date, 1);
+        }
+        return days;
+      },
+
+      _handleTap: function(e) {
+        if (e.target.date) {
+          this.selectedDate = e.target.date;
+          this.fire('date-tap');
+        }
+      }
+
+    });
+  </script>
+</dom-module>
