react-native-calendars icon indicating copy to clipboard operation
react-native-calendars copied to clipboard

Today text color does not change when disabled

Open fadi-quader-mox opened this issue 2 years ago • 6 comments

Description

I bumped from 1.1284.0 to 1.1303.0 and noticed Today text color does not change when it's disabled. Though, it works fine for other disabled dates.
This issue doesn't exist in 1.1284.0 version.

Expected Behavior

It should change Today text color to textDisabledColor.

Observed Behavior

Setting textDisabledColor in theme doesn't change today text color to grey.

Environment

Please run these commands in the project folder and fill in their results:

  • npm ls react-native-calendars:
  • npm ls react-native:

Also specify:

  1. Device/emulator/simulator & OS version: Android OnePluse

Reproducible Demo

Please provide a minimized reproducible demonstration of the problem you're reporting.

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

Screenshots

fadi-quader-mox avatar Feb 07 '24 05:02 fadi-quader-mox

@fadi-quader-mox How did you manage to fix this ?

kashif-sk avatar Feb 12 '25 10:02 kashif-sk

@kashif-sk unfortunately, i couldn't fix it!

fadi-quader-mox avatar Feb 13 '25 01:02 fadi-quader-mox

@fadi-quader-mox So can you please keep this issue open so that someone can help with a fix

kashif-sk avatar Feb 13 '25 05:02 kashif-sk

This may related to code that define "day state" day-state-manager.ts and how it apply the day style src/calendar/day/basic/index.tsx. As "day-state-manager.ts" uses if-else condition that if day is in "today" state, other "disable" state will be ignored. So day style will always select today's style.

PeterTam-ATAL avatar Apr 01 '25 10:04 PeterTam-ATAL

I have a simple workaround to dynamically set the todayTextColor depending on whether the calendar's minDate matches today's date. This improves the UI feedback by highlighting today's date in blue "#2d4150" only when it is selectable, otherwise using a muted gray "#d9e1e8"".

How it works:

  • Get today's date in YYYY-MM-DD format using dayjs()
  • Compare with minDate
  • Conditionally set todayTextColor in the calendar theme
const today = dayjs().format("YYYY-MM-DD");
const isTodayMinDate = minDate === today;

<Calendar
  minDate={minDate}
  theme={{
    todayTextColor: isTodayMinDate ? "#2d4150" : "#d9e1e8""
  }}
/>

SusulAdam avatar Jun 27 '25 17:06 SusulAdam

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Dec 11 '25 19:12 stale[bot]