Merge branch 'master' of github.com:charliekassel/vuejs-datepicker

* 'master' of github.com:charliekassel/vuejs-datepicker:
  Fix missing descriptions in props table
  Add calendarClass as prop to allow for customization of calendar component

Author: Charlie Kassel

README.md

@@ -58,27 +58,28 @@ Inline always open version
 ```
 ## Available props
 
-| Prop                  | Type         | Default     | Description                              |
-|-----------------------|--------------|-------------|------------------------------------------|
-| value                 | Date/String  |             | Date value of the datepicker             |
-| name                  | String       |             | Input name property                      |
-| id                    | String       |             | Input id                                 |
-| format                | String       | dd MMM yyyy | Date formatting string                   |
-| language              | String       | en          | Translation for days and months          |
-| disabled              | Object       |             | See below for configuration              |
-| placeholder           | String       |             | Input placeholder text                   |
-| inline                | Boolean      |             | To show the datepicker always open       |
-| input-class           | String|Object|             | CSS class applied to the input el        |
-| wrapper-class         | String|Object|             | CSS class applied to the outer div       |
-| monday-first          | Boolean      | false       | To start the week on Monday              |
-| clear-button          | Boolean      | false       | Show an icon for clearing the date       |
-| clear-button-icon     | String       |             | Use icon for button (ex: fa fa-times)    |
-| calendar-button       | Boolean      | false       | Show an icon that that can be clicked    |
-| calendar-button-icon  | String       |             | Use icon for button (ex: fa fa-calendar) |
-| bootstrapStyling      | Boolean      | false       | Output bootstrap styling classes         |
-| initial-view          | String       | 'day'       | If 'month' or 'year', open on that view  |
-| disabled-picker       | Boolean      | false       | If true, disable Datepicker on screen    |
-| required              | Boolean      | false       | Sets html required attribute on input    |
+| Prop                  | Type          | Default     | Description                              |
+|-----------------------|---------------|-------------|------------------------------------------|
+| value                 | Date\|String  |             | Date value of the datepicker             |
+| name                  | String        |             | Input name property                      |
+| id                    | String        |             | Input id                                 |
+| format                | String        | dd MMM yyyy | Date formatting string                   |
+| language              | String        | en          | Translation for days and months          |
+| disabled              | Object        |             | See below for configuration              |
+| placeholder           | String        |             | Input placeholder text                   |
+| inline                | Boolean       |             | To show the datepicker always open       |
+| calendar-class        | String\|Object|             | CSS class applied to the calendar el     |
+| input-class           | String\|Object|             | CSS class applied to the input el        |
+| wrapper-class         | String\|Object|             | CSS class applied to the outer div       |
+| monday-first          | Boolean       | false       | To start the week on Monday              |
+| clear-button          | Boolean       | false       | Show an icon for clearing the date       |
+| clear-button-icon     | String        |             | Use icon for button (ex: fa fa-times)    |
+| calendar-button       | Boolean       | false       | Show an icon that that can be clicked    |
+| calendar-button-icon  | String        |             | Use icon for button (ex: fa fa-calendar) |
+| bootstrapStyling      | Boolean       | false       | Output bootstrap styling classes         |
+| initial-view          | String        | 'day'       | If 'month' or 'year', open on that view  |
+| disabled-picker       | Boolean       | false       | If true, disable Datepicker on screen    |
+| required              | Boolean       | false       | Sets html required attribute on input    |
 
 ## Events
 

src/components/Datepicker.vue

@@ -18,7 +18,7 @@
     </div>
 
         <!-- Day View -->
-        <div class="vdp-datepicker__calendar" v-show="showDayView" v-bind:style="calendarStyle">
+        <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" v-bind:style="calendarStyle">
             <header>
                 <span
                     @click="previousMonth"
@@ -40,7 +40,7 @@
         </div>
 
         <!-- Month View -->
-        <div class="vdp-datepicker__calendar" v-show="showMonthView" v-bind:style="calendarStyle">
+        <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showMonthView" v-bind:style="calendarStyle">
             <header>
                 <span
                     @click="previousYear"
@@ -60,7 +60,7 @@
         </div>
 
         <!-- Year View -->
-        <div class="vdp-datepicker__calendar" v-show="showYearView" v-bind:style="calendarStyle">
+        <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showYearView" v-bind:style="calendarStyle">
             <header>
                 <span @click="previousDecade" class="prev"
                     v-bind:class="{ 'disabled' : previousDecadeDisabled(currDate) }">&lt;</span>
@@ -115,6 +115,9 @@ export default {
     inline: {
       type: Boolean
     },
+    calendarClass: {
+      type: [String, Object]
+    },
     inputClass: {
       type: [String, Object]
     },