1

I'm using an agenda component in my React Native application of react-native-calendars, and I'm trying to customize the appearance of the dates using a theme object. I want to set the text color of the dates based on the day of the week, with red for Saturdays and Sundays, and black for other days.

Here's the theme object I'm using:

const theme = {
textSectionTitleColor: (date) => {
const day = new Date(date.timestamp).getDay();
return (day === 0 || day === 6) ? ColorStyles.activeColor : '#000';
},
selectedDayBackgroundColor: ColorStyles.activeColor,
textDayFontFamily: "Quicksand-Medium",
textMonthFontFamily: "Quicksand-Medium",
textDayHeaderFontFamily: "Quicksand-Bold",
textDayFontSize: 16,
textDayHeaderFontSize: 16,
todayTextColor: ColorStyles.activeColor,
textDayColor: "#000",
textMonthColor: "#000",
textYearColor: "#000", 
};

I followed this advanced styling but am unable to understand how am I supposed to do it for agenda. (I was able to do it for the calendar component) the style.ts for agenda according to me is 'stylesheet.agenda.main'.

Ritik Jangir
  • 87
  • 2
  • 11

1 Answers1

-1

Right out of the box, react-native-calendars doesn't provide a method to change the day text color depending on a particular day. But you could dig deep into the library and make the changes you want.

follow this comment on this issue

Malith Tennakoon
  • 1