diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54dfd1027..4681fe670 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 0.2.0
+* Simplify header title layout
+* Add navigation panel popover with indicators
+* Add passive event modifiers for touch events
+* Add 'go to today' with header title click
+* Add 'hover' as visibility option for popovers
+* Redesign popovers to display caret arrows
+* Move DateInfo class into separate file
+* Fix date logic for range intersections
+
 ## 0.1.1
 * Add documentation for custom theming
 * Restructure docs component hierarchy
diff --git a/README.md b/README.md
index b3c5b1914..7b63b42b3 100755
--- a/README.md
+++ b/README.md
@@ -1,17 +1,18 @@
 # V-Calendar
 
-> V-Calendar is a lightweight, dependency-free plugin for building attributed calendars in Vue.js.
+> V-Calendar is a clean and lightweight plugin for building attributed calendars in Vue.js.
 
-Visit http://vcalendar.netlify.com for demos and API reference. This plug-in is currently in beta state.
+Visit https://vcalendar.netlify.com for demos and API reference. This plug-in is currently in beta state.
 
 ## Features
 
 * Display clean and simple attributed calendars
 * Built-in support for various attributes, including
   * highlighted regions
-  * indicators
+  * dot and bar indicators
   * day content styles (hovered and non-hovered)
-* Apply attributes over multiple dates or date ranges (start & end dates)
+* Apply attributes for multiple dates or date ranges (start & end dates)
+* Semantic inspired popover navigation panel with month-level attribute indicators
 * Date-picker supporting all native v-calendar props/events with various selection modes
   * single date
   * multiple dates
@@ -37,6 +38,7 @@ import Vue from 'vue';
 import VCalendar from 'v-calendar';
 import 'v-calendar/lib/v-calendar.min.css';
 
+// Use v-calendar, v-date-picker & v-popover components
 Vue.use(VCalendar);
 ```
 
diff --git a/docs/components/api/props.js b/docs/components/api/props.js
index bd88da1a5..3a5c31187 100644
--- a/docs/components/api/props.js
+++ b/docs/components/api/props.js
@@ -105,8 +105,8 @@ export default [
   },
   {
     name: '<code>popover-visibility: Number</code>',
-    description: '<span class="tag is-warning">Date Picker</span>Visibility state of the popover: Auto: <code>-1</code>, Hidden: <code>0</code>, Visible: <code>1</code>',
-    default: 'Auto: <code>-1</code>',
+    description: '<span class="tag is-warning">Date Picker</span>Visibility state of the popover: <code>"hover"</code>, <code>"focus"</code>, <code>"hidden"</code>, <code>"visible"</code>',
+    default: '<code>"hover"</code>',
   },
   {
     name: '<code>input-class: String</code>',
diff --git a/docs/components/api/sections/SectionApi.vue b/docs/components/api/sections/SectionApi.vue
index cc4803a75..7c8e39f91 100755
--- a/docs/components/api/sections/SectionApi.vue
+++ b/docs/components/api/sections/SectionApi.vue
@@ -1,6 +1,7 @@
 <template>
 <section id='api' class='section'>
   <div class='container'>
+    <h3 class='title has-text-primary is-spaced'>API</h3>
     <b-message type='is-warning'>
       <span class="tag is-warning">Date Picker</span> Denotes API specific to <i>v-date-picker</i> components only.
     </b-message>
diff --git a/docs/components/api/tables/TableApiPage.vue b/docs/components/api/tables/TableApiPage.vue
index 6b56fbf58..67a8fa303 100755
--- a/docs/components/api/tables/TableApiPage.vue
+++ b/docs/components/api/tables/TableApiPage.vue
@@ -65,6 +65,10 @@ export default {
         propertyName: '<code>nextMonthComps: Object</code>',
         description: 'Components <code>{ <i>days</i>, <i>month</i>, <i>year</i> }</code> for the next month.',
       },
+      {
+        propertyName: '<code>position: Number</code>',
+        description: 'Position of the page. Single Pane: <code>0</code>, Left Pane: <code>1</code>, Right Pane: <code>2</code>',
+      },
       {
         propertyName: '<code>move(<i>month</i>, <i>year</i>): Function</code>',
         description: 'Function that moves to a page with a specified month and year.',
diff --git a/docs/components/app/sections/SectionHeader.vue b/docs/components/app/sections/SectionHeader.vue
index c73e94b09..a55b344f1 100755
--- a/docs/components/app/sections/SectionHeader.vue
+++ b/docs/components/app/sections/SectionHeader.vue
@@ -24,9 +24,10 @@
         <nav class='tabs is-boxed'>
           <ul>
             <router-link tag='li' to='/' exact><a>Intro</a></router-link>
-            <router-link tag='li' to='/setup'><a>Setup</a></router-link>
             <router-link tag='li' to='/theming'><a>Theming</a></router-link>
             <router-link tag='li' to='/api'><a>API</a></router-link>
+            <router-link tag='li' to='/gallery'><a>Gallery</a></router-link>
+            <router-link tag='li' to='/setup'><a>Setup</a></router-link>
           </ul>
         </nav>
       </div>
diff --git a/docs/components/app/sections/SectionNavbar.vue b/docs/components/app/sections/SectionNavbar.vue
index b49a97173..6e3f15c6b 100755
--- a/docs/components/app/sections/SectionNavbar.vue
+++ b/docs/components/app/sections/SectionNavbar.vue
@@ -17,10 +17,11 @@
       </div>
       <div class='navbar-menu' :class='{ "is-active": isMenuActive }'>
         <div class='navbar-end'>
-          <router-link class='navbar-item is-hidden-tablet' to='/' exact><a>Intro</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/setup'><a>Setup</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/styling'><a>Styling</a></router-link>
-          <router-link class='navbar-item is-hidden-tablet' to='/api'><a>API</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/' exact><a>Intro</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/theming'><a>Theming</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/api'><a>API</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/gallery'><a>Gallery</a></router-link>
+          <router-link class='navbar-item is-hidden-desktop' to='/setup'><a>Setup</a></router-link>
           <a class='navbar-item' title='Github' href='https://github.com/nathanreyes/v-calendar' target='_blank'>
             <b-icon icon='github'></b-icon>
           </a>
diff --git a/docs/components/blocks/CodeBlock.vue b/docs/components/blocks/CodeBlock.vue
index 89d93947b..e76e470c4 100755
--- a/docs/components/blocks/CodeBlock.vue
+++ b/docs/components/blocks/CodeBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <figure class='highlight' :class=' { "offset": offset }'>
-    <button class='button is-small copy-code'>Copy</button>
+    <button class='button is-small copy-code' v-clipboard:copy='code'>Copy</button>
     <pre v-highlight><code :class='lang'>{{ code }}</code></pre>
   </figure>
 </template>
diff --git a/docs/components/theming/examples/ExStyling-1.vue b/docs/components/gallery/examples/ExStyling-1.vue
similarity index 100%
rename from docs/components/theming/examples/ExStyling-1.vue
rename to docs/components/gallery/examples/ExStyling-1.vue
diff --git a/docs/components/theming/examples/ExStyling-2.vue b/docs/components/gallery/examples/ExStyling-2.vue
similarity index 100%
rename from docs/components/theming/examples/ExStyling-2.vue
rename to docs/components/gallery/examples/ExStyling-2.vue
diff --git a/docs/components/gallery/pages/PageGallery.vue b/docs/components/gallery/pages/PageGallery.vue
new file mode 100755
index 000000000..0cfcde198
--- /dev/null
+++ b/docs/components/gallery/pages/PageGallery.vue
@@ -0,0 +1,15 @@
+<template>
+<div>
+  <section-examples></section-examples>
+</div>
+</template>
+
+<script>
+import SectionExamples from '../sections/SectionExamples';
+
+export default {
+  components: {
+    SectionExamples,
+  },
+};
+</script>
diff --git a/docs/components/theming/sections/SectionExamples.vue b/docs/components/gallery/sections/SectionExamples.vue
similarity index 86%
rename from docs/components/theming/sections/SectionExamples.vue
rename to docs/components/gallery/sections/SectionExamples.vue
index 42eb3de93..8b4c4c2cf 100755
--- a/docs/components/theming/sections/SectionExamples.vue
+++ b/docs/components/gallery/sections/SectionExamples.vue
@@ -1,8 +1,10 @@
 <template>
 <section id='examples' class='section'>
   <div class='container'>
-    <h4 class='title is-4 is-spaced'>Examples</h4>
-    <hr>
+    <h3 class='title has-text-primary is-spaced'>Gallery</h3>
+    <b-message type='is-warning'>
+      <strong>Note:</strong> This page is currently in work.
+    </b-message>
     <div
       class='example'
       v-for='(example, i) in examples'
@@ -42,7 +44,7 @@ export default {
     return {
       examples: [
         {
-          title: 'Datepicker w/ styled header & weekdays',
+          title: 'Date picker w/ styled header & weekdays',
           code: ExStyling1Code,
           component: ExStyling1,
         },
diff --git a/docs/components/home/examples/ExContentStyles.vue b/docs/components/home/examples/ExContentStyles.vue
index b170fbb10..dd85d0f38 100755
--- a/docs/components/home/examples/ExContentStyles.vue
+++ b/docs/components/home/examples/ExContentStyles.vue
@@ -1,7 +1,8 @@
 <template>
   <v-calendar
     :attributes='attributes'
-    is-double-paned>
+    is-double-paned
+    :min-page='minPage'>
   </v-calendar>
 </template>
 
@@ -16,6 +17,10 @@ export default {
       nextMonth,
       nextMonthYear } = getExampleMonthComps();
     return {
+      minPage: {
+        month: 4,
+        year: 2016,
+      },
       attributes: [
         {
           contentStyle: {
diff --git a/docs/components/home/examples/ExDatePicker.vue b/docs/components/home/examples/ExDatePicker.vue
index f2e6033c5..6eb81e759 100755
--- a/docs/components/home/examples/ExDatePicker.vue
+++ b/docs/components/home/examples/ExDatePicker.vue
@@ -6,6 +6,7 @@
     :disabled-dates='showDisabledDates ? disabledDates : null'
     :attributes='[todayAttribute]'
     :is-inline='isInline'
+    :popover-visibility='popoverVisibility'
     :popover-direction='popoverDirection'
     :popover-align='popoverAlign'
     indicators-offset='4px'
@@ -29,6 +30,7 @@ export default {
     showDisabledDates: Boolean,
     isInline: Boolean,
     isExpanded: Boolean,
+    popoverVisibility: { type: String, default: 'hover' },
     popoverDirection: { type: String, default: 'bottom' },
     popoverAlign: { type: String, default: 'left' },
   },
diff --git a/docs/components/home/sections/SectionDatePicker.vue b/docs/components/home/sections/SectionDatePicker.vue
index 84d677e53..f9fdec003 100755
--- a/docs/components/home/sections/SectionDatePicker.vue
+++ b/docs/components/home/sections/SectionDatePicker.vue
@@ -36,6 +36,13 @@
               <b-switch v-model='isInline'>Inline</b-switch>
             </b-field>
             <div v-if='!isInline'>
+              <b-field label='Popover Visibility'>
+                <b-select v-model='popoverVisibility'>
+                  <option v-for='visibility in popoverVisibilities' :value='visibility' :key='visibility'>
+                    {{ visibility }}
+                  </option>
+                </b-select>
+              </b-field>
               <b-field label='Popover Direction'>
                 <b-select v-model='popoverDirection'>
                   <option v-for='direction in popoverDirections' :value='direction' :key='direction'>
@@ -66,6 +73,7 @@
             :mode='mode'
             :show-disabled-dates='showDisabledDates'
             :is-inline='isInline'
+            :popover-visibility='popoverVisibility'
             :popover-direction='popoverDirection'
             :popover-align='popoverAlignment'
             :select-color='selectColor'
@@ -93,6 +101,8 @@ export default {
       selectedValue: null,
       showDisabledDates: false,
       isInline: false,
+      popoverVisibility: 'hover',
+      popoverVisibilities: ['hover', 'focus', 'visible', 'hidden'],
       popoverDirection: 'bottom',
       popoverDirections: ['bottom', 'top', 'left', 'right'],
       popoverAlignment: 'left',
@@ -105,10 +115,10 @@ export default {
       switch (this.popoverDirection) {
         case 'bottom':
         case 'top':
-          return ['left', 'right'];
+          return ['left', 'center', 'right'];
         case 'left':
         case 'right':
-          return ['top', 'bottom'];
+          return ['top', 'middle', 'bottom'];
         default:
           return [];
       }
diff --git a/docs/components/home/sections/SectionIntro.vue b/docs/components/home/sections/SectionIntro.vue
index 8716bf03a..c4a4f8b10 100755
--- a/docs/components/home/sections/SectionIntro.vue
+++ b/docs/components/home/sections/SectionIntro.vue
@@ -32,7 +32,7 @@
               <b-field label='Title Position'>
                 <p class='control'>
                   <b-radio v-model='titlePosition' native-value='left'>Left</b-radio>
-                  <b-radio v-model='titlePosition' native-value=''>Center</b-radio>
+                  <b-radio v-model='titlePosition' native-value='center'>Center</b-radio>
                   <b-radio v-model='titlePosition' native-value='right'>Right</b-radio>
                 </p>
               </b-field>
@@ -86,7 +86,7 @@ export default {
     return {
       exIntroCode: ExIntroCode,
       isDoublePaned: true,
-      titlePosition: '',
+      titlePosition: 'center',
       titleTransition: 'slide-h',
       weeksTransition: 'slide-h',
     };
diff --git a/docs/components/setup/sections/SectionSetup.vue b/docs/components/setup/sections/SectionSetup.vue
index 4e1b9f630..c2007afe4 100755
--- a/docs/components/setup/sections/SectionSetup.vue
+++ b/docs/components/setup/sections/SectionSetup.vue
@@ -1,6 +1,7 @@
 <template>
 <section id='setup' class='section'>
   <div class='container'>
+    <h3 class='title has-text-primary is-spaced'>Setup</h3>
     <b-message type='is-warning'>
       <a href='https://vuejs.org' target='_blank'>Vue.js</a> version <strong>2.4.2+</strong> is required.
     </b-message>
diff --git a/docs/components/theming/pages/PageTheming.vue b/docs/components/theming/pages/PageTheming.vue
index 5c75db0b4..e5a9a1a36 100755
--- a/docs/components/theming/pages/PageTheming.vue
+++ b/docs/components/theming/pages/PageTheming.vue
@@ -2,20 +2,17 @@
 <div>
   <section-intro></section-intro>
   <section-styles></section-styles>
-  <section-examples></section-examples>
 </div>
 </template>
 
 <script>
 import SectionIntro from '../sections/SectionIntro';
 import SectionStyles from '../sections/SectionStyles';
-import SectionExamples from '../sections/SectionExamples';
 
 export default {
   components: {
     SectionIntro,
     SectionStyles,
-    SectionExamples,
   },
 };
 </script>
diff --git a/docs/components/theming/sections/SectionIntro.vue b/docs/components/theming/sections/SectionIntro.vue
index 28eeb392d..754fa8036 100644
--- a/docs/components/theming/sections/SectionIntro.vue
+++ b/docs/components/theming/sections/SectionIntro.vue
@@ -11,7 +11,7 @@
           This requires that if you are displaying a calendar in your application, it may need to fit within an overall design theme set up for your site.
         </p>
         <p>
-          Generally speaking, these are some specific props that can be used to customize the overall display of calendar components.
+          Generally speaking, these are some specific props that can be used to customize the overall display of your calendar.
         </p>
       </div>
       <table-props></table-props>
diff --git a/docs/docs.js b/docs/docs.js
index f905e9e28..3de710c18 100755
--- a/docs/docs.js
+++ b/docs/docs.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Buefy from 'buefy';
 import hljs from 'highlight.js';
+import VueClipboard from 'vue-clipboard2';
 import VCalendar from '../src/lib';
 import App from './App';
 import router from './router';
@@ -8,6 +9,7 @@ import CodeBlock from './components/blocks/CodeBlock';
 import './styles/app.scss';
 
 Vue.config.productionTip = false;
+Vue.use(VueClipboard);
 Vue.use(Buefy, {
   defaultIconPack: 'fa',
 });
diff --git a/docs/router/index.js b/docs/router/index.js
index 52b692edd..8baa1f7e1 100755
--- a/docs/router/index.js
+++ b/docs/router/index.js
@@ -2,9 +2,10 @@ import Vue from 'vue';
 import Router from 'vue-router';
 
 const PageHome = () => import('../components/home/pages/PageHome');
-const PageSetup = () => import('../components/setup/pages/PageSetup');
 const PageTheming = () => import('../components/theming/pages/PageTheming');
 const PageApi = () => import('../components/api/pages/PageApi');
+const PageGallery = () => import('../components/gallery/pages/PageGallery');
+const PageSetup = () => import('../components/setup/pages/PageSetup');
 
 Vue.use(Router);
 
@@ -16,10 +17,6 @@ export default new Router({
       path: '/',
       component: PageHome,
     },
-    {
-      path: '/setup',
-      component: PageSetup,
-    },
     {
       path: '/theming',
       component: PageTheming,
@@ -28,5 +25,13 @@ export default new Router({
       path: '/api',
       component: PageApi,
     },
+    {
+      path: '/gallery',
+      component: PageGallery,
+    },
+    {
+      path: '/setup',
+      component: PageSetup,
+    },
   ],
 });
diff --git a/package.json b/package.json
index 0745182fb..b82214d5b 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,14 @@
 {
   "name": "v-calendar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A clean and extendable plugin for building simple attributed calendars in Vue.js.",
-  "keywords": ["vue", "calendar", "highlights", "indicators"],
-  "homepage": "vcalendar.netlify.com",
+  "keywords": [
+    "vue",
+    "calendar",
+    "highlights",
+    "indicators"
+  ],
+  "homepage": "https://vcalendar.netlify.com",
   "author": "Nathan Reyes <nathanreyes@me.com>",
   "main": "lib/v-calendar.min.js",
   "files": [
@@ -90,6 +95,7 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.8",
+    "vue-clipboard2": "0.0.7",
     "vue-loader": "^12.1.0",
     "vue-router": "^2.6.0",
     "vue-style-loader": "^3.0.1",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index ccec0698e..56b3c4fe2 100755
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -10,6 +10,7 @@
     :max-page='maxFromPage'
     :styles='themeStyles_'
     :attributes='attributes_'
+    @titleClick='titleClick'
     v-bind='$attrs'
     v-on='$listeners'>
   </calendar-pane>
@@ -21,6 +22,7 @@
     :max-page='maxPage'
     :styles='themeStyles_'
     :attributes='attributes_'
+    @titleClick='titleClick'
     v-bind='$attrs'
     v-on='$listeners'>
   </calendar-pane>
@@ -32,22 +34,22 @@ import CalendarPane from './CalendarPane';
 import Tag from './Tag';
 import '../assets/fonts/vcalendar/vcalendar.scss';
 import '../styles/lib.sass';
+import DateInfo from '../utils/dateInfo';
 import {
   themeStyles,
   getHighlight,
   dot,
   bar,
 } from '../utils/defaults';
-
 import {
   todayComps,
+  pageIsEqualToPage,
   pageIsBeforePage,
   pageIsAfterPage,
   getPrevPage,
   getNextPage,
   getPageBetweenPages,
   getFirstValidPage,
-  DateInfo,
 } from '../utils/helpers';
 
 export default {
@@ -103,7 +105,7 @@ export default {
       if (!this.attributes || !this.attributes.length) return [];
       return this.attributes.map((a, i) => {
         const newAttribute = {
-          key: a.key || i.toString(),
+          key: a.key || (i + 1).toString(),
           dates: a.dates.map(d => (d instanceof DateInfo ? d : new DateInfo(d, a.order))),
           order: a.order || 0,
         };
@@ -178,6 +180,14 @@ export default {
     refreshToPage() {
       this.toPage_ = this.getValidToPage(this.toPage, getNextPage(this.fromPage_));
     },
+    titleClick(page) {
+      if (pageIsEqualToPage(page, todayComps)) return;
+      if (page.position < 2) {
+        this.fromPage_ = getFirstValidPage(todayComps, pageIsBeforePage(page, todayComps) ? this.maxFromPage : this.minPage);
+      } else {
+        this.toPage_ = getFirstValidPage(todayComps, pageIsBeforePage(page, todayComps) ? this.maxPage : this.minToPage);
+      }
+    },
     getValidFromPage(...args) {
       return getFirstValidPage(
         ...args.map(p => getPageBetweenPages(p, this.minPage, this.maxPage)),
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index 5ec3ea5d6..6c4900268 100755
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -21,8 +21,8 @@
     <div
       class='c-day-content'
       :style='contentStyle_'
-      @touchstart='touchstart'
-      @touchend='touchend'
+      @touchstart.passive='touchstart'
+      @touchend.passive='touchend'
       @click='click($event)'
       @mouseenter='mouseenter'
       @mouseleave='mouseleave'>
diff --git a/src/components/CalendarNav.vue b/src/components/CalendarNav.vue
new file mode 100644
index 000000000..028b56215
--- /dev/null
+++ b/src/components/CalendarNav.vue
@@ -0,0 +1,427 @@
+<template>
+<!--Nav panel-->
+<div class='c-nav'>
+  <!--Nav months-->
+  <div
+    key='months'
+    class='c-nav-months-container'
+    v-if='mode === "month"'>
+    <!--Months header-->
+    <div class='c-header'>
+      <!--Previous year button-->
+      <span
+        class='c-arrow vc-angle-left'
+        :class='{ "c-disabled": !canMovePrevYear }'
+        @click='yearIndex--'>
+      </span>
+      <!--Current year button-->
+      <span
+        class='c-title'
+        @click='selectMode("year")'>
+        {{ yearIndex }}
+      </span>
+      <!--Next year button-->
+      <span
+        class='c-arrow vc-angle-right'
+        :class='{ "c-disabled": !canMoveNextYear }'
+        @click='yearIndex++'>
+      </span>
+    </div>
+    <!--Months table-->
+    <div class='c-nav-months'>
+      <table class='c-table'>
+        <tr v-for='(row, i) in monthRows' :key='i'>
+          <td
+            v-for='item in row'
+            :key='item.month'>
+            <div
+              class='c-table-cell'
+              :class='{ "c-active": item.isActive, "c-disabled": item.isDisabled }'
+              @click='monthClick(item.month)'>
+              <!--Month label-->
+              <div
+                class='c-label'
+                :class='{ "has-indicators": item.attributes }'>
+                {{ item.label.substring(0, 3) }}
+              </div>
+              <!--Attribute indicators-->
+              <transition name='indicators'>
+                <div
+                  v-if='item.attributes'
+                  class='c-indicators'>
+                  <span
+                    class='c-indicator'
+                    v-for='attribute in item.attributes'
+                    :key='attribute.key'
+                    :style='attribute.style'>
+                  </span>
+                </div>
+              </transition>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <!--Nav years-->
+  <div
+    key='years'
+    class='c-nav-years-container'
+    v-if='mode === "year"'>
+    <div class='c-header'>
+      <!--Previous year group button-->
+      <span
+        class='c-arrow vc-angle-left'
+        :class='{ "c-disabled": !canMovePrevYearGroup }'
+        @click='yearGroupIndex--'>
+      </span>
+      <!--Current year group button-->
+      <span
+        class='c-title'
+        @click='selectMode("month")'>
+        {{ firstYear }} - {{ lastYear }}
+      </span>
+      <!--Next year group button-->
+      <span
+        class='c-arrow vc-angle-right'
+        :class='{ "c-disabled": !canMoveNextYearGroup }'
+        @click='yearGroupIndex++'>
+      </span>
+    </div>
+    <!--Years table-->
+    <div class='c-nav-years'>
+      <table class='c-table'>
+        <tr v-for='(row, i) in yearRows' :key='i'>
+          <td
+            v-for='item in row'
+            :key='item.year'>
+            <div
+              class='c-table-cell'
+              :class='{ "c-active": item.year === year, "c-disabled": item.isDisabled }'
+              @click='yearClick(item.year)'>
+              <span class='c-label'>{{ item.year }}</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import DateInfo from '../utils/dateInfo';
+import {
+  todayComps,
+  getMonthComps,
+  getFirstArrayItem,
+  getLastArrayItem } from '../utils/helpers';
+
+const _yearGroupCount = 12;
+
+export default {
+  props: {
+    monthLabels: { type: Array, required: true },
+    mode: { type: String, default: 'month' },
+    value: { type: Object, default: () => ({ month: 0, year: 0 }) },
+    validator: { type: Function, default: () => () => true },
+    attributes: Array,
+  },
+  data() {
+    return {
+      yearIndex: 0,
+      yearGroupIndex: 0,
+      attributesMap: {},
+    };
+  },
+  computed: {
+    month() {
+      return this.value ? this.value.month || 0 : 0;
+    },
+    year() {
+      return this.value ? this.value.year || 0 : 0;
+    },
+    canMovePrevYear() {
+      return this.validator({ month: 12, year: this.yearIndex - 1 });
+    },
+    canMoveNextYear() {
+      return this.validator({ month: 1, year: this.yearIndex + 1 });
+    },
+    canMovePrevYearGroup() {
+      return this.validator({ month: 12, year: this.firstYear - 1 });
+    },
+    canMoveNextYearGroup() {
+      return this.validator({ month: 1, year: this.lastYear + 1 });
+    },
+    monthItems() {
+      return this.monthLabels.map((ml, i) => {
+        const month = i + 1;
+        return {
+          month,
+          label: ml,
+          attributes: this.getMonthAttributes(month),
+          isActive: month === this.month && this.yearIndex === this.year,
+          isDisabled: !this.validator({ month, year: this.yearIndex }),
+        };
+      });
+    },
+    yearItems() {
+      const startYear = this.yearGroupIndex * _yearGroupCount;
+      const endYear = startYear + _yearGroupCount;
+      const items = [];
+      for (let i = startYear; i < endYear; i += 1) {
+        items.push({
+          year: i,
+          isDisabled: !this.validator({ month: this.month, year: i }),
+        });
+      }
+      return items;
+    },
+    monthRows() {
+      return this.createRows(this.monthItems, 3);
+    },
+    yearRows() {
+      return this.createRows(this.yearItems, 3);
+    },
+    firstYear() {
+      return getFirstArrayItem(this.yearItems.map(i => i.year), 0);
+    },
+    lastYear() {
+      return getLastArrayItem(this.yearItems.map(i => i.year), 0);
+    },
+  },
+  watch: {
+    year() {
+      this.yearIndex = this.year;
+    },
+    yearIndex(val) {
+      this.yearGroupIndex = this.getYearGroupIndex(val);
+    },
+    attributes() {
+      this.mapAttributes(true);
+    },
+    yearGroupIndex() {
+      this.mapAttributes();
+    },
+  },
+  created() {
+    this.yearIndex = this.year;
+  },
+  methods: {
+    getMonthAttributes(month) {
+      if (!this.attributesMap[this.yearIndex] || !this.attributesMap[this.yearIndex][month]) return undefined;
+      return Object.values(this.attributesMap[this.yearIndex][month]);
+    },
+    mapAttributes(clearCache) {
+      // Clear map if there are no attributes
+      if (!this.attributes || !this.attributes.length) {
+        this.attributesMap = {};
+        return;
+      }
+      // Clear cache if needed
+      const map = clearCache ? {} : this.attributesMap;
+      // Cycle each year in the current year group
+      for (let y = this.firstYear; y <= this.lastYear; y++) {
+        // If there isn't current year data...
+        if (!map[y]) {
+          const yearData = {};
+          // Cycle each month
+          for (let m = 1; m <= 12; m++) {
+            const monthData = {};
+            // Get range for the current month
+            const comps = getMonthComps(m, y);
+            const monthRange = new DateInfo({
+              start: new Date(comps.year, comps.month - 1, 1),
+              end: new Date(comps.year, comps.month - 1, comps.days),
+            });
+            // Assign attribute data if they lie in month range
+            this.attributes.forEach((a) => {
+              if (a.dates.find(d => d.intersects(monthRange))) {
+                monthData[a.key] = this.getAttributeInfo(a);
+              }
+            });
+            // Assign month data
+            if (Object.keys(monthData).length) yearData[m] = monthData;
+          }
+          // Assign year data
+          if (Object.keys(yearData).length) map[y] = yearData;
+        }
+      }
+      // Use object spread to trigger Vue reactivity
+      this.attributesMap = { ...map };
+    },
+    getAttributeInfo(attr) {
+      let color;
+      if (attr.highlight) {
+        color = attr.highlight.backgroundColor;
+      } else if (attr.dot) {
+        color = attr.dot.backgroundColor;
+      } else if (attr.bar) {
+        color = attr.bar.backgroundColor;
+      } else if (attr.contentStyle) {
+        color = attr.contentStyle.backgroundColor || attr.contentStyle.color;
+      }
+      return {
+        key: attr.key,
+        style: {
+          backgroundColor: color,
+        },
+      };
+    },
+    selectMode(mode) {
+      this.$emit('update:mode', mode);
+    },
+    getYearGroupIndex(year) {
+      return Math.floor(year / _yearGroupCount);
+    },
+    monthClick(month) {
+      this.selectValue(month, this.yearIndex);
+    },
+    yearClick(year) {
+      this.selectValue(this.month, year);
+      this.selectMode('month');
+    },
+    selectValue(month, year) {
+      this.$emit('input', { month, year });
+    },
+    selectCurrentYearIndex() {
+      if (this.yearIndex !== todayComps.year) {
+        this.yearIndex = todayComps.year;
+      } else {
+        this.selectValue(todayComps.month, todayComps.year);
+      }
+    },
+    selectCurrentYearGroupIndex() {
+      const currYearGroupIndex = this.getYearGroupIndex(todayComps.year);
+      if (this.yearGroupIndex !== currYearGroupIndex) {
+        this.yearGroupIndex = currYearGroupIndex;
+      } else {
+        this.selectValue(this.month, todayComps.year);
+      }
+    },
+    createRows(items, columnCount) {
+      const rows = [];
+      let row = [];
+      items.forEach((item) => {
+        row.push(item);
+        if (row.length >= columnCount) {
+          rows.push(row);
+          row = [];
+        }
+      });
+      return rows;
+    },
+  },
+};
+</script>
+
+<style lang='sass' scoped>
+
+@import '../styles/vars.sass'
+@import '../styles/mixins.sass'
+
+$cellTransition: all 0.1s ease-in-out
+
+.c-nav
+  transition: height 5s ease-in-out
+  color: #333333
+
+.c-header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  border-bottom: 1px solid #dadada
+  padding: 3px 0
+
+.c-arrow
+  +box()
+  font-size: $arrowFontSize
+  width: $arrowWidth
+  height: $arrowHeight
+  transition: $arrowTransition
+  cursor: pointer
+  user-select: none
+  &:hover
+    opacity: 0.5
+
+.c-title
+  font-size: 0.9rem
+  font-weight: 600
+  transition: $titleTransition
+  cursor: pointer
+  user-select: none
+  &:hover
+    opacity: 0.5
+
+.c-table-cell
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+  user-select: none
+  cursor: pointer
+  width: 100%
+  height: 100%
+  background-color: white
+  transition: $cellTransition
+  &:hover
+    background-color: #f0f0f0
+
+.c-disabled
+  opacity: 0.2
+  cursor: not-allowed
+  pointer-events: none
+  &:hover
+    background-color: transparent
+
+.c-active
+  background-color: #f0f0f0
+  font-weight: 600
+
+.c-label
+  position: absolute
+  font-size: 0.9rem
+  transition: padding-bottom 0.1s ease-in-out
+  &.has-indicators
+    padding-bottom: 10px
+
+.c-indicators
+  display: flex
+  justify-content: center
+  align-items: center
+  margin-top: 14px
+  transition: $cellTransition
+  .c-indicator
+    width: 5px
+    height: 5px
+    border-radius: 50%
+    &:not(:first-child)
+      margin-left: 3px
+
+.c-table
+  table-layout: fixed
+  width: 100%
+  border-collapse: collapse
+  tr
+    td
+      border: 1px solid #dadada
+      width: 60px
+      height: 34px
+      &:first-child
+        border-left: 0
+      &:last-child
+        border-right: 0
+    &:first-child
+      td
+        border-top: 0
+    &:last-child
+      td
+        border-bottom: 0
+
+.indicators-enter-active, .indicators-leave-active
+  transition: $cellTransition
+
+.indicators-enter, .indicators-leave-to
+  opacity: 0
+
+</style>
diff --git a/src/components/CalendarPane.vue b/src/components/CalendarPane.vue
index 5715e2fe0..c0a1e3ff7 100755
--- a/src/components/CalendarPane.vue
+++ b/src/components/CalendarPane.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class='c-pane'>
+    :class='["c-pane", { "is-full-width": position === 0 }]'>
     <!--Header-->
     <div class='c-header-wrapper'>
       <!--Header vertical divider-->
@@ -23,51 +23,45 @@
             </slot>
           </div>
           <!--Header title-->
-          <transition-group
-            tag='div'
-            :class='["c-title", titleClass]'
-            :name='titleTransition_'>
-            <div
-              class='c-title-1'
-              v-for='p in pages'
-              :key='p.key'
-              v-if='p === page_'>
-              <slot name='header-title' :page='p'>
+          <div
+            :class='["c-title-layout", titleClass]'>   
+            <!--Navigation popover--> 
+            <popover
+              class='c-title-popover'
+              visibility='hover'
+              :align='titlePosition'
+              :content-style='{ padding: "0" }'
+              :enter-delay='300'>
+              <!--Title content-->
+              <transition-group
+                tag='div'
+                class='c-title-anchor'
+                :name='titleTransition_'>
                 <div
-                  class='c-title-2'
-                  :style='titleStyle'>
-                  <div class='c-select-container'>
-                    <span class='c-select-span'>
-                      {{ p.monthLabel }}
-                    </span>
-                    <select class='c-select' v-model='monthNumber'>
-                      <option
-                        v-for='(monthLabel, i) in monthLabels'
-                        :key='monthLabel'
-                        :value='i + 1'
-                        :disabled='monthIsDisabled(i + 1)'>
-                        {{ monthLabel }}
-                      </option>
-                    </select>
-                  </div>
-                  <div class='c-select-container'>
-                    <span class='c-select-span'>
-                      {{ p.yearLabel }}
-                    </span>
-                    <select class='c-select' v-model='yearNumber'>
-                      <option
-                        v-for='year in yearList'
-                        :key='year'
-                        :value='year'
-                        :disabled='yearIsDisabled(year)'>
-                        {{ year }}
-                      </option>
-                    </select>
-                  </div>
+                  class='c-title'
+                  :style='titleStyle'
+                  v-for='p in pages'
+                  :key='p.key'
+                  v-if='p === page_'
+                  @click='$emit("titleClick", p)'>
+                  <slot
+                    name='header-title'>
+                    {{ `${p.monthLabel} ${p.yearLabel}` }}
+                  </slot>
                 </div>
-              </slot>
-            </div>
-          </transition-group>
+              </transition-group>
+              <!--Navigation pane-->
+              <calendar-nav
+                slot='popover-content'
+                :mode.sync='navMode'
+                :monthLabels='monthLabels'
+                :value='page_'
+                :validator='canMove'
+                :attributes='attributes'
+                @input='move($event)'>
+              </calendar-nav>
+            </popover>
+          </div>
           <!--Header next button-->
           <div class='c-arrow-layout'>
             <slot name='header-right-button' :page='page_'>
@@ -141,10 +135,11 @@
             :next-month-comps='p.nextMonthComps'
             :first-day-of-week='firstDayOfWeek'
             :styles='styles'
+            :attributes='attributes'
             v-bind='$attrs'
-            @touchstart='touchStart($event)'
-            @touchmove='touchMove($event)'
-            @touchend='touchEnd($event)'
+            @touchstart.passive='touchStart($event)'
+            @touchmove.passive='touchMove($event)'
+            @touchend.passive='touchEnd($event)'
             v-on='$listeners'
             v-if='p === page_'>
           </calendar-weeks>
@@ -157,9 +152,11 @@
 <script>
 import Vue from 'vue';
 import CalendarWeeks from './CalendarWeeks';
+import CalendarNav from './CalendarNav';
+import Popover from './Popover';
+
 import {
   todayComps,
-  yearList,
   getIsLeapYear,
   getMonthComps,
   getThisMonthComps,
@@ -171,6 +168,7 @@ import {
 import {
   monthLabels,
   weekdayLabels,
+  titlePosition,
   titleTransition,
   weeksTransition,
   maxSwipeTimeMs,
@@ -181,6 +179,8 @@ import {
 export default {
   components: {
     CalendarWeeks,
+    CalendarNav,
+    Popover,
   },
   props: {
     position: { type: Number, default: 1 },
@@ -191,9 +191,10 @@ export default {
     weekdayLabels: { type: Array, default: () => weekdayLabels },
     firstDayOfWeek: { type: Number, default: 1 },
     styles: Object,
-    titlePosition: String,
+    titlePosition: { type: String, default: titlePosition },
     titleTransition: { type: String, default: titleTransition },
     weeksTransition: { type: String, default: weeksTransition },
+    attributes: Array,
   },
   data() {
     return {
@@ -201,10 +202,8 @@ export default {
       pages: [],
       page_: null,
       transitionDirection: '',
-      monthNumber: 0,
-      yearNumber: 0,
+      navMode: 'month',
       touchState: {},
-      yearList,
     };
   },
   computed: {
@@ -265,24 +264,6 @@ export default {
     },
     page_(val, oldVal) {
       this.transitionDirection = this.getTransitionDirection(oldVal, val);
-      this.monthNumber = val.month;
-      this.yearNumber = val.year;
-    },
-    monthNumber(val) {
-      if (val !== this.page_.month) {
-        this.move({
-          month: val,
-          year: this.yearNumber,
-        });
-      }
-    },
-    yearNumber(val) {
-      if (val !== this.page_.year) {
-        this.move({
-          month: this.monthNumber,
-          year: val,
-        });
-      }
     },
   },
   created() {
@@ -395,7 +376,7 @@ export default {
       // Preload other pages
       this.preloadPages();
     },
-    loadPage({ month, year }, position = 0) {
+    loadPage({ month, year }) {
       const key = `${year.toString()}.${month.toString()}`;
       let page = this.pages.find(p => (p.key === key));
       if (!page) {
@@ -432,15 +413,15 @@ export default {
         };
         this.pages.push(page);
       }
-      page.position = position;
+      page.position = this.position;
       page.loaded = true;
       return page;
     },
     preloadPages() {
       // Load the next and previous pages
       Vue.nextTick(() => {
-        this.loadPage(this.page_.prevMonthComps, -1);
-        this.loadPage(this.page_.nextMonthComps, 1);
+        this.loadPage(this.page_.prevMonthComps);
+        this.loadPage(this.page_.nextMonthComps);
         this.pages = this.pages.filter(p => p.loaded);
         this.pages.forEach((p) => {
           p.loaded = false;
@@ -473,26 +454,20 @@ export default {
 <style lang='sass' scoped>
 
 @import '../styles/vars.sass'
-
-=box($justify: center, $align: center)
-  display: flex
-  justify-content: $justify
-  align-items: $align
-  margin: 0
-  padding: 0
+@import '../styles/mixins.sass'
 
 .c-pane
-  flex-grow: 1
-  flex-shrink: 1
-  // min-width: $paneMinWidth
-  // width: $paneWidth
+  width: 50%
   display: flex
   flex-direction: column
   align-items: stretch
   overflow: hidden
+  &.is-full-width
+    width: 100%
 
 .c-header-wrapper
   display: flex
+  z-index: 1
 
 .c-header
   flex: 1
@@ -500,7 +475,6 @@ export default {
   align-items: stretch
   user-select: none
   padding: $headerPadding
-
   .c-arrow-layout
     +box()
     .c-arrow
@@ -513,55 +487,30 @@ export default {
       user-select: none
       &:hover
         opacity: 0.5
-    
-  .c-title
-    +box()
+  .c-title-layout
+    display: inline-flex
+    justify-content: center
+    align-items: center
     flex-grow: 1
-    position: relative
-    .c-title-1
-      position: absolute
-      left: 0
-      top: 0
-      width: 100%
-      height: 100%
+    .c-title-popover
       display: flex
-      align-items: center
-      .c-title-2
-        +box()
-        font-weight: $titleFontWeight
-        font-size: $titleFontSize
-        user-select: none
-        margin: $titleMargin
-        text-align: center
-        width: 100%
-
-        .c-select-container
-          position: relative
+      justify-content: inherit
+      .c-title-anchor
+        display: flex
+        justify-content: inherit
+        .c-title
+          font-weight: $titleFontWeight
+          font-size: $titleFontSize
           transition: $titleTransition
-          &:hover
-            opacity: 0.5
-          &:not(:first-child)
-            margin-left: 5px
-          .c-select-span
-            height: 100%
-          .c-select
-            position: absolute
-            top: 0
-            left: 0
-            width: 100%
-            height: 100%
-            border: none
-            font-size: 1rem
-            opacity: 0
-            cursor: pointer
+          cursor: pointer
+          user-select: none
+          white-space: nowrap
     &.align-left
       order: -1
-      .c-title-2
-        justify-content: flex-start
+      justify-content: flex-start
     &.align-right
       order: 1
-      .c-title-2
-        justify-content: flex-end
+      justify-content: flex-end
     
   .c-arrow.c-disabled
     cursor: not-allowed
@@ -602,17 +551,18 @@ export default {
   flex-direction: column
   width: 100%
 
-.title-slide-left-enter-active,
 .title-slide-left-leave-active,
-.title-slide-right-enter-active,
 .title-slide-right-leave-active,
-.title-slide-up-enter-active,
 .title-slide-up-leave-active,
-.title-slide-down-enter-active,
 .title-slide-down-leave-active,
-.title-fade-enter-active,
 .title-fade-leave-active
-  transition: $titleTransition
+  position: absolute
+
+.title-slide-left-leave,
+.title-slide-right-leave,
+.title-slide-up-leave,
+.title-slide-down-leave
+  opacity: 1
 
 .title-none-enter-active,
 .title-none-leave-active
diff --git a/src/components/CalendarWeeks.vue b/src/components/CalendarWeeks.vue
index bc4433b3d..bfa47caca 100755
--- a/src/components/CalendarWeeks.vue
+++ b/src/components/CalendarWeeks.vue
@@ -4,9 +4,9 @@
     class='c-week'
     v-for='(week, i) in weeks'
     :key='i'
-    @touchstart='$emit("touchstart", $event)'
-    @touchmove='$emit("touchmove", $event)'
-    @touchend='$emit("touchend", $event)'>
+    @touchstart.passive='$emit("touchstart", $event)'
+    @touchmove.passive='$emit("touchmove", $event)'
+    @touchend.passive='$emit("touchend", $event)'>
     <calendar-day
       v-for='day in week'
       :key='day.id'
@@ -21,7 +21,7 @@
       :in-month='day.inMonth'
       :in-prev-month='day.inPrevMonth'
       :in-next-month='day.inNextMonth'
-      :attributes='day.attributes'
+      :attributes='getDayAttributes(day.date)'
       v-bind='$attrs'
       v-on='$listeners'>
     </calendar-day>
@@ -31,6 +31,7 @@
 
 <script>
 import CalendarDay from './CalendarDay';
+import DateInfo from '../utils/dateInfo';
 import { todayComps } from '../utils/helpers';
 
 export default {
@@ -95,7 +96,6 @@ export default {
             inMonth: thisMonth,
             inPrevMonth: previousMonth,
             inNextMonth: nextMonth,
-            attributes: this.getDayAttributes(date),
           };
           week.push(dayInfo);
 
@@ -116,12 +116,20 @@ export default {
       }
       return weeks;
     },
+    weeksRange() {
+      const start = this.weeks[0][0].date;
+      const end = this.weeks[5][6].date;
+      return new DateInfo({ start, end });
+    },
+    weeksAttributes() {
+      return this.attributes.filter(a => a.dates.find(d => d.intersects(this.weeksRange)));
+    },
   },
   methods: {
     getDayAttributes(date) {
-      if (!this.attributes || !this.attributes.length) return [];
+      if (!this.weeksAttributes || !this.weeksAttributes.length) return [];
       const attributes = [];
-      this.attributes.forEach((a) => {
+      this.weeksAttributes.forEach((a) => {
         // Cycle through each attribute date
         a.dates.forEach((dateInfo) => {
           // Done if attribute date doesn't contain the day date
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 3fe71918c..7b0598353 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -18,6 +18,7 @@
     :align='popoverAlign'
     :visibility='popoverVisibility'
     :is-expanded='isExpanded'
+    :content-style='popoverContentStyle'
     v-else>
     <slot
       :input-value='valueText'
@@ -53,9 +54,9 @@ import Popover from './Popover';
 import SingleDatePicker from './SingleDatePicker';
 import MultipleDatePicker from './MultipleDatePicker';
 import DateRangePicker from './DateRangePicker';
-import { DateInfo, blendColors } from '../utils/helpers';
+import DateInfo from '../utils/dateInfo';
+import { blendColors } from '../utils/helpers';
 
-const POPOVER_AUTO = -1;
 const _defaultSelectColor = '#66b3cc';
 const _defaultDragColor = '#9fcfdf';
 
@@ -73,7 +74,7 @@ export default {
     isExpanded: Boolean,
     popoverDirection: { type: String, default: 'bottom' },
     popoverAlign: { type: String, default: 'left' },
-    popoverVisibility: { type: Number, default: POPOVER_AUTO },
+    popoverVisibility: { type: String, default: 'hover' },
     inputClass: String,
     inputStyle: Object,
     inputPlaceholder: String,
@@ -85,7 +86,7 @@ export default {
       type: Function,
       default: s => new Date(Date.parse(s)),
     },
-    themeStyles: Object,
+    themeStyles: { type: Object, default: () => ({}) },
     selectColor: { type: String, default: _defaultSelectColor },
     dragColor: { type: String, default: _defaultDragColor },
     selectAttribute: Object,
@@ -169,7 +170,7 @@ export default {
       };
     },
     themeStyles_() {
-      return {
+      const styles = {
         dayContentHover: {
           backgroundColor: '#dadada',
           border: '0',
@@ -177,6 +178,18 @@ export default {
         },
         ...this.themeStyles,
       };
+      if (!this.isInline) {
+        styles.wrapper = {
+          border: '0',
+        };
+      }
+      return styles;
+    },
+    popoverContentStyle() {
+      return {
+        ...this.themeStyles.wrapper,
+        padding: '0',
+      };
     },
     selectAttribute_() {
       return this.selectAttribute || {
diff --git a/src/components/DateRangePicker.vue b/src/components/DateRangePicker.vue
index 1df3c3598..10ef30083 100755
--- a/src/components/DateRangePicker.vue
+++ b/src/components/DateRangePicker.vue
@@ -11,7 +11,7 @@
 
 <script>
 import Calendar from './Calendar';
-import { DateInfo } from '../utils/helpers';
+import DateInfo from '../utils/dateInfo';
 
 export default {
   components: {
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 7aabca3f2..8b0c8449d 100755
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -2,24 +2,35 @@
   <div
     ref='popover'
     :class='["popover-container", { expanded: isExpanded }]'
-    :tabindex='visibility === -1 ? 0 : undefined'
+    :tabindex='visibilityIsManaged ? 0 : undefined'
     @focusin='focusin'
-    @focusout='focusout'>
+    @focusout='focusout'
+    @mouseleave='mouseleave'
+    @mouseover='mouseover'>
     <transition name='slide-fade' tag='div'>
       <div
-        :class='["anchor", "direction-" + direction, "align-" + align]'
-        v-if='visibleDelay'>
+        ref='popoverOrigin'
+        :class='["popover-origin", "direction-" + direction, "align-" + align]'
+        v-if='visibleAfterDelay'>
         <div
-          ref='popoverContent'
-          :class='["content", "direction-" + direction, "align-" + align]'>
-          <slot name='popover-content'>
-            <div>Popover content goes here</div>
-          </slot>
+          :class='["popover-content-wrapper", "direction-" + direction, "align-" + align]'>
+          <div
+            ref='popoverContent'
+            :class='["popover-content", "direction-" + direction, "align-" + align]'
+            :style='contentStyle_'>
+            <div
+              class='popover-content-mask'
+              :style='maskStyle_'>
+              <slot name='popover-content'>
+                <div>Popover content goes here</div>
+              </slot>
+            </div>
+          </div>
         </div>
       </div>
     </transition>
     <slot>
-      <div>Popover anchor slot goes here</div>
+      <div>Popover trigger goes here</div>
     </slot>
   </div>
 </template>
@@ -27,48 +38,72 @@
 <script>
 import Vue from 'vue';
 import { composedPath } from '../utils/helpers';
+import { maxTapTolerance, maxTapDuration } from '../utils/defaults';
 
-const POPOVER_AUTO = -1;
-const POPOVER_VISIBLE = 1;
-const _tapTolerance = 0;
-const _tapMaxDuration = 200; // ms
+const VISIBILITIES = {
+  HOVER: 'hover',
+  FOCUS: 'focus',
+  HIDDEN: 'hidden',
+  VISIBLE: 'visible',
+};
 
 export default {
   props: {
     isExpanded: Boolean,
     direction: { type: String, default: 'bottom' },
     align: { type: String, default: 'left' },
-    visibility: { type: Number, default: POPOVER_AUTO },
-    delay: { type: Number, default: 50 }, // Milliseconds
+    visibility: { type: String, default: VISIBILITIES.HOVER },
+    contentStyle: { type: Object, default: () => ({}) },
+    enterDelay: { type: Number, default: 200 }, // ms
+    leaveDelay: { type: Number, default: 300 }, // ms
   },
   data() {
     return {
-      visible: false,
-      visibleDelay: false,
+      visibleManaged: false,
+      visibleAfterDelay: false,
       touchState: null,
     };
   },
   computed: {
-    visible_() {
-      if (this.visibility === POPOVER_AUTO) return this.visible;
-      return this.visibility === POPOVER_VISIBLE;
+    visibilityIsManaged() {
+      return this.visibility === VISIBILITIES.HOVER || this.visibility === VISIBILITIES.FOCUS;
+    },
+    visibleBeforeDelay() {
+      if (this.visibilityIsManaged) return this.visibleManaged;
+      return this.visibility === VISIBILITIES.VISIBLE;
+    },
+    contentStyle_() {
+      const style = { ...this.contentStyle };
+      delete style.zIndex;
+      delete style.padding;
+      return style;
+    },
+    maskStyle_() {
+      const cs = this.contentStyle;
+      const style = {};
+      if (cs.padding) style.padding = cs.padding;
+      return style;
     },
   },
   watch: {
-    visible_(val) {
-      if (!this.delay) {
-        this.visibleDelay = val;
-      } else {
+    visibleBeforeDelay(val) {
+      // Ignore if already waiting for a visibility change
+      if (val === this.visibleAfterDelay) return;
+      // Delay visibility change?
+      if ((val && this.enterDelay) || (!val && this.leaveDelay)) {
         setTimeout(() => {
-          if (val === this.visible_) this.visibleDelay = val;
-        }, this.delay);
+          if (val === this.visibleBeforeDelay) this.visibleAfterDelay = val;
+        }, val ? this.enterDelay : this.leaveDelay);
+      } else {
+        this.visibleAfterDelay = val;
       }
     },
   },
   created() {
+    this.VISIBILITIES = VISIBILITIES;
+    this.visibleAfterDelay = this.visibleBeforeDelay;
     window.addEventListener('touchstart', this.touchStart);
     window.addEventListener('touchend', this.touchEnd);
-    this.visibleDelay = this.visible_;
   },
   methods: {
     touchStart(e) {
@@ -95,24 +130,33 @@ export default {
       const state = this.touchState;
       state.x = t.screenX;
       state.y = t.screenY;
-      state.tapDetected = new Date() - state.startedOn <= _tapMaxDuration &&
-        Math.abs(state.x - state.startX) <= _tapTolerance &&
-        Math.abs(state.y - state.startY) <= _tapTolerance;
-      if (state.tapDetected) this.visible = false;
+      state.tapDetected = new Date() - state.startedOn <= maxTapDuration &&
+        Math.abs(state.x - state.startX) <= maxTapTolerance &&
+        Math.abs(state.y - state.startY) <= maxTapTolerance;
+      if (state.tapDetected) this.visibleManaged = false;
       state.started = false;
     },
     focusin(e) {
-      this.visible = true;
+      if (this.visibility === VISIBILITIES.FOCUS) this.visibleManaged = true;
       this.$emit('focusin', e);
     },
     focusout(e) {
-      // Trap focus if element losing focus is nested within the popover content
-      if (e.target !== this.$refs.popover && composedPath(e.target).includes(this.$refs.popoverContent)) {
-        Vue.nextTick(() => this.$refs.popover.focus());
+      if (this.visibility === VISIBILITIES.FOCUS) {
+        // Trap focus if element losing focus is nested within the popover content
+        if (e.target !== this.$refs.popover && composedPath(e.target).includes(this.$refs.popoverContent)) {
+          Vue.nextTick(() => this.$refs.popover.focus());
+        }
+        this.visibleManaged = false;
       }
-      this.visible = false;
       this.$emit('focusout', e);
     },
+    mouseleave() {
+      if (this.visibility === VISIBILITIES.HOVER) this.visibleManaged = false;
+    },
+    mouseover(e) {
+      // Show if moused over, but ignore the popover origin because it is transformed
+      if (this.visibility === VISIBILITIES.HOVER) this.visibleManaged = e.target !== this.$refs.popoverOrigin;
+    },
   },
 };
 </script>
@@ -129,24 +173,26 @@ export default {
   &.expanded
     display: block
 
-.anchor
+.popover-origin
   position: absolute
   transform-origin: top center
   z-index: -1
   &.direction-top
     bottom: 100%
-    margin-bottom: $popoverOffset
   &.direction-bottom
     top: 100%
-    margin-top: $popoverOffset
   &.direction-left
     top: 0
     right: 100%
-    margin-right: $popoverOffset
   &.direction-right
     top: 0
     left: 100%
-    margin-left: $popoverOffset
+  &.direction-bottom.align-left, &.direction-top.align-left
+    left: 0
+  &.direction-bottom.align-center, &.direction-top.align-center
+    left: 50%
+  &.direction-bottom.align-right, &.direction-top.align-right
+    right: 0
   &.direction-left.align-top, &.direction-right.align-top
     top: 0
   &.direction-left.align-middle, &.direction-right.align-middle
@@ -154,21 +200,81 @@ export default {
   &.direction-left.align-bottom, &.direction-right.align-bottom
     top: initial
     bottom: 0
-  &.direction-top.align-left, &.direction-bottom.align-left
-    left: 0
-  &.direction-top.align-center, &.direction-bottom.align-center
-    left: 50%
-  &.direction-top.align-right, &.direction-bottom.align-right
-    right: 0
-  .content
+  .popover-content-wrapper
+    position: relative
     outline: none
-    &.direction-top.align-center, &.direction-bottom.align-center
-      margin-left: -50%
-    &.direction-left.align-middle, &.direction-right.align-middle
-      margin-top: -50%
+    &.align-center
+      transform: translateX(-50%)
+    &.align-middle
+      transform: translateY(-50%)
+    .popover-content
+      position: relative
+      background-color: $popoverBackgroundColor
+      border: $popoverBorder
+      border-radius: $popoverBorderRadius
+      box-shadow: $popoverBoxShadow
+      .popover-content-mask
+        position: relative
+        z-index: 1
+        border-radius: inherit
+        padding: $popoverPadding
+        overflow: hidden
+      &:after
+        display: block
+        position: absolute
+        background-color: inherit
+        border: inherit
+        border-width: 1px 1px 0 0
+        width: 12px
+        height: 12px
+        content: ''
+      &.direction-bottom
+        margin-top: $popoverOffset
+        &:after
+          top: 0
+          border-width: 1px 1px 0 0
+      &.direction-top
+        margin-bottom: $popoverOffset
+        &:after
+          top: 100%
+          border-width: 0 0 1px 1px
+      &.direction-left
+        margin-right: $popoverOffset
+        &:after
+          left: 100%
+          border-width: 0 1px 1px 0
+      &.direction-right
+        margin-left: $popoverOffset
+        &:after
+          left: 0
+          border-width: 1px 0 0 1px
+      &.align-left
+        &:after
+          left: $popoverCaretHorizontalOffset
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg)
+      &.align-right
+        &:after
+          right: $popoverCaretHorizontalOffset
+          transform: translateY(-50%) translateX(50%) rotate(-45deg)
+      &.align-center
+        &:after
+          left: 50%
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg)
+      &.align-top
+        &:after
+          top: $popoverCaretVerticalOffset
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg)
+      &.align-middle
+        &:after
+          top: 50%
+          transform: translateY(-50%) translateX(-50%) rotate(-45deg)
+      &.align-bottom
+        &:after
+          bottom: $popoverCaretVerticalOffset
+          transform: translateY(50%) translateX(-50%) rotate(-45deg)
 
 .slide-fade-enter-active, .slide-fade-leave-active
-  transition: all $popoverSlideTransitionTime
+  transition: all $popoverTransitionTime
 
 .slide-fade-enter, .slide-fade-leave-to
   opacity: 0
diff --git a/src/styles/mixins.sass b/src/styles/mixins.sass
new file mode 100644
index 000000000..cf5c8712e
--- /dev/null
+++ b/src/styles/mixins.sass
@@ -0,0 +1,6 @@
+=box($justify: center, $align: center)
+  display: flex
+  justify-content: $justify
+  align-items: $align
+  margin: 0
+  padding: 0
\ No newline at end of file
diff --git a/src/styles/vars.sass b/src/styles/vars.sass
index 8dc4e3fb2..9b29722aa 100755
--- a/src/styles/vars.sass
+++ b/src/styles/vars.sass
@@ -8,9 +8,8 @@ $panePadding: 5px 5px 10px 5px
 
 $headerPadding: 10px $horizontalPadding+5
 
-$titleFontSize: 1.1rem
+$titleFontSize: 1.14rem
 $titleFontWeight: 400
-$titleMargin: 0 5px
 $titleTranslateX: 25px
 $titleTransition: all .25s ease-in-out
 
@@ -52,9 +51,16 @@ $backgroundScaleEnterAnimationTime: 0.14s
 $backgroundScaleLeaveAnimationTime: .18s
 $backgroundTranslateTransition: .18s ease-in-out
 
-$popoverOffset: 4px
+$popoverOffset: 8px
 $popoverSlideTranslation: 15px
-$popoverSlideTransitionTime: 0.13s ease-in-out
+$popoverTransitionTime: 0.1s ease-in-out
+$popoverBackgroundColor: #fafafa
+$popoverBorder: 1px solid rgba(34,36,38,.15)
+$popoverBorderRadius: 5px
+$popoverPadding: 4px
+$popoverBoxShadow: 0 1px 2px 0 rgba(34,36,38,.15)
+$popoverCaretHorizontalOffset: 20px
+$popoverCaretVerticalOffset: 18px
 
 $scaleEnterAnimation: scaleEnter .18s ease-in-out
 $scaleLeaveAnimation: scaleLeave .2s ease-in-out
diff --git a/src/utils/attributes.js b/src/utils/attributes.js
new file mode 100644
index 000000000..320c856f2
--- /dev/null
+++ b/src/utils/attributes.js
@@ -0,0 +1,93 @@
+// This file is left over as a working concept for having a centralized data store
+
+import {
+  getHighlight,
+  dot,
+  bar,
+} from './defaults';
+
+import {
+  DateInfo,
+  getMonthComps,
+} from './helpers';
+
+export default class Attributes {
+  constructor(attributes) {
+    this.map = {};
+    this.list = [];
+    if (!attributes || !attributes.length) return;
+
+    this.list = attributes.map((a, i) => {
+      const newAttribute = {
+        key: a.key || i.toString(),
+        dates: a.dates.map(d => (d instanceof DateInfo ? d : new DateInfo(d, a.order))),
+        order: a.order || 0,
+      };
+      if (a.highlight) {
+        newAttribute.highlight = getHighlight(a.highlight);
+      }
+      if (a.dot) {
+        newAttribute.dot = {
+          ...dot,
+          ...a.dot,
+        };
+      }
+      if (a.bar) {
+        newAttribute.bar = {
+          ...bar,
+          ...a.bar,
+        };
+      }
+      if (a.contentStyle) {
+        newAttribute.contentStyle = {
+          ...a.contentStyle,
+        };
+      }
+      if (a.contentHoverStyle) {
+        newAttribute.contentHoverStyle = {
+          ...a.contentHoverStyle,
+        };
+      }
+      return newAttribute;
+    });
+  }
+
+  find(year, month, day) {
+    if (!year || !month) return undefined;
+    let yearData = this.map[year];
+    if (!yearData) {
+      yearData = {};
+      this.map[year] = yearData;
+    }
+    let monthData = yearData[month];
+    if (!monthData) {
+      const comps = getMonthComps(month, year);
+      const range = new DateInfo({
+        start: new Date(comps.year, comps.month - 1, 1),
+        end: new Date(comps.year, comps.month, comps.days),
+      });
+      const list = this.list.filter(a => a.dates.find(d => d.intersects(range)));
+      monthData = {
+        range,
+        list,
+      };
+      for (let d = 1; d <= comps.days; d++) {
+        const date = new Date(year, month - 1, d);
+        monthData[d] = list
+          .map((a) => {
+            const na = {
+              ...a,
+              dateInfo: a.dates.find(ad => ad.containsDate(date)),
+            };
+            delete na.dates;
+            return na;
+          })
+          .filter(a => a.dateInfo)
+          .sort((a, b) => a.dateInfo.compare(b.dateInfo));
+      }
+      yearData[month] = monthData;
+    }
+    if (day) return monthData[day];
+    return monthData.list;
+  }
+}
diff --git a/src/utils/dateInfo.js b/src/utils/dateInfo.js
new file mode 100644
index 000000000..9d171d3a3
--- /dev/null
+++ b/src/utils/dateInfo.js
@@ -0,0 +1,74 @@
+export default class DateInfo {
+  constructor(date, order = 0) {
+    if (!date) return;
+    const hasStart = !!date.start;
+    const hasEnd = !!date.end;
+    if (hasStart || hasEnd) {
+      // Normalize start and end dates
+      let start = new Date(date.start);
+      let end = new Date(date.end);
+      if (start > end) {
+        const temp = start;
+        start = end;
+        end = temp;
+      }
+      start.setHours(0, 0, 0, 0);
+      end.setHours(0, 0, 0, 0);
+      // Assign start and end dates
+      this.type = 'range';
+      this.isRange = true;
+      this.start = start;
+      this.startTime = start.getTime();
+      this.end = end;
+      this.endTime = end.getTime();
+    } else {
+      this.type = 'date';
+      this.isDate = true;
+      this.date = new Date(date);
+      this.date.setHours(0, 0, 0, 0);
+      this.dateTime = this.date.getTime();
+    }
+    this.order = order;
+    this.intersects = this.intersects.bind(this);
+  }
+
+  toRange() {
+    if (this.isDate) {
+      return {
+        start: new Date(this.dateTime),
+        startTime: this.dateTime,
+        end: new Date(this.dateTime),
+        endTime: this.dateTime,
+      };
+    }
+    return {
+      start: new Date(this.startTime),
+      startTime: this.startTime,
+      end: new Date(this.endTime),
+      endTime: this.endTime,
+    };
+  }
+
+  containsDate(date) {
+    if (this.isDate) return this.dateTime === date.getTime();
+    if (this.start && date < this.start) return false;
+    if (this.end && date > this.end) return false;
+    return true;
+  }
+
+  compare(other) {
+    if (this.order !== other.order) return this.order - other.order;
+    if (this.type !== other.type) return this.isDate ? 1 : -1;
+    if (this.isDate) return 0;
+    const diff = this.start - other.start;
+    return diff !== 0 ? diff : this.end - other.end;
+  }
+
+  intersects(other) {
+    if (this.isDate) {
+      return other.isDate ? this.dateTime === other.dateTime : other.containsDate(this.date);
+    }
+    if (other.isDate) return this.containsDate(other.date);
+    return this.start < other.end && this.end > other.start;
+  }
+}
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 7f22640c6..8ed33dc92 100755
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -1,5 +1,6 @@
 
 export const themeStyles = {
+  // wrapper: null,
   verticalDivider: { borderLeft: '1px solid #dadada' },
   // header: null,
   // headerTitle: null,
@@ -20,11 +21,14 @@ export const themeStyles = {
 };
 export const monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 export const weekdayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+export const titlePosition = 'center';
 export const titleTransition = 'slide-h';
 export const weeksTransition = 'slide-h';
 export const maxSwipeTimeMs = 300;
 export const minHorizontalSwipeDistance = 60;
 export const maxVerticalSwipeDistance = 80;
+export const maxTapTolerance = 0;
+export const maxTapDuration = 200; // ms
 export const getHighlight = uh => ({
   animated: uh.animated || true,
   height: uh.height || '1.8rem',
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
index 4a9594e4b..65e8124d6 100755
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@@ -61,6 +61,8 @@ function comparePages(firstPage, secondPage) {
   return firstPage.year < secondPage.year ? -1 : 1;
 }
 
+export const pageIsEqualToPage = (page, otherPage) => comparePages(page, otherPage) === 0;
+
 export const pageIsBeforePage = (page, beforePage) => comparePages(page, beforePage) === -1;
 
 export const pageIsAfterPage = (page, afterPage) => comparePages(page, afterPage) === 1;
@@ -105,14 +107,14 @@ export const getPageBetweenPages = (page, fromPage, toPage) => {
 
 export const getFirstValidPage = (...args) => args.find(p => !!p);
 
-export const getFirstArrayItem = (array) => {
-  if (!array) return undefined;
-  return array.length ? array[0] : undefined;
+export const getFirstArrayItem = (array, fallbackValue) => {
+  if (!array) return fallbackValue;
+  return array.length ? array[0] : fallbackValue;
 };
 
-export const getLastArrayItem = (array) => {
-  if (!array) return undefined;
-  return array.length ? array[array.length - 1] : undefined;
+export const getLastArrayItem = (array, fallbackValue) => {
+  if (!array) return fallbackValue;
+  return array.length ? array[array.length - 1] : fallbackValue;
 };
 
 export const composedPath = (el) => {
@@ -150,81 +152,6 @@ export const isMobile = {
   },
 };
 
-export const DateInfo = class DateInfo {
-  constructor(date, order = 0) {
-    if (!date) return;
-    const hasStart = !!date.start;
-    const hasEnd = !!date.end;
-    if (hasStart || hasEnd) {
-      // Normalize start and end dates
-      let start = new Date(date.start);
-      let end = new Date(date.end);
-      if (start > end) {
-        const temp = start;
-        start = end;
-        end = temp;
-      }
-      start.setHours(0, 0, 0, 0);
-      end.setHours(0, 0, 0, 0);
-      // Assign start and end dates
-      this.type = 'range';
-      this.isRange = true;
-      this.start = start;
-      this.startTime = start.getTime();
-      this.end = end;
-      this.endTime = end.getTime();
-    } else {
-      this.type = 'date';
-      this.isDate = true;
-      this.date = new Date(date);
-      this.date.setHours(0, 0, 0, 0);
-      this.dateTime = this.date.getTime();
-    }
-    this.order = order;
-    this.intersects = this.intersects.bind(this);
-  }
-
-  toRange() {
-    if (this.isDate) {
-      return {
-        start: new Date(this.dateTime),
-        startTime: this.dateTime,
-        end: new Date(this.dateTime),
-        endTime: this.dateTime,
-      };
-    }
-    return {
-      start: new Date(this.startTime),
-      startTime: this.startTime,
-      end: new Date(this.endTime),
-      endTime: this.endTime,
-    };
-  }
-
-  containsDate(date) {
-    if (this.isDate) return this.dateTime === date.getTime();
-    if (this.start && date < this.start) return false;
-    if (this.end && date > this.end) return false;
-    return true;
-  }
-
-  compare(other) {
-    if (this.order !== other.order) return this.order - other.order;
-    if (this.type !== other.type) return this.isDate ? 1 : -1;
-    if (this.isDate) return 0;
-    const diff = this.start - other.start;
-    return diff !== 0 ? diff : this.end - other.end;
-  }
-
-  intersects(other) {
-    if (this.isDate) {
-      return other.isDate ? this.dateTime === other.dateTime : other.containsDate(this.date);
-    }
-    if (other.isDate) return this.containsDate(other.date);
-    return this.containsDate(other.start) || this.containsDate(other.end);
-  }
-};
-
 /* eslint-disable */
 
 const shadeBlendConvert = (from, to, p) => {