Calendar component made with Vue 2.0


A datepicker component vue 2 calendar, which supports lunar or date events. Many options can be used to configure these events or appearance.



Download or clone the repo and run npm install to install its dependencies.



import Calendar from 'components/Calendar'
export default {
  name: 'app',
  data () {
    return {
      disabled: [0],
      value: '2016-12-19',
      format: 'yyyy-MM-dd',
      clear: true,
      placeholder: 'placeholder is displayed when value is null or empty'
  components: {

Bind the options to your template


  <div id="app">
    <calendar :value="value" :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" ></calendar>

disabled array can contain the days of the week the user won't be able to pick in the calendar.


  • value: Value of the input DOM
  • width: '200px' Width of the input DOM
  • format: The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
  • disabled-days-of-week: Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
  • clear-button: If true shows an × shaped button to clear the selected date.
  • placeholder: Placeholder to put on the input field when no date (null or empty) is set

More info on GitHub.

Inspired by vue-strap datepicker component.