vue-better-calendar

A calendar component for vuejs.

关于vue-better-calendar

vue-better-calendar是一个基于vue的日期选择插件，它提供了四种日期选择模式（范围选择，多选，签到，单选）

在线示例

签到模式

单选模式

范围选择模式

安装

使用npm安装

  npm install --save vue-better-calendar

ES6方式导入

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

在组件中引入

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

直接连入页面使用

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vue-better-calendar.js"></script>

  <div id="app">
    <vue-better-calendar></vue-better-calendar>
  </div>

  <script>
    new Vue({
      el: '#app'
    })
  </script>

参数

名称	类型	默认值	说明
mode	String	multi	日期选择模式，支持四个有效值：multi 多选，range 范围选择，sign 签到，single 单选
notSignInOtherMonthsTxt	String	不能在本月外进行签到	签到时点击本月外日期时的文本提示
notSignInOtherDaysTxt	String	签到只能在当天进行	签到时点击本月内非当天日期时的文本提示
alreadySignTxt	String	本日已经进行过签到	签到时点击已经签过到的日期时的文本提示
signSuccessTxt	String	签到成功	签到成功时的文本提示
limitBeginDate	Array	[]	限制可被选择的日期范围的开始日期，传参格式:[2018, 3, 1]
limitEndDate	Array	[]	限制可被选择的日期范围的结束日期，传参格式:[2018, 4, 24]
signedDates	Array	[]	已经签过到的日期,仅在签到模式下有用，传参格式：['2018-03-01', '2018-03-05']
isZeroPad	Boolean	true	点选日期后返回结果中的日期月份和天数不够两位数时是否补0
disabledDates	Array	[]	设置不可被选择的日期，传参格式:[[2018, 3, 1], [2018, 3, 24]]
showLunar	Boolean	true	是否显示农历
showDisableDate	Boolean	true	是否显示不可被选择的日期
weeks	Array	['日', '一', '二', '三', '四', '五', '六']	星期栏文本
months	Array	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']	月份栏文本
events	Object	{'2018-3-22': {className: 'price',title: '¥232',styles: {}}}	为某个日期添加单独的事件和文本
ctlColor	String	#5e7a88	切换按钮颜色
labelToday	Object	{showLabelToday: true,label: '今天'}	当天是否将显示的日期换成文本
disableBeforeToday	Boolean	false	是否将今天以前的日期全部设为不可用
disableAfterToday	Boolean	false	是否将今天以后的日期全部设为不可用
hideHeader	Boolean	false	隐藏顶部日期月份选择显示
hideWeeks	Boolean	false	隐藏星期显示

支持事件

名称	回调参数	说明
select-year	year	选择年份时触发
select-month	month, year	选择月份时触发
select-range-date	selectedDates	范围选择模式下，选中想选择的日期范围时触发，返回选中的所有日期
select-multi-date	selectedMultiDays	多选模式下，选中想选择的日期时触发，返回选中的所有日期
click-disable-date	date,mode	点击不可选择日期时触发，返回所点击的日期和当前日期模式
select-sign-date	{status,msg,signedDates}	点击日期签到时触发，status表示签到是否成功，msg为此次签到是否成功的提示语，signedDates为目前已经签过到的所有日期
select-single-date	date	单选模式下，选则日期时触发，返回所选择的日期
reset-select-range-date	无回调参数	范围选择模式下，重置选择的日期时触发
next	month, year	切换到下一个月或者下一年时触发
prev	month, year	切换到上一个月或者上一年时触发

支持方法

名称	描述
setToday	选中当天日期
resetRangDate	范围选择模式下，重置已选择的日期范围
sign	单独通过按钮点击进行签到，会触发select-sign-date事件