A calendar component for vuejs.
vue-better-calendar is a date selection plugin based on vue. It provides four date selection modes (range selection, multiple selection, check-in, single selection)
npm install --save vue-better-calendar
import VueBetterCalendar from 'vue-better-calendar'
Vue.use(VueBetterCalendar)
<vue-better-calendar></vue-better-calendar>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vue-better-calendar@1.3.0/dist/vue-better-calendar.js"></script>
<div id="app">
<vue-better-calendar></vue-better-calendar>
</div>
<script>
new Vue({
el: '#app'
})
</script>
Name | Type | Default Value | Description |
---|---|---|---|
mode | String | multi | Date selection mode, supports four valid values: multi multiple selection, range selection, sign check-in, single single selection |
notSignInOtherMonthsTxt | String | Cannot sign in outside this month | Text prompt when you click on a date outside this month when signing in |
notSignInOtherDaysTxt | String | Sign-in can only be done on the same day | When signing in, click the text prompt when the day is not the current month |
alreadySignTxt | String | I have already signed in today | The text prompt when you click on the date that has already been signed when you sign in |
signSuccessTxt | String | Sign-in success | Text prompt when sign-in is successful |
limitBeginDate | Array | [] | Limit the start date of the date range that can be selected, the parameter format: [2018, 3, 1] |
limitEndDate | Array | [] | Limit the end date of the date range that can be selected, the parameter format: [2018, 4, 24] |
signedDates | Array | [] | The date that has been signed in, only useful in sign-in mode, the parameter format: [‘2018-03-01’, ‘2018-03-05’] |
isZeroPad | Boolean | true | After clicking the date, whether to add 0 when the month and day in the result returned are not two digits |
disabledDates | Array | [] | Set the date that cannot be selected, the parameter format: [[2018, 3, 1], [2018, 3, 24]] |
showLunar | Boolean | true | Whether to show the lunar calendar |
showDisableDate | Boolean | true | Whether to display dates that cannot be selected |
weeks | Array | [‘day’,‘one’,‘two’,‘three’,‘four’,‘five’,‘six’] | week column text |
months | Array | [‘January’,‘February’,‘March’,‘April’,‘May’,‘June’,‘July’,‘August’,‘September’ ,‘October’,‘November’,‘December’] | Month column text |
events | Object | {‘2018-3-22’: {className:‘price’,title:‘¥232’,styles: {}}} | Add separate events and text for a certain date |
ctlColor | String | #5e7a88 | Toggle button color |
labelToday | Object | {showLabelToday: true,label:‘Today’} | Whether to change the displayed date to text today |
disableBeforeToday | Boolean | false | Whether to set all dates before today to be unavailable |
disableAfterToday | Boolean | false | Whether to set all dates after today to be unavailable |
hideHeader | Boolean | false | Hide the top date and month selection display |
hideWeeks | Boolean | false | Hide week display |
Name | Callback parameters | Description |
---|---|---|
select-year | year | Triggered when the year is selected |
select-month | month, year | Triggered when the month is selected |
select-range-date | selectedDates | In range selection mode, trigger when the date range you want to select is selected, and all selected dates are returned |
select-multi-date | selectedMultiDays | In multi-select mode, trigger when the date you want to select is selected, and all selected dates are returned |
click-disable-date | date,mode | Triggered when a non-selectable date is clicked, returns the clicked date and current date mode |
select-sign-date | {status,msg,signedDates} | Triggered when you click on the date to sign in, status indicates whether the sign-in is successful, msg is a reminder of whether the sign-in is successful, signedDates is all dates that have been signed in so far |
select-single-date | date | In single selection mode, trigger when a date is selected, and return the selected date |
reset-select-range-date | No callback parameter | In range selection mode, trigger when the selected date is reset |
next | month, year | Triggered when switching to the next month or the next year |
prev | month, year | Triggered when switching to the previous month or year |
Name | Description |
---|---|
setToday | Select today’s date |
resetRangDate | In range selection mode, reset the selected date range |
sign | Sign in by clicking the button alone will trigger the select-sign-date event |
Author: xwpongithub
Source Code: https://github.com/xwpongithub/vue-better-calendar
#vue #vuejs #javascript