vue-jquery-calendar

vue-jquery-calendar is wrapper vue package of jquery ui datepicker

Installation

npm install --save vue-jquery-calendar

Or using yarn

yarn add vue-jquery-calendar -dev

For Installing plugin import vue-jquery-calendar in your component page.

//foo.vue
import VueJqueryCalendar from 'vue-jquery-calendar';
export default {
  components: {
    VueJqueryCalendar,
  },
}

Note

Please note that this package depends on jQuery and jquery-ui, but you won't need to add it to your project manually, vue-jquery-calendar will handle this for you automatically if this dependencies are not detected.

CSS

For vue-jquery-calendar appearance import jquery-ui css in App.vue main file

<style>
@import '~jquery-ui-dist/jquery-ui.css';
</style>

Example App

try out this Code Sandbox

Basic Usage

You can pass an array of fullclendar objects through the props

<VueJqueryCalendar v-model="date" :class-name="'form-control'" date-format="dd-mm-yy" :readonly="true" />
...
<script>
import moment from 'moment';
import VueJqueryCalendar from 'vue-jquery-calendar';
...
  components: {
    VueJqueryCalendar,
  },
  data() {
    return {
        date: moment().subtract(30, "days").format("DD-MM-YYYY"),
    }
  }
...
</script> 

Props

Events