Morioh
Login
Jack Downson

Jack Downson

3 years ago

A Calendar Component for Vuejs

vue-better-calendar

A calendar component for vuejs.

About vue-better-calendar

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)

Online example

Sign-in mode

Single selection mode

Range selection mode

installation

Install using npm

  npm install --save vue-better-calendar

ES6 import

  import VueBetterCalendar from 'vue-better-calendar'
  Vue.use(VueBetterCalendar)

Introduced in the component

  <vue-better-calendar></vue-better-calendar>

Connect directly to the page to use

  <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>

Parameters

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

Support Events

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

Support method

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

Download Details:

Author: xwpongithub

Source Code: https://github.com/xwpongithub/vue-better-calendar

#vue #vuejs #javascript

A Calendar Component for Vuejs
3.50 GEEK