Skip to content

Commit b6e9079

Browse files
author
Tautvilas Mečinskas
authored
Merge pull request #326 from nehrasajal/master
Calendar: Different background colors for diffrent selected days.
2 parents 471071e + 4aff355 commit b6e9079

File tree

3 files changed

+21
-0
lines changed

3 files changed

+21
-0
lines changed

README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,24 @@ LocaleConfig.defaultLocale = 'fr';
103103
showWeekNumbers={true}
104104
/>
105105
```
106+
#### Multi Date Selection
107+
<kbd>
108+
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/multi-select.png?raw=true">
109+
</kbd>
110+
111+
```javascript
112+
<Calendar
113+
// Collection of dates that have to be marked. Default = {}
114+
markedDates={{
115+
'2018-01-16': {selected: true, selectedColor:'red'},
116+
'2018-01-17': {selected: true, selectedColor:'green'},
117+
'2018-01-18': {selected: true},
118+
'2018-01-19': {selected: true, selectedColor:'yellow'}
119+
}}
120+
/>
121+
```
122+
You can customise a selected day background color for each day independently. If `selectedColor` property not available, it will take the default background color.
123+
106124

107125
#### Date marking
108126

demo/multi-select.png

10.9 KB
Loading

src/calendar/day/basic/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ class Day extends Component {
8181

8282
if (marking.selected) {
8383
containerStyle.push(this.style.selected);
84+
if (marking.selectedColor) {
85+
containerStyle.push({backgroundColor: marking.selectedColor});
86+
}
8487
dotStyle.push(this.style.selectedDot);
8588
textStyle.push(this.style.selectedText);
8689
} else if (isDisabled) {

0 commit comments

Comments
 (0)