-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Open
Description
Screen.Recording.2025-08-27.at.9.52.14.PM.mov
const calendarTheme = React.useMemo(() => ({
textDayStyle: {
marginVertical: 0,
},
expandableKnobColor: colors.appLightBlue3,
textSectionTitleColor: (colorScheme === 'dark') ? colors.appLightBlue : colors.appDarkBlue,
calendarBackground: colorScheme === 'dark' ? colors.appDarkBlue3 : colors.appLightBlue,
arrowColor: colors.appDarkBlue,
selectedDayBackgroundColor: colors.appGreen,
todayBackgroundColor: colorScheme === 'dark' ? colors.appDarkBlue4 : `${colors.appDarkBlue}80`,
dayTextColor: colorScheme === 'dark' ? colors.appLightBlue3 : 'black',
textDisabledColor: 'gray',
'stylesheet.calendar.header': {
monthText: {
...fontStyles.mediumText,
...fontStyles.memFontFamilyBold,
color: (colorScheme === 'dark') ? colors.appLightBlue : colors.appDarkBlue
},
},
dotColor: colorScheme === 'dark' ? colors.appDarkBlue2 : colors.appDarkBlue,
selectedDotColor: colorScheme === 'dark' ? colors.appDarkBlue2 : 'white',
disabledDotColor: 'gray',
}), [colorScheme, fontStyles])
<ExpandableCalendar
monthFormat="MMMM yyyy"
key="expandable-calendar"
ref={expandableCalendarRef}
// displayLoadingIndicator={calendarDatesLoading}
style={{
borderBottomWidth: 1,
borderBottomColor: (colorScheme === 'dark') ? colors.appDarkBlue : colors.appLightBlue3,
backgroundColor: colorScheme === 'dark' ? colors.appDarkBlue3 : colors.appLightBlue, // Ensure background
}}
allowShadow={false}
onDayPress={handleDayPress}
markedDates={computedMarkedDates || {}}
theme={calendarTheme}
enableSwipeMonths={true}
pastScrollRange={6}
futureScrollRange={6}
firstDay={1}
staticHeader={true}
animateScroll={false}
scrollEnabled={true}
/>
Anyone seen this before?
Metadata
Metadata
Assignees
Labels
No labels