Add flexible navigation support

Author: Nathan Reyes

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.0.9
+* Add support for more flexible month/year navigation
+* Fix popover visibility bug
+* Fix styling bug in date example
+
 ## 0.0.8
 * Add support for installing via CDN
 * Add licensing and copyright to README

docs/components/examples/ExStyling-2.vue

@@ -17,7 +17,8 @@ export default {
     const barDate = new Date();
     // Get start and end dates for the current week
     const startDate = new Date(thisMonthYear, thisMonth, barDate.getDate() - barDate.getDay());
-    const endDate = new Date(thisMonthYear, thisMonth, startDate.getDate() + 6);
+    const endDate = new Date(startDate);
+    endDate.setDate(startDate.getDate() + 6);
     return {
       selectedDate: null,
       themeStyles: {

docs/components/index-cdn.html

@@ -32,11 +32,17 @@ import CalendarPane from './CalendarPane';
 import Tag from './Tag';
 import '../assets/fonts/vcalendar/vcalendar.scss';
 import '../styles/lib.sass';
-
-import { themeStyles, getHighlight, dot, bar } from '../utils/defaults';
+import {
+  themeStyles,
+  getHighlight,
+  dot,
+  bar,
+} from '../utils/defaults';
 
 import {
   todayComps,
+  pageIsBeforePage,
+  pageIsAfterPage,
   getPrevPage,
   getNextPage,
   getPageBetweenPages,
@@ -82,12 +88,12 @@ export default {
       return this.isDoublePaned && !this.isDoublePaned_;
     },
     maxFromPage() {
-      if (!this.isDoublePaned_) return null;
-      return getPrevPage(this.toPage_);
+      if (this.isDoublePaned_) return getPrevPage(this.maxPage);
+      return this.maxPage;
     },
     minToPage() {
-      if (!this.isDoublePaned_) return null;
-      return getNextPage(this.fromPage_);
+      if (this.isDoublePaned_) return getNextPage(this.minPage);
+      return null;
     },
     themeStyles_() {
       // Mix user supplied styles with default styles
@@ -139,9 +145,15 @@ export default {
     },
     fromPage_(value) {
       this.$emit('update:fromPage', value);
+      if (!pageIsBeforePage(value, this.toPage_)) {
+        this.toPage_ = getNextPage(this.fromPage_);
+      }
     },
     toPage_(value) {
       this.$emit('update:toPage', value);
+      if (!pageIsAfterPage(value, this.fromPage_)) {
+        this.fromPage_ = getPrevPage(this.toPage_);
+      }
     },
     isDoublePaned_() {
       this.refreshToPage();

src/components/Calendar.vue

@@ -35,9 +35,35 @@
               <slot name='header-title' :page='p'>
                 <div
                   class='c-title-2'
-                  :style='titleStyle'
-                  @click='moveThisMonth'>
-                  {{ p.headerLabel }}
+                  :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>
                 </div>
               </slot>
             </div>
@@ -134,6 +160,7 @@ import Vue from 'vue';
 import CalendarWeeks from './CalendarWeeks';
 import {
   todayComps,
+  yearList,
   getIsLeapYear,
   getMonthComps,
   getThisMonthComps,
@@ -174,10 +201,10 @@ export default {
       pages: [],
       page_: null,
       transitionDirection: '',
-      prevPageStyle: null,
-      currPageStyle: null,
-      nextPageStyle: null,
+      monthNumber: 0,
+      yearNumber: 0,
       touchState: {},
+      yearList,
     };
   },
   computed: {
@@ -243,6 +270,24 @@ 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() {
@@ -255,6 +300,16 @@ export default {
     this.preloadPages();
   },
   methods: {
+    monthIsDisabled(month) {
+      if (this.minPage && this.yearNumber === this.minPage.year) return month < this.minPage.month;
+      if (this.maxPage && this.yearNumber === this.maxPage.year) return month > this.maxPage.month;
+      return false;
+    },
+    yearIsDisabled(year) {
+      if (this.minPage && year < this.minPage.year) return true;
+      if (this.maxPage && year > this.maxPage.year) return true;
+      return false;
+    },
     touchStart(e) {
       const t = e.changedTouches[0];
       this.touchState = {
@@ -468,7 +523,6 @@ export default {
     +box()
     flex-grow: 1
     position: relative
-    overflow: hidden
     .c-title-1
       position: absolute
       left: 0
@@ -478,16 +532,33 @@ export default {
       display: flex
       align-items: center
       .c-title-2
+        +box()
         font-weight: $titleFontWeight
         font-size: $titleFontSize
-        transition: $titleTransition
-        cursor: pointer
         user-select: none
         margin: $titleMargin
         text-align: center
         width: 100%
-        &:hover
-          opacity: 0.5
+
+        .c-select-container
+          position: relative
+          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
     &.align-left
       order: -1
       .c-title-2

src/components/CalendarPane.vue

@@ -64,6 +64,7 @@ export default {
   created() {
     window.addEventListener('touchstart', this.touchStart);
     window.addEventListener('touchend', this.touchEnd);
+    this.visibleDelay = this.visible_;
   },
   methods: {
     touchStart(e) {

src/components/Popover.vue

@@ -2,6 +2,7 @@ import colors from './colors';
 
 // Calendar data
 export const daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+export const yearList = Array.apply(null, Array(201)).map((_, i) => 1900 + i); // eslint-disable-line prefer-spread
 export const today = new Date();
 export const todayComps = {
   year: today.getFullYear(),
@@ -52,7 +53,6 @@ export const pageIsBeforePage = (page, beforePage) => comparePages(page, beforeP
 
 export const pageIsAfterPage = (page, afterPage) => comparePages(page, afterPage) === 1;
 
-
 export const getMinPage = (...args) => args.reduce((prev, curr) => {
   if (!prev) return curr;
   if (!curr) return prev;