A calendar component for vuejs.It offers four date selection modes (range selection, multiple selection, check in, radio)

Lemon

Last update: Nov 20, 2022

Related tags

Overview

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

You might also like...

Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

425 Dec 27, 2022

a horizontal calendar component for Vue.js

37 Aug 10, 2022

A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

6 Jun 15, 2022

vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

1.5k Dec 18, 2022

A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

633 Nov 11, 2022

An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

3.7k Dec 31, 2022

Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. 中文文档 📺 Live demo I

75 Nov 11, 2022

Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

129 Aug 13, 2022

Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. 🚩 Table of Contents Collect statistics on the use of open source Install

195 Dec 6, 2022

Releases(1.3.2)

1.3.2(Jun 25, 2018)

1.去掉了多余的nextTick 2.加入了ready事件，日期加载完毕后触发
Source code(tar.gz)
Source code(zip)
1.3.0(Apr 11, 2018)

1.对日期样式做了重写 2.修复了日期模式的一些已知bug
Source code(tar.gz)
Source code(zip)