Merge branch 'dev'

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     'import/no-duplicates': 'off',
     'import/no-webpack-loader-syntax': 'off',
     'import/first': 'off',
+    'import/prefer-default-export': 'off',
     'no-console': 'off',
   }
 }

.gitignore

@@ -2,6 +2,7 @@
 node_modules/
 dist/
 lib/
+working/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.4.0
+* Fix weekday labels not always having same exact width
+* Add support for complex attribute dates. Closes #7 and #12.
+* Add support for attribute `excludeDates`, date picker `availableDates`. Closes #19.
+* Add support for endless date ranges using null for start/end dates. Closes #20.
+* Add support for attaching custom data to attributes via `customData` property. Closes #21.
+
+## 0.3.3
+* Fix duplicate input event for inline date picker
+
 ## 0.3.2
 * Fix styling bug introduced by v0.3.1.
 

README.md

@@ -22,6 +22,158 @@ Visit https://vcalendar.netlify.com for demos and API reference. This plug-in is
   * Handles taps for date selection
   * Handles swipes for month navigation
 
+# Usage
+
+## Calendar
+
+All attributes for a calendar are supplied within an array.
+
+A single attribute may consist of one of each of the following objects: higlights, dots, bars, content style, content hover style. Supply the attributes as an array for the `v-calendar` component.
+
+Here is an example of a simple highlight with a content style.
+
+```html
+<v-calendar :attributes='attrs'>
+</v-calendar>
+```
+
+```javascript
+export const {
+  data() {
+    return {
+      attrs: [
+        {
+          highlight: {
+            backgroundColor: 'red',
+            borderRadius: '5px'             // Only applied on highlighted end caps
+          },
+          contentStyle: {
+            color: 'white'                  // Contrasts well with the red background
+          },
+          dates: [
+            new Date(),                     // Use dates
+            {                               // ...or date ranges
+              start: new Date('1/21/83'),   // ...that start on my birthday :)
+              end: new Date()
+            }
+          ]
+          customData: myData                // Custom data to reference later
+        }
+      ]
+    }
+  }
+};
+```
+
+The `dates` array specifies dates for which all components of the attribute appear. As you can see, both date objects and date range objects are allowed, where the latter requires start and end dates when needed. For date ranges, null values are allowed for infinite start and end dates, in which case those properties can be ommitted entirely.
+
+### Date Patterns
+
+One really neat feature is that you can target specific dates from within a parent range. This allows for creating complex date patterns that would be difficult to achieve otherwise.
+
+For a simple example, let's say we want to display an attribute on the weekends. To do that, we configure the date like this:
+
+```javascript
+...
+attrs: [
+  {
+    highlight: {...},
+    contentStyle: {...},
+    dates: [
+      {
+        start: null,      // From the beginning of time...
+        end: null,        // ...to the end of time...
+        weekdays: [1, 7]  // ...on Sundays and Saturdays
+      }
+    ]
+  }
+]
+...
+```
+
+We can also target other specific day properties, like `days: [6, 15]` for the 6th and 15th of the month, `weeks: [-1]` for the last week of the month and even `ordinalWeekdays: { -1: [1] }` for the last Sunday of the month.
+
+If supplying only a single numerical argument, like `weeks: [-1]`, we can nix the array and simplify to `weeks: -1`.
+
+Additionally, if the date is applied over an infinite time scale (`start` and `end` dates are `null`) like the example before, we can remove `start` and `end` completely. And since our date object is the only one in the array, we can nix the array again like before.
+
+```javascript
+...
+attrs: [
+  {
+    highlight: {...},
+    contentStyle: {...},
+    dates: { weekdays: [1, 7] } // Nice and tidy
+  }
+],
+```
+
+Let's consider another simple example of displaying dot indicators on the last Friday of every other month, starting on January 1st of 2018. We could do so like this.
+
+```javascript
+...
+  attrs: [
+    {
+      dot: { backgroundColor: 'red' },
+      dates: {
+        start: new Date('1/1/2018'),
+        monthlyInterval: 2,           // Every other month
+        ordinalWeekdays: { [-1]: 6 }  // ...on the last Friday
+      }
+    }
+  ]
+...
+```
+
+Now, for some reason, we also want to display them on the 15th of every other month, so our first attempt might be to modify the dates to this:
+
+```javascript
+...
+dates: {
+  start: new Date('1/1/2018'),
+  monthlyInterval: 2,           // Every other month
+  ordinalWeekdays: { [-1]: 6 }, // ...on the last Friday
+  days: 15                      // ...and on the 15th? (WRONG!)
+},
+...
+```
+
+But this would be **wrong**, because all component specifiers are conditionally *anded* with each other.
+
+To evaluate a set of conditions *or* another set, we can break the sets of conditions out into an array assigned to the `on` property.
+
+```javascript
+...
+dates: {
+  start: new Date('1/1/2018'),
+  monthlyInterval: 2,                 // Every other month
+  on: [                               // ...on...
+    { ordinalWeekdays: { [-1]: 6 } }, // ...the last Friday
+    { days: 15 }                      // ...or the 15th of the month
+  ]
+}
+...
+```
+
+Note how we kept the `monthlyInterval` condition outside of the others. Any conditions that should be **anded** with all the others can be extracted out of the array. This prevents unnecessary duplication of conditions within **or** subsets.
+
+Here is a complete reference of date component specifiers available.
+
+| Property | Type | Description | Range |
+| --- | --- | --- | --- |
+| `days` | Number, Array | Day number from the start or end of the month. | 1 to 31, -1 to -31 |
+| `weekdays` | Number, Array | Day of the week. | 1: Sun to 7: Sat |
+| `ordinalWeekdays` | Object (key: Number / value: Number, Array) | Weekday ordinal position from the start or end of the month. | key: 1 to 6, -1 to -6 / value: 1: Sun to 7: Sat |
+| `weeks` | Number, Array | Week number from the start or end of the month. | 1 to 6, -1 to -6 |
+| `months` | Number, Array | Months of the year. | 1 to 12 |
+| `years` | Number, Array | Year numbers. | 4-digit integer |
+| `dailyInterval` | Number | Interval number of days from the start date (or today when no start date provided). | n > 0 |
+| `weeklyInterval` | Number | Interval number of weeks from the start date (or today). | n > 0 |
+| `monthlyInterval` | Number | Interval number of months from the start date (or today). | n > 0 |
+| `yearlyInterval` | Number | Interval number of years from the start date (or today). | n > 0 |
+
+
+
 ## Quick Start
 
 [Vue.js](https://vuejs.org) version 2.4+ is required.

_todos.txt

@@ -1,5 +1,4 @@
-- Add day-height back as a prop
-- Code copy button does not work
+- Add ordinalWeekday and ordinalWeekdayFromEnd props to dayInfo
 
 CALENDAR
 
@@ -20,3 +19,9 @@ Day cell overflow problem:
 For c-day classes, there is catch with setting overflow: hidden.
 If it is set, then sometimes a blank line can appear between day cell highlights.
 If it is not set, then transparent backgrounds can interfere with each other during animations.
+
+THOUGHTS:
+
+An attribute date specified as a range may also specify a filter function that slices up that range.
+If a filter function is specified, then a new scanEnd date will need to be calculated using a maxLength
+parameter on the date in order to know when to stop testing for a date match on that attribute.

docs/components/home/examples/ExDatePicker.vue

@@ -21,37 +21,25 @@
 </template>
 
 <script>
-import { getExampleMonthComps } from '@/utils/helpers';
-
-const { thisMonth, thisMonthYear, nextMonth, nextMonthYear } = getExampleMonthComps();
-
 export default {
   props: {
-    mode: { type: String, default: 'range' },
+    mode: { type: String, default: 'single' },
     selectColor: { type: String, default: '#66b3cc' },
     dragColor: { type: String, default: '#9fcfdf' },
     showDisabledDates: Boolean,
     isInline: Boolean,
     isExpanded: Boolean,
     popoverExpanded: Boolean,
-    popoverVisibility: { type: String, default: 'hover' },
+    popoverVisibility: { type: String, default: 'visible' },
     popoverDirection: { type: String, default: 'bottom' },
     popoverAlign: { type: String, default: 'left' },
   },
   data() {
     return {
       fromPage: null,
       toPage: null,
-      selectedValue: {
-        start: new Date(thisMonthYear, thisMonth, 6),
-        end: new Date(nextMonthYear, nextMonth, 25),
-      },
-      disabledDates: [
-        {
-          start: new Date(nextMonthYear, nextMonth, 26),
-          end: new Date(nextMonthYear, nextMonth, 28),
-        },
-      ],
+      selectedValue: new Date(),
+      disabledDates: { weekdays: [1, 7] },
       todayAttribute: {
         contentStyle: {
           color: '#ffffff',

docs/components/home/examples/ExHighlights.vue

@@ -28,14 +28,19 @@ export default {
             color: 'white',
           },
           dates: [
-            // Use date ranges
+            // Use single dates
+            new Date(nextMonthYear, nextMonth, 6),
+            new Date(nextMonthYear, nextMonth, 23),
+            // ...or date ranges
             {
               start: new Date(thisMonthYear, thisMonth, 1),
               end: new Date(thisMonthYear, thisMonth, 4),
             },
-            // Or single dates
-            new Date(nextMonthYear, nextMonth, 6),
-            new Date(nextMonthYear, nextMonth, 23),
+            // ...or complex date patterns
+            {
+              start: new Date(thisMonthYear, thisMonth, 1),
+              ordinalWeekdays: { [-1]: 7 }, // Last Saturday of the month
+            },
           ],
         },
         {

docs/components/home/sections/SectionDatePicker.vue

@@ -22,20 +22,6 @@
           </b-tab-item>
           <!--DatePicker Example Options-->
           <b-tab-item label='Options' icon='gear'>
-            <b-field grouped>
-              <b-field>
-                <b-switch v-model='showDisabledDates'>Show disabled dates</b-switch>
-              </b-field>
-              <b-field>
-                <b-switch v-model='isInline'>Inline</b-switch>
-              </b-field>
-              <b-field v-if='isInline'>
-                <b-switch v-model='isExpanded'>Expanded</b-switch>
-              </b-field>
-              <b-field v-else>
-                <b-switch v-model='popoverExpanded'>Popover Expanded</b-switch>
-              </b-field>
-            </b-field>
             <b-field label='Mode'>
               <p class='control-offset'>
                 <b-radio v-model='mode' native-value='single'>Single</b-radio>
@@ -52,6 +38,21 @@
               </b-field>
             </b-field>
             <p class='tip'><strong>Note:</strong> Accepts color names, hex and rgb values</p>
+            <br />
+            <b-field grouped>
+              <b-field>
+                <b-switch v-model='showDisabledDates'>Show disabled dates</b-switch>
+              </b-field>
+              <b-field>
+                <b-switch v-model='isInline'>Inline</b-switch>
+              </b-field>
+              <b-field v-if='isInline'>
+                <b-switch v-model='isExpanded'>Expanded</b-switch>
+              </b-field>
+              <b-field v-else>
+                <b-switch v-model='popoverExpanded'>Popover Expanded</b-switch>
+              </b-field>
+            </b-field>
             <div v-if='!isInline'>
               <b-field label='Popover Visibility'>
                 <p class='control-offset'>
@@ -122,13 +123,13 @@ export default {
   data() {
     return {
       exDatePickerCode: ExDatePickerCode,
-      mode: 'range',
+      mode: 'single',
       selectedValue: null,
       showDisabledDates: false,
       isInline: false,
       isExpanded: false,
-      popoverExpanded: false,
-      popoverVisibility: 'hover',
+      popoverExpanded: true,
+      popoverVisibility: 'visible',
       popoverVisibilities: ['hover', 'focus', 'visible', 'hidden'],
       popoverDirection: 'bottom',
       popoverDirections: ['bottom', 'top', 'left', 'right'],