HUI

# Schedule 日程表

TIP

（v1.0.35）

# Schedule 概述

使用日程表组件显示每天的日程安排

# Schedule 代码示例

# 基础用法

简单使用，展示日程

# 自定义表头

简单使用，展示日程

# circleEvent

简单使用，展示日程

# event-day-over-one && 事件触发

简单使用，展示日程

# event-day-over-begin && showEventItemCircle

个性化使用日程控件

# Schedule API

# Schedule props

属性 说明 类型 默认值
events 日程数据，由日程对象组成。
当events日程事件事件间隔超出一天时，当前的日程新增event-day-over-one类名，自定义样式，区别单日事件和多日事件 (v1.1.3)
当events日程事件事件间隔超出一天时，当前事件的第一天的单元格内，新增event-day-over-begin类名 (v1.5.1)
当events日程事件的对象中设置color属性(eg:color: '#ddd')，则当前事件前面添加color属性值为颜色的圆点 (v1.5.1)		 Array -
cell 设置单元格的属性对象（v1.1.3）
cellWidth 日程控件单元格的宽度（Number类型）
不设置该属性，单元格宽度按照常规的逻辑执行
注意：日程表单元格长宽可配置宽度后cellWidth后，h-calendar-wrapper的dom结点的宽度为cellWidth*7的像素
cellHeight 日程控件元格的高度（Number类型）
不设置该属性，单元格高度按照常规的逻辑执行 注意：默认要高于字体行高，不然会出现布局问题
优化说明：(v1.1.3)
1. 当设置 cellHeight < 58；存在event事件，仅展示更多图标；
2. 当设置 cellHeight < 76；存在event事件 >2，仅展示1条 evnet 事件 + 更多图标；
3. 当设置 cellHeight < 76；存在event事件==2，展示2条 evnet 事件；
4. 当出现单元格 event 事件缺少，可增加 cellHeight 值来解决；
5. 一般显示事件个数规则：cellHeight > 40 + 18 * num（num: 需要直接显示在单元格个数）		 Object { cellWidth: 0, cellHeight: 0, }
circleEvent 显示事件 event 的方式只显示红点提示（v1.1.1） Boolean false
showTitle 单元格日期显示的event事件，鼠标悬停，显示title提示（v1.4.0） Boolean false
showEventItemCircle 单个事件前面新增小圆点，搭配event对象设置color使用,代表小圆点的颜色 （eg: color: '#ddd'）（v1.5.1） Boolean false

# Schedule Event

日程对象

属性 说明 类型 默认值
startDate 开始日期。yyyy-MM-dd 格式字符串。 String -
endDate 结束日期。yyyy-MM-dd 格式字符串。 String -
title 日程标题 String -

其他属性可以自行添加，但是不要使用内部已占用的属性名 order 和 hidden

# Schedule events

事件名 说明 返回值
on-click 点击当前日期时候触发 month 和 day event(当前日期的日程事件)（v1.1.3）
on-dblclick 双击当前日期时候触发 month 和 day event(当前日期的日程事件)（v1.1.3）
on-select 选中当前日期时候触发 month 和 day event(当前日期的日程事件)（v1.1.3）
on-right-click 鼠标右击当前日期时出发（v1.1.3） （v1.1.3） month 和 day event(当前日期的日程事件)
on-event-click 点击日程时触发 日程对象
on-event-dbclick 双击日程时触发 日程对象
on-panel-change 日期面板切换时触发(v1.0.45) 切换后 Date 对象和切换前 Date 对象

# Schedule method

方法名 返回值
jumpToday 跳转面板到今日所在的年月
prevMonth 跳转到上一月
nextMonth 跳转到下一月
prevYear 跳转到上一年
nextYear 跳转到下一年

# Schedule slot

名称 说明
header Schedule 头部