React-native-calendars: How to change the color of Saturday and Sunday？

[dytiz]

[googlecomvn]

I see that you can customize the title: show month and year of selected date and align the title to center . Can you help me to do like that.
Thanks

[tautvilas]

hi, do you mean the day number or day name (e.g. mon, tue, wed) ?

[ubaycreative]

hi, @tautvilas how do you do that?

[tautvilas]

Hey, currently changing color of only few day titles are not possible. You can only change all day header color

[ubaycreative]

Thx for your answer, at least we know it

[Rananjaya]

How to change color of sundays

[harshaSenaratne]

Hi all, I've managed to fix this issue by editing the library, and it seems to be working perfectly.

1. Go to react-native-calendars/src/style.js and define 2 constants to represent different colors for saturdays and sundays. (There is a already defined color which works for the all header names, you can keep that for weekdays if you like )
   export const saturdaytextSectionTitleColor = '#696969';
export const sundaytextSectionTitleColor = 'red';

2. Then go to react-native-calendars/src/calendar/header/style.js and make two styles to be used in the Calendar header.
   sundayDayHeader: { marginTop: 7, marginBottom: window.height*0.02, width: window.width*0.1, textAlign: 'center', fontSize: appStyle.textDayHeaderFontSize, fontFamily: appStyle.textDayHeaderFontFamily, color: appStyle.sundaytextSectionTitleColor }, saturdayDayHeader: { marginTop: 7, marginBottom: window.height*0.02, width: window.width*0.1, textAlign: 'center', fontSize: appStyle.textDayHeaderFontSize, fontFamily: appStyle.textDayHeaderFontFamily, color: appStyle.saturdaytextSectionTitleColor }

3. Finally go to react-native-calendars/src/calendar/header/index.js . In this file weekDaysNames is a array containing the 7 header names for the week. I use a condition to check specific strings and trigger different styles accordingly.
   In the react-native-calendars/src/calendar/header/index.js file there is place where weekDaysNames array is mapped to a <Text/> tag . I've applied a condition to the mapping.
   day == 'Sun' ||day=='ඉරිදා' || day=='ஞாயி' ? <Text allowFontScaling={false} key={idx} accessible={false} style={this.style.sundayDayHeader} numberOfLines={1} importantForAccessibility='no'>{day}</Text>
: day=='Sat' || day=='සෙන' || day=='சனி' ? <Text allowFontScaling={false} key={idx} accessible={false} style={this.style.saturdayDayHeader} numberOfLines={1} importantForAccessibility='no'>{day}</Text>
: <Text allowFontScaling={false} key={idx} accessible={false} style={this.style.dayHeader} numberOfLines={1} importantForAccessibility='no'>{day}</Text>
   yet I did not find a way to change the color of a specific type of day(like all sundays) throughout the year (without using the markdates). I will update the issue if i find a way. Hope someone will find this useful. Cheers !!!

[Rananjaya]

@velvetrain Thanks Man!! I works !!!! :+1:

[bornd1989]

@harshaSenaratne Thanks very much. i easily solve it. thanks to you~

[himanshug16]

3. I will update the iss

Hi @harshaSenaratne , have you found a way to change the color of a specific type of day(like all sundays) throughout the year (without using the markdates) ?