[Bug] The current day on the calendar has the wrong style and display.

[akakaze]

Description

1-2 sentences describing the problem you're having or the feature you'd like to request. The current day on the calendar has the wrong style and display.

Expected Behavior

What action did you perform, and what did you expect to happen? I used the agenda and expected: only "today" has the selected style in the first implementation. When I select another date, "Today" has today style.

Observed Behavior

What actually happened when you performed the above actions? Attached picture, here we take 2022-11-18 as today. At the time of initial execution, the 18th of every month has a selected style. When I choose 2022-11-16, the 18th of every month still has the selected style.

Environment

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

• npm ls react-native-calendars:
• └── react-native-calendars@1.1291.1
• npm ls react-native:
• ├─┬ @react-native-async-storage/async-storage@1.17.10 │ └── react-native@0.69.6 deduped ├─┬ @react-native-community/clipboard@1.5.1 │ └── react-native@0.69.6 deduped ├─┬ @react-native-masked-view/masked-view@0.2.7 │ └── react-native@0.69.6 deduped ├─┬ @react-native-picker/picker@2.4.2 │ └── react-native@0.69.6 deduped ├─┬ @react-navigation/bottom-tabs@6.4.0 │ └── react-native@0.69.6 deduped ├─┬ @react-navigation/elements@1.3.6 │ └── react-native@0.69.6 deduped ├─┬ @react-navigation/material-top-tabs@6.2.4 │ └── react-native@0.69.6 deduped ├─┬ @react-navigation/native@6.0.13 │ └── react-native@0.69.6 deduped ├─┬ @react-navigation/stack@6.3.1 │ └── react-native@0.69.6 deduped ├─┬ react-native-calendars@1.1291.1 │ └─┬ recyclerlistview@3.0.5 │ └── react-native@0.69.6 deduped ├─┬ react-native-elements@4.0.0-beta.0 │ ├─┬ react-native-ratings@8.0.4 │ │ └── react-native@0.69.6 deduped │ └─┬ react-native-size-matters@0.3.1 │ └── react-native@0.69.6 deduped ├─┬ react-native-gesture-handler@2.5.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-gifted-chat@1.0.4 │ ├─┬ react-native-iphone-x-helper@1.3.1 │ │ └── react-native@0.69.6 deduped │ ├─┬ react-native-lightbox-v2@0.9.0 │ │ └── react-native@0.69.6 deduped │ ├─┬ react-native-parsed-text@0.0.22 │ │ └── react-native@0.69.6 deduped │ ├─┬ react-native-typing-animation@0.1.7 │ │ └── react-native@0.69.6 deduped │ └── react-native@0.69.6 deduped ├─┬ react-native-hyperlink@0.0.21 │ └── react-native@0.69.6 deduped ├─┬ react-native-localize@2.2.4 │ └── react-native@0.69.6 deduped ├─┬ react-native-otp-verify@1.0.5 │ └── react-native@0.69.6 deduped ├─┬ react-native-pager-view@5.4.24 │ └── react-native@0.69.6 deduped ├─┬ react-native-pages@0.9.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-picker-select@8.0.4 │ └─┬ @react-native-picker/picker@1.16.8 │ └── react-native@0.69.6 deduped ├─┬ react-native-reanimated@2.12.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-root-toast@3.4.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-safe-area-context@4.4.1 invalid: "^3.1.9" from node_modules/react-native-elements │ └── react-native@0.69.6 deduped ├─┬ react-native-screens@3.15.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-skeleton-content@1.0.25 │ └─┬ react-native-redash@16.3.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-svg@12.3.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-swiper-flatlist@3.0.17 │ └── react-native@0.69.6 deduped ├─┬ react-native-tab-view@3.1.1 │ └── react-native@0.69.6 deduped ├─┬ react-native-text-size@4.0.0-rc.1 │ └── react-native@0.69.6 deduped ├─┬ react-native-url-polyfill@1.3.0 │ └── react-native@0.69.6 deduped ├─┬ react-native-use-websocket@0.2.6 │ └── react-native@0.69.6 deduped ├─┬ react-native-webview@11.23.0 │ └── react-native@0.69.6 deduped └─┬ react-native@0.69.6 └─┬ @react-native-community/cli@8.0.6 └── react-native@0.69.6 deduped

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. Using out-of-the-box Agenda

Screenshots

Screenshots or gifs of the issue and the suggested fix will help us move faster with the review process.

[jerry791]

i also have the same issue......

[jerry791]

i also have the same issue......

I found that I add {{ date : '' }} in calendar and it works

[akakaze]

i also have the same issue......

I found that I add {{ date : '' }} in calendar and it works

@jerry791 Thanks for your reply, but it still doesn't solve my problem, could you please describe your solution in more detail?

[versusvoid]

Seems to be introduced in https://github.com/wix/react-native-calendars/blob/8d4f36b840bc482f318ac2ca4be1a710bbaaac0f/src/day-state-manager.ts#L9

[akakaze]

I found that #2091 describes the problem I encountered, so following this approach can solve it.

[SpaceSimon]

I recently updated the lib.

Before the update, today was coloured in blue, and the current selected day was in a blue circle, both on Calendar and Agenda components. That was nice.

After the update:

• on my Calendar components, today is blue and the selected day is in a blue circle, but the same day than the selected day on every month is in a blue circle too;
• on my Agenda component, today is now in a blue circle like the current selected day too, meaning you have two days with the same style. On the other months, the day with the same number than today is in a blue circle.

The context={{date: ''}} hack works on Calendar but not on Agenda.

I downgraded to 1.1289.0 (8 Sept 2022) which seems to be the last not broken version for this (tested on Android only).

[stale[bot]]

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.