日历控件
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-w000027
Attribute
属性 | 描述 |
---|---|
item-tpl | 渲染每一格使用的dot模板 |
current-date | 设置要渲染的月份 |
multiple | 是否多选 |
hide-title | 隐藏日历头部 |
Method
方法 | 描述 | 说明 |
---|---|---|
set_month | 设置要显示的月份 | 传参年月 |
render_item | 使用自定义数据渲染某一天 | 传入某一天的数据,数据内的date字段标示当天的日期。定制化不高的话可以不设置 |
current_date | 设置选中 | 状态不会保留 |
restore | 恢复选中的内容 |
Event
事件 | 描述 | 返回值格式 |
---|---|---|
fdwe-select | 选中日历触发的事件 | { year, month, date_str } |
fdwe-change | 日历月份切换是触发的事件 | { select_date } |
使用规范
尽量使用px设置控件大小
item-tpl
使用item-tpl属性,使用者可以灵活得定义表格内每一项的内容,
{{? it.holiday}}
<span>{{=it.holiday}}<span>
{{?? it.disable}}
<span>不可选中<span>
{{?? it.color}}
<span style='background-color: {{=it.color}}'>{{=it.day}}¥<span>
{{??}}
<span>{{=it.day}}¥<span>
{{?}}
Example
渲染事件a001
import { IFeidaoAiBrowserComponent } from '@dfeidao/atom-web/interfaces';
import render from '@dfeidao/atom-web/render/render';
import p001 from './p001';
export default async function a001(fd: IFeidaoAiBrowserComponent) {
const obj = {
tpl: `
{{? it.holiday}}
<span>{{=it.holiday}}<span>
{{?? it.disable}}
<span>不可选中<span>
{{?? it.color}}
<span style='background-color: {{=it.color}}'>{{=it.day}}¥<span>
{{??}}
<span>{{=it.day}}¥<span>
{{?}}
`
};
render(fd, obj, p001, 'p001', 'inner');
}
P块
<fd-w000027 data-feidao-id="w000027" style="width:800px;height:400px;" item-tpl="{{=it.tpl}}"
data-feidao-actions='fdwe-change:a002'>
</fd-w000027>