added past years

Author: liloow

.eslintrc.js

@@ -9,9 +9,10 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'eol-last': 'error',
+    semi: 0,
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
     parser: 'babel-eslint',
   },
-};
+}

README.md

@@ -85,14 +85,17 @@ Emits events
 
 ## Available props
 
-| Prop        | Type    | Default | Description                                                                                                           |
-| :---------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------- |
-| days        | Number  | 365     | Number of days to append                                                                                              |
-| months      | Number  | 12      | Numbers of months to append (has precedence over `days` if custom set)                                                |
-| years       | Number  | 0       | Number of years to append and enable year mode (see [Demo](#demo) )                                                   |
-| fullMonths  | Boolean | false   | Weither or not to always use complete months (i.e. `days=1` if set to `true` the whole month is going to be appended) |
-| accentColor | String  | #00008b | Set the accent color (`HEX` or `CSS color names`)                                                                     |
-| lang        | String  | EN      | Language (see available in [Transations](#Translation))                                                               |
+| Prop           | Type    | Default | Description                                                                                                           |
+| :------------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------- |
+| days           | Number  | 365     | Number of days to append                                                                                              |
+| months         | Number  | 12      | Numbers of months to append (has precedence over `days` if custom set)                                                |
+| years          | Number  | 0       | Number of years to append and enable year mode (see [Demo](#demo) )                                                   |
+| prependedYears | Number  | 0       | Number of years to preppend. **Note:** this prop is ignored if years is not set                                       |
+| prepended      | Number  | 1       | Number of month to preppend                                                                                           |
+| pastIsDisabled | Boolean | true    | Allows the selection of alreay past days and predend the days of `prepended` months                                   |
+| fullMonths     | Boolean | false   | Weither or not to always use complete months (i.e. `days=1` if set to `true` the whole month is going to be appended) |
+| accentColor    | String  | #00008b | Set the accent color (`HEX` or `CSS color names`)                                                                     |
+| lang           | String  | EN      | Language (see available in [Transations](#Translation))                                                               |
 
 ## Events
 

demo/index.html

@@ -2,23 +2,34 @@
 <title>draggableCal demo</title>
 <script src="https://unpkg.com/vue"></script>
 <script src="../dist/draggableCal.umd.min.js"></script>
-<style>h1 {margin: 2.5rem 0;} </style>
+<style>
+  h1 {
+    margin: 2.5rem 0;
+  }
+</style>
 
-<div id="app" style="width = 95%">
+<div id="app" style="width: 95%">
   <h1> Classic version, all default</h1>
   <noyear></noyear>
   <h1> Custom version with 18 complete months </h1>
   <noyearcustom :days=2 :months=18 :full-months=true accent-color="#dbde1b"></noyearcustom>
   <h1> With years version, with 5 years</h1>
   <year :years=5 accent-color="#f44336"></year>
+  <h1> With past months version, with 11 months</h1>
+  <pastenabled :prepended=11 :past-is-disabled=false accent-color="#8bc34a"></pastenabled>
+  <h1> With past years version, with 3 years back and 5 to come</h1>
+  <pastenabledyears :prependedYears=3 :years=5 :past-is-disabled=false accent-color="#372838"></pastenabledyears>
+
 </div>
 
 <script>
-new Vue({
-  components: {
-    noyear: draggableCal,
-    year: draggableCal,
-    noyearcustom: draggableCal
-  }
-}).$mount('#app')
+  new Vue({
+    components: {
+      noyear: draggableCal,
+      year: draggableCal,
+      noyearcustom: draggableCal,
+      pastenabled: draggableCal,
+      pastenabledyears: draggableCal,
+    }
+  }).$mount('#app')
 </script>