Skip to content

Commit f502f0a

Browse files
ourcxourcx
committed
feat(CalendarView): Added custom color support for CalendarView and updated the documentation
1 parent fed5994 commit f502f0a

File tree

9 files changed

+707
-790
lines changed

9 files changed

+707
-790
lines changed

‎examples/sites/demos/apis/calendar-view.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
type: 'Array',
2323
defaultValue: '',
2424
desc: {
25-
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
25+
'zh-CN': '配置时间线模式下所展示的时间范围，默认为 [8,18]，可配范围 [0,23]。',
2626
'en-US': ''
2727
},
2828
mode: ['pc', 'mobile-first'],
@@ -130,7 +130,7 @@ export default {
130130
type: '() => void',
131131
defaultValue: '',
132132
desc: {
133-
'zh-CN': '设置日期背景色',
133+
'zh-CN': '设置日期背景色，使用函数返回颜色值时，返回十六进制、rgb、rgba 是自定义颜色，使用颜色名则是预设颜色',
134134
'en-US': ''
135135
},
136136
mode: ['pc', 'mobile-first'],
@@ -166,7 +166,7 @@ export default {
166166
type: 'Boolean',
167167
defaultValue: 'true',
168168
desc: {
169-
'zh-CN': '显示日程tips时间',
169+
'zh-CN': '显示日程 tips 时间',
170170
'en-US': 'Show schedule tips time'
171171
},
172172
meta: {
@@ -314,7 +314,7 @@ export default {
314314
{
315315
name: 'timeline',
316316
desc: {
317-
'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽',
317+
'zh-CN': '时间线插槽，有 timeline1-timeline7 7 个插槽',
318318
'en-US': ''
319319
},
320320
mode: ['pc', 'mobile-first'],
@@ -334,7 +334,7 @@ export default {
334334
{
335335
name: 'weekday',
336336
desc: {
337-
'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽',
337+
'zh-CN': '日程插槽，有 weekday1-weekday7 7 个插槽',
338338
'en-US': ''
339339
},
340340
mode: ['pc', 'mobile-first'],

‎examples/sites/demos/apis/cascader-view.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default {
4343
type: 'Array',
4444
defaultValue: '',
4545
desc: {
46-
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
46+
'zh-CN': '配置时间线模式下所展示的时间范围，默认为 [8,18]，可配范围 [0,23]。',
4747
'en-US':
4848
'Time range displayed in timeline mode. The default value range is [8, 18]. The value range is [0, 23].'
4949
},
@@ -203,7 +203,7 @@ export default {
203203
type: 'Function',
204204
defaultValue: '',
205205
desc: {
206-
'zh-CN': '设置日期背景色',
206+
'zh-CN': '设置日期背景色，使用函数返回颜色值时，返回十六进制、rgb、rgba 是自定义颜色，使用颜色名则是预设颜色',
207207
'en-US': 'Set Date Background Color'
208208
},
209209
mode: ['mobile-first'],
@@ -280,7 +280,7 @@ export default {
280280
type: 'String',
281281
defaultValue: '',
282282
desc: {
283-
'zh-CN': '文本信息分隔符，默认值为 ”; “ ',
283+
'zh-CN': '文本信息分隔符，默认值为”; “ ',
284284
'en-US': ''
285285
},
286286
mode: ['mobile-first'],
@@ -561,7 +561,7 @@ export default {
561561
type: '',
562562
defaultValue: '',
563563
desc: {
564-
'zh-CN': '时间线插槽，有timeline1-timeline7 7个插槽',
564+
'zh-CN': '时间线插槽，有 timeline1-timeline7 7 个插槽',
565565
'en-US': 'Timeline slots, with 7 slots timeline1-timeline7'
566566
},
567567
mode: ['mobile-first'],
@@ -583,7 +583,7 @@ export default {
583583
type: '',
584584
defaultValue: '',
585585
desc: {
586-
'zh-CN': '日程插槽，有weekday1-weekday7 7个插槽',
586+
'zh-CN': '日程插槽，有 weekday1-weekday7 7 个插槽',
587587
'en-US': 'Schedule slots, with 7 slots weekday1-weekday7'
588588
},
589589
mode: ['mobile-first'],

‎examples/sites/demos/mobile-first/app/calendar-view/webdoc/calendar-view.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default {
7171
'en-US': ''
7272
},
7373
desc: {
74-
'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
74+
'zh-CN': '<p>通过 dayTimes 属性配置时间线模式下所展示的时间范围，默认为 [8,18]，可配范围 [0,23]。</p>\n',
7575
'en-US': '<p></p>\n'
7676
},
7777
codeFiles: ['calendar-timeline-range.vue']
@@ -96,7 +96,7 @@ export default {
9696
},
9797
desc: {
9898
'zh-CN':
99-
'<p>通过showMark回调函数来标记某些日期，markColor属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor可选颜色同 theme</p>\n',
99+
'<p>通过 showMark 回调函数来标记某些日期，markColor 属性设置标记的颜色，此功能只在时间线模式和日程模式生效。markColor 可选颜色同 theme</p>\n',
100100
'en-US': '<p></p>\n'
101101
},
102102
codeFiles: ['calendar-day-mark.vue']
@@ -133,8 +133,9 @@ export default {
133133
},
134134
desc: {
135135
'zh-CN':
136-
'<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',
137-
'en-US': '<p></p>\n'
136+
'<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
137+
'en-US':
138+
'<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
138139
},
139140
codeFiles: ['custom-day-bg-color.vue']
140141
},

‎examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ export default {
1919
setDayBgColor(date) {
2020
if (date.split('-')[2] === '10') {
2121
return 'red'
22+
}else if (date.split('-')[2] === '15') {
23+
return '#00FF00'
24+
} else if (date.split('-')[2] === '20') {
25+
return 'rgb(0,0,255)'
26+
}else if (date.split('-')[2] === '25') {
27+
return 'rgba(255,0,0,0.5)'
28+
}else if( date.split('-')[2] === '5'){
29+
return 'yellow'
30+
}else if ( date.split('-')[2] === '8'){
31+
return 'green'
2232
}
2333
return ''
2434
}

‎examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,9 @@ export default {
139139
},
140140
desc: {
141141
'zh-CN':
142-
'<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey</p>\n',
142+
'<p>自定义日期单元格背景色。</p>\n<p>目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色</p>\n',
143143
'en-US':
144-
'<p>Customize the background color of the date cell. </p>\n<p>Currently, only preset colors are supported. The options are blue, green, red, yellow, purple, cyan, and grey.</p>'
144+
'<p>Customize the background color of date cells.</p>\n<p>Currently supports both preset colors (options include blue, green, red, yellow, purple, cyan, and grey) and custom colors defined using hexadecimal, RGB, or RGBA values.</p>'
145145
},
146146
codeFiles: ['custom-day-bg-color.vue']
147147
},
@@ -178,7 +178,7 @@ export default {
178178
'<p>mode-change：模式切换事件</p>',
179179
'en-US':
180180
'<p>Calendar throws the following events:</p>\n' +
181-
'<p>date-click：日期点击事件: Date click event</p>\n' +
181+
'<p>date-click：日期点击事件：Date click event</p>\n' +
182182
'<p>new-schedule: Add a schedule button click event</p>\n' +
183183
'<p>selected-date-change: selected date change event</p>\n' +
184184
'<p>prev-week-click: button click event of the last week</p>\n' +
@@ -346,7 +346,7 @@ export default {
346346
value: true
347347
},
348348
description:
349-
'自定义日期单元格背景色，目前只支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey。',
349+
'自定义日期单元格背景色，目前支持预置的颜色，可选颜色 blue、green、red、yellow、purple、cyan、grey 和使用十六进制、rgb、rgba 的是自定义颜色。',
350350
cloud: {
351351
value: false
352352
},

0 commit comments

Comments
 (0)