A customizable and nice-looking calendar / datepicker component for Vue.js 2.

Date _Time



vue 2 calendar, datepicker component which supported lunar or date event

Live Demo >>

  • This project is not only a vue component, but also a webpack multi-page project in action.

  • Boostrap style like

  • I18n support

  • Community feedback


$ npm install vue2-slot-calendar

Import using module

 // js file import 'vue2-slot-calendar/lib/calendar.min.css'; import calendar from 'vue2-slot-calendar/lib/calendar';  // vue file // in ES6 modules import Calendar from 'vue2-slot-calendar';  // in CommonJS const Calendar = require('vue2-slot-calendar');  // in Global variable const VueCalendar = Calendar;

Import using script tag

<link rel="stylesheet" href="../node_modules/vue2-slot-calendar/lib/calendar.min.css" > <script src="../node_modules/vue2-slot-calendar/lib/calendar.min.js"></script>

Also see the demo file, example/demo.html

I18n support

currently, provide window.VueCalendarLang function hook to change your lang

  translations(lang) {     lang = lang || "en";     let text = {       daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],       limit: "Limit reached ({{limit}} items max).",       loading: "Loading...",       minLength: "Min. Length",       months: [         "January",         "February",         "March",         "April",         "May",         "June",         "July",         "August",         "September",         "October",         "November",         "December"       ],       notSelected: "Nothing Selected",       required: "Required",       search: "Search"     };     return window.VueCalendarLang ? window.VueCalendarLang(lang) : text;   },

Build Setup

# install dependencies npm install  # serve with hot reload at localhost:4000 npm run dev  # build for production with minification npm run build  # run unit tests npm run unit  # run all tests npm test



<calendar   :value="value"   :disabled-days-of-week="disabled"   :format="format"   :clear-button="clear"   :placeholder="placeholder"   :pane="2"   :has-input="false"   :on-day-click="onDayClick2"   :special-days="_dateMap" ></calendar>

Use slot to render async data

<calendar   class="event-calendar"   :value="value"   :disabled-days-of-week="disabled"   :format="format"   :clear-button="clear"   :placeholder="placeholder"   :pane="2"   :has-input="false"   :on-day-click="onDayClick3"   :change-pane="changePane" >   <div v-for="evt in events" :slot="evt.date">     ${{evt.content}} <i :class="{low : evt.low}" v-if="evt.low">↓</i>   </div> </calendar>

Range Hover Status

<calendar   :value="value"   :disabled-days-of-week="disabled"   :format="format"   :clear-button="clear"   :placeholder="placeholder"   :pane="2"   :range-bus="getBus"   :range-status="1" ></calendar>  <calendar   :value="value"   :disabled-days-of-week="disabled"   :format="format"   :clear-button="clear"   :placeholder="placeholder"   :pane="2"   :range-bus="getBus"   :range-status="2" ></calendar>



Name Type Default Description
value String '' Value of the input DOM
width String '200px' Width of the input DOM
format String MMMM/dd/yyyy The date format, combination of d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-week Array Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated.
clear-button Bollean false If true shows an × shaped button to clear the selected date. Usefull in forms where date entry is optional.
placeholder String Placeholder to put on the input field when no date (null or empty) is set
hasInput Boolean true Default is has-input style, if don't have input will show pane directly
pane Number 1 pane count
borderWidth Number 2 This value is for calculating the pane width
onDayClick Function Only for hasInput set false
specialDays Object To repalce the day text
changePane Function For pane change parameter (year, month, pane) month[0,11], demo /src/modules/Docs.vue
rangeBus Function should return new Vue() as sibling component communication events bus
rangeStatus Number 0 Default is disabled range hover effect, currently only support [0,1,2] 1 will communicate with 2
onDrawDate Function DrawDate Function allowSelect to update date cell style
showDateOnly Boolean false show date pane only
transfer Boolean false transfer popup to document.body
elementId String elementId for label tag for attribute
firstDayOfWeek Number 0 first day of the week, default sunday, [0,6]


Name Description
drawdate drawdate Event like onDrawDate
  props: {     value: {       type: [String, Date]     },     format: {       default: 'MM/dd/yyyy'     },     firstDayOfWeek: {       // sunday       default: 0     },     disabledDaysOfWeek: {       type: Array,       default () {         return []       }     },     width: {       type: String,       default: '200px'     },     clearButton: {       type: Boolean,       default: false     },     inputClasses: {       type: String,       default: ''     },     lang: {       type: String,       default: navigator.language     },     placeholder: {       type: String     },     hasInput: {       type: Boolean,       default: true     },     pane: {       type: Number,       default: 1     },     borderWidth: {       type: Number,       default: 2     },     onDayClick: {       type: Function,       default () {}     },     changePane: {       type: Function,       default () {}     },     specialDays: {       type: Object,       default () {         return {}       }     },     rangeBus: {       type: Function,       default () {         // return new Vue()       }     },     rangeStatus: {       type: Number,       default: 0     },     onDrawDate: {       type: Function,       default () {}     },     maxDate: {       type: String     },     minDate: {       type: String     },     showDateOnly: {       type: Boolean,       default: false     },     transfer: {       type: Boolean,       default: false     },     elementId: [String]   }


Inspired by vue-strap datepicker component.

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

You May Also Like