HUI

# Calendar 日历

# Calendar 概述

使用日历组件显示一年日期

# Calendar 代码示例

# 基础用法

简单使用，显示当年日期

# 显示其他年份日期

显示其他年份日期。

# 禁用某日期或者范围

# 单选日期

disableDate 支持日期数组。

# 使用 render 自定义日期样式

可以通过 style 或 class 实现个性化样式

# 灵活使用属性

灵活使用 header 插槽、 currentYear、 currentMonth、 monthViewNum等属性，创建个性化的日历组件。

# 自定义右键菜单

通过具名插槽 menu，实现自定义的右键菜单功能。

# badges

添加 badges 并监听 on-badge-click 事件，处理 badge 携带数据
badges 为对象数组，每个对象必须包含两个属性 "date / num" 分别表示某个日期显示的 badge 数目，你也可以为对象添加更多其他属性以实现功能需求

# Calendar API

# Calendar props

属性 说明 类型 默认值
currentYear 传入日期年份 Number 当年/new Date().getFullYear()
currentMonth 传入日期月份(v1.0.34) Number 当月/new Date().getDate() + 1
disableDate 设置禁用，(v1.0.34)版本及以上支持设置日期数组，如：['2019-02-14','2019-04-07'] Function，Array --
multiSelect 是否多选 Boolean true
dateCellRender 自定义日期单元格显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为日期对象(v1.0.34) Function --
monthViewNum 同时展示几个月。可选：1,2,4,12。(v1.0.34) Number 12
enableCtxMenu 是否启用右键菜单。当设置 enableCtxMenu为false时， 右键菜单和插槽分发的右键菜单都将不会显示(v1.0.38)
注意：当面板没有任何选中项时，右击单元格，右键菜单不会弹出 v1.12.0		 Boolean true
badges 启用 badges 和 badge 点击事件，详情见示例(v1.0.40) Array []
dateData 预设日期信息，需设置date(Date对象，需要传入日期为当天的北京时间00:00:00,否则会造成日期计算错误)和workFlag(0：休息日，1：工作日)属性。 Array -
newOperationMode 开启新交互模式(支持鼠标划选、 按ctrl点击追加或反选、不按ctrl点击日期会清空之前选中日期重新选择新日期)(v1.0.68) Boolean false
weekSort false: 日历默认星期排版为周日到周六 默认
true: 日历星期排版为周一到周日 (v.1.0.70)		 Boolean false
cellWidth 配置日历控件单元格的宽度（v1.0.88）
不设置该属性，单元格宽度按照常规的逻辑执行
注意：当h\-calendar\-wrapper节点宽度本身很小的时候，cellWidth过大，导致计算出的盒子内容超过h\-calendar\-wrapper节点本身的情况下，单元格宽度会自适应。		 Number -
cellHeight 配置日历控件 单元格的高度（v1.0.88）
不设置该属性，单元格高度按照常规的逻辑执行 注意：默认要高于字体行高，不然会出现布局问题		 Number -
showPrevIcon 控制点击上一年或者上一月的箭头显示隐藏 Boolean true

# Calendar events

事件名 说明 返回值
on-click 点击当前日期时候触发 month 和 day
on-dblclick 双击当前日期时候触发 month 和 day
on-mouseover 移入当前日期时候触发 month 和 day
on-mouseout 移出当前日期时候触发 month 和 day
on-select 选中当前日期时候触发(v1.0.34) month 和 day
on-select-change 多选选中日期时候触发(v1.0.68) 包含所有选中日期数据的数组对象
on-context-menu 在日期单元格上右键时触发(v1.0.38) Event 对象和日期数据对象
on-badge-click 点击 badge 时触发(v1.0.40) 传入 badges 的某一项
on-preBtn-click 点击年(月)左侧切换按钮时触发(v1.0.43) 当前的年或月(返回起始月份)
on-nextBtn-click 点击年(月)右侧切换按钮时触发(v1.0.43) 当前的年或月(返回起始月份)

# Calendar slot

名称 说明
header 自定义日历头部
menu 右键菜单(v1.0.38)

# Calendar methods

方法名 说明 参数
getSelectDate 获取当前选中日期 (this.$refs.xxx.getSelectDate())(v1.0.34) 返回日期对象(Object)数组:
  • date 选中日期（Date类型）
  • workflag 是否工作日 workFlag 1 ，休息日 workFlag 0
  • disabled 是否disabled
  • isToday 是否是今天
  • formatDate 格式化的日期字符串“yyyy-MM-dd”
    • cancelAllSelected 取消当前已选中日期 (this.$refs.xxx.cancelAllSelected())(v1.0.58) -
    hideCtxMenu 关闭右键菜单 (v1.0.38) -