Skip to content

Commit e783782

Browse files
TangSYTangSY
committed
docs: 完善 mark-datet 属性文档
1 parent 3c7fcb2 commit e783782

File tree

2 files changed

+89
-55
lines changed

2 files changed

+89
-55
lines changed

‎src/mark-date/README.md

+45-28
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@
44

55
需要被标记的日期，可按不同颜色不同标记类型分组标记（不分组默认蓝色）。标记类型取值：[MarkType](#mark-type)
66

7-
### 默认
7+
### 默认标记方式
88

99
```html
1010
<vue-hash-calendar
1111
:mark-date="[
12-
'2022/11/11',
13-
'2022/12/11',
14-
'2023/01/11',
15-
'2023/02/11',
16-
'2023/03/11',
17-
'2023/04/11',
18-
'2023/05/11',
12+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
13+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
14+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
15+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
16+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
17+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
18+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
19+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
20+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
1921
]"
2022
/>
2123
```
@@ -28,13 +30,15 @@
2830
{
2931
color: '#f00',
3032
date: [
31-
'2022/11/11',
32-
'2022/12/11',
33-
'2023/01/11',
34-
'2023/02/11',
35-
'2023/03/11',
36-
'2023/04/11',
37-
'2023/05/11',
33+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
34+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
35+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
36+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
37+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
38+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
39+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
40+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
41+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
3842
],
3943
},
4044
]"
@@ -47,15 +51,17 @@
4751
<vue-hash-calendar
4852
:mark-date="[
4953
{
50-
type: 'dot',
54+
type: 'circle',
5155
date: [
52-
'2022/11/11',
53-
'2022/12/11',
54-
'2023/01/11',
55-
'2023/02/11',
56-
'2023/03/11',
57-
'2023/04/11',
58-
'2023/05/11',
56+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
57+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
58+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
59+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
60+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
61+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
62+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
63+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
64+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
5965
],
6066
},
6167
]"
@@ -69,14 +75,25 @@
6975
:mark-date="[
7076
{
7177
color: '#f00',
72-
type: 'dot',
73-
date: ['2022/11/11', '2022/12/11', '2023/04/11'],
78+
type: 'dot+circle',
79+
date: [
80+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
81+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
82+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
83+
],
7484
},
7585
{
76-
type: 'dot+circle',
77-
date: ['2023/01/11', '2023/02/11', '2023/03/11'],
86+
color: '#0f0',
87+
type: 'circle',
88+
date: [
89+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
90+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
91+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
92+
],
7893
},
79-
'2023/05/11',
94+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
95+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
96+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
8097
]"
8198
/>
8299
```

‎src/mark-date/demo/index.vue

+44-27
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
2-
<h1 class="hash-demo-title">默认</h1>
2+
<h1 class="hash-demo-title">默认标记方式</h1>
33
<vue-hash-calendar
44
:mark-date="[
5-
'2022/11/11',
6-
'2022/12/11',
7-
'2023/01/11',
8-
'2023/02/11',
9-
'2023/03/11',
10-
'2023/04/11',
11-
'2023/05/11',
5+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
6+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
7+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
8+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
9+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
10+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
11+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
12+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
13+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
1214
]"
1315
/>
1416

@@ -18,13 +20,15 @@
1820
{
1921
color: '#f00',
2022
date: [
21-
'2022/11/11',
22-
'2022/12/11',
23-
'2023/01/11',
24-
'2023/02/11',
25-
'2023/03/11',
26-
'2023/04/11',
27-
'2023/05/11',
23+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
24+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
25+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
26+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
27+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
28+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
29+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
30+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
31+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
2832
],
2933
},
3034
]"
@@ -34,15 +38,17 @@
3438
<vue-hash-calendar
3539
:mark-date="[
3640
{
37-
type: 'dot',
41+
type: 'circle',
3842
date: [
39-
'2022/11/11',
40-
'2022/12/11',
41-
'2023/01/11',
42-
'2023/02/11',
43-
'2023/03/11',
44-
'2023/04/11',
45-
'2023/05/11',
43+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
44+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
45+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
46+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
47+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
48+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
49+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
50+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
51+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
4652
],
4753
},
4854
]"
@@ -54,13 +60,24 @@
5460
{
5561
color: '#f00',
5662
type: 'dot+circle',
57-
date: ['2022/11/11', '2022/12/11', '2023/04/11'],
63+
date: [
64+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/01`,
65+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/05`,
66+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/10`,
67+
],
5868
},
5969
{
60-
type: 'dot',
61-
date: ['2023/01/11', '2023/02/11', '2023/03/11'],
70+
color: '#0f0',
71+
type: 'circle',
72+
date: [
73+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/15`,
74+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/20`,
75+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/25`,
76+
],
6277
},
63-
'2023/05/11',
78+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/28`,
79+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/16`,
80+
`${new Date().getFullYear()}/${new Date().getMonth() + 1}/18`,
6481
]"
6582
/>
6683
</template>

0 commit comments

Comments
 (0)