Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
081be0c8
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
081be0c8
编写于
11月 13, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add notice calendar demo
上级
077f7de4
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
142 addition
and
17 deletion
+142
-17
components/calendar/demo/custom-render.md
components/calendar/demo/custom-render.md
+3
-3
components/calendar/demo/notice-calendar.md
components/calendar/demo/notice-calendar.md
+115
-0
components/calendar/demo/notice-example.md
components/calendar/demo/notice-example.md
+0
-0
components/calendar/index.jsx
components/calendar/index.jsx
+6
-2
style/components/calendar/index.less
style/components/calendar/index.less
+18
-12
未找到文件。
components/calendar/demo/custom-render.md
浏览文件 @
081be0c8
# 自定义渲染
-
order:
2
-
order:
1
用
`dateCellRender`
和
`monthCellRender`
函数来自定义需要渲染的数据。
...
...
@@ -10,11 +10,11 @@
import
{
Calendar
}
from
'
antd
'
;
function
dateCellRender
(
value
)
{
return
<
div
>
date
</
div
>;
return
<
div
>
自定义日数据
</
div
>;
}
function
monthCellRender
(
value
)
{
return
<
div
>
month
</
div
>;
return
<
div
>
自定义月数据
</
div
>;
}
ReactDOM
.
render
(
...
...
components/calendar/demo/notice-calendar.md
0 → 100644
浏览文件 @
081be0c8
# 通知事项日历演示
-
order: 2
一个复杂的应用实例。
---
````
jsx
import
{
Calendar
}
from
'
antd
'
;
function
getListData
(
value
)
{
console
.
log
(
value
.
getDayOfMonth
());
var
listData
;
switch
(
value
.
getDayOfMonth
())
{
case
8
:
listData
=
[
{
type
:
'
warn
'
,
content
:
'
这里是警告事项.
'
},
{
type
:
'
normal
'
,
content
:
'
这里是普通事项.
'
}
];
break
;
case
10
:
listData
=
[
{
type
:
'
warn
'
,
content
:
'
这里是警告事项.
'
},
{
type
:
'
normal
'
,
content
:
'
这里是普通事项.
'
},
{
type
:
'
error
'
,
content
:
'
这里是错误事项.
'
}
];
break
;
case
15
:
listData
=
[
{
type
:
'
warn
'
,
content
:
'
这里是警告事项.
'
},
{
type
:
'
normal
'
,
content
:
'
这里是普通事项好长啊。。....
'
},
{
type
:
'
error
'
,
content
:
'
这里是错误事项.
'
},
{
type
:
'
error
'
,
content
:
'
这里是错误事项.
'
},
{
type
:
'
error
'
,
content
:
'
这里是错误事项.
'
},
{
type
:
'
error
'
,
content
:
'
这里是错误事项.
'
}
];
break
;
}
return
listData
||
[];
}
function
dateCellRender
(
value
)
{
let
listData
=
getListData
(
value
);
return
<
ul
className
=
"events"
>
{
listData
.
map
((
item
,
index
)
=>
<
li
key
=
{
index
}
>
<
span
className
=
{
`event-
${
item
.
type
}
`
}
>
●
</
span
>
{
item
.
content
}
</
li
>
)
}
</
ul
>;
}
function
getMonthData
(
value
)
{
if
(
value
.
getMonth
()
===
8
)
{
return
1394
;
}
}
function
monthCellRender
(
value
)
{
let
num
=
getMonthData
(
value
);
return
num
?
<
div
className
=
"notes-month"
>
<
section
>
{
num
}
</
section
>
<
span
>
待办事项数
</
span
>
</
div
>
:
null
;
}
ReactDOM
.
render
(
<
Calendar
dateCellRender
=
{
dateCellRender
}
monthCellRender
=
{
monthCellRender
}
/>
,
document
.
getElementById
(
'
components-calendar-demo-notice-calendar
'
));
````
````
css
.events
{
line-height
:
24px
;
list-style
:
none
;
margin
:
0
;
padding
:
0
;
}
.events
li
{
color
:
#999
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
}
.events
li
span
{
vertical-align
:
middle
;
}
.events
li
span
:first-child
{
font-size
:
9px
;
margin-right
:
4px
;
}
.event-warn
{
color
:
#fac450
;
}
.event-normal
{
color
:
#2db7f5
;
}
.event-error
{
color
:
#f60
;
}
.notes-month
{
text-align
:
center
;
}
.notes-month
section
{
font-size
:
28px
;
}
````
components/calendar/demo/notice-example.md
已删除
100644 → 0
浏览文件 @
077f7de4
components/calendar/index.jsx
浏览文件 @
081be0c8
...
...
@@ -32,7 +32,9 @@ class Calendar extends Component {
<
div
className
=
{
`
${
prefixCls
}
-value`
}
>
{
locale
.
format
.
shortMonths
[
month
]
}
</
div
>
<
div
className
=
{
`
${
prefixCls
}
-content`
}
>
{
this
.
props
.
monthCellRender
(
value
)
}
</
div
>
</
div
>;
}
dateCellRender
(
value
)
{
...
...
@@ -41,7 +43,9 @@ class Calendar extends Component {
<
div
className
=
{
`
${
prefixCls
}
-value`
}
>
{
zerofixed
(
value
.
getDayOfMonth
())
}
</
div
>
<
div
className
=
{
`
${
prefixCls
}
-content`
}
>
{
this
.
props
.
dateCellRender
(
value
)
}
</
div
>
</
div
>;
}
setValue
(
value
)
{
...
...
style/components/calendar/index.less
浏览文件 @
081be0c8
...
...
@@ -51,6 +51,10 @@
border: none;
}
td {
position: relative;
}
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
...
...
@@ -73,6 +77,11 @@
}
}
&-month,
&-date {
text-align: center;
}
&-value {
display: block;
margin: 0 auto;
...
...
@@ -83,7 +92,6 @@
padding: 0;
background: transparent;
line-height: 22px;
text-align: center;
&:hover {
background: tint(@primary-color, 90%);
...
...
@@ -139,7 +147,7 @@
width: 46px;
margin: 0 auto;
color: @text-color;
border-radius: 4px
4px
;
border-radius: 4px;
height: 36px;
padding: 0;
background: transparent;
...
...
@@ -171,10 +179,10 @@
}
}
&-
notes-wrapper
{
&-
content
{
position: absolute;
width: 100%;
left:0;
left:
0;
bottom: -9px;
}
...
...
@@ -198,6 +206,7 @@
&-fullscreen &-month,
&-fullscreen &-date {
text-align: left;
margin: 0 4px;
display: block;
color: @text-color;
...
...
@@ -245,15 +254,12 @@
color: #ccc;
}
&-fullscreen &-
note-list-wrapper
{
&-fullscreen &-
content
{
height: 90px;
overflow-y: auto;
}
&-fullscreen &-notes-month {
text-align: center;
> section {
font-size: 28px;
}
position: static;
width: auto;
left: auto;
bottom: auto;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录