Day names and dates not correctly rendered

[igorjos]

Description

Calendar doesn't render properly. The day names and dates are not displayed to correspond.

E.g For January 1st 2023, the first day is Sunday. While calendar renders Monday to be first day.

Package.json "react": "18.1.0", "react-native": "0.70.6", "react-native-calendars": "^1.1293.0",

Implementation <Calendar firstDay={0} markedDates={markedDates} onDayPress={onDateSelection} theme={{ selectedDayBackgroundColor: colors._506571, selectedDayTextColor: colors._FFFFFF }} />

Expected Behavior

Day names and dates should be displayed properly. e.g 1st of January 2023 should be Sunday, 2nd of January 2023 should be Monday etc.

Observed Behavior

Render the default calendar, as stated in the example above. The marking of dates/days works well, the render of the calendar days (day names) and the corresponding date for the day is wrong.

No error messages, just wrong rendering.

Environment

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

• npm ls react-native-calendars: └── react-native-calendars@1.1293.0

• npm ls react-native: ├─┬ @gorhom/bottom-sheet@4.4.5 │ ├─┬ @gorhom/portal@1.0.14 │ │ └── react-native@0.70.6 deduped │ └── react-native@0.70.6 deduped ├─┬ @react-native-community/checkbox@0.5.14 │ └── react-native@0.70.6 deduped ├─┬ @react-native-community/masked-view@0.1.11 │ └── react-native@0.70.6 deduped ├─┬ @react-native-community/push-notification-ios@1.10.1 │ └── react-native@0.70.6 deduped ├─┬ @react-native-firebase/app@16.5.0 │ └── react-native@0.70.6 deduped ├─┬ @react-native-google-signin/google-signin@9.0.2 │ └── react-native@0.70.6 deduped ├─┬ @react-navigation/bottom-tabs@6.5.2 │ ├─┬ @react-navigation/elements@1.3.12 │ │ └── react-native@0.70.6 deduped │ └── react-native@0.70.6 deduped ├─┬ @react-navigation/native-stack@6.9.7 │ └── react-native@0.70.6 deduped ├─┬ @react-navigation/native@6.1.1 │ └── react-native@0.70.6 deduped ├─┬ react-native-bouncy-checkbox@3.0.6 │ └── react-native@0.70.6 deduped ├─┬ react-native-calendar-events@2.2.0 │ └── react-native@0.70.6 deduped ├─┬ react-native-calendars@1.1293.0 │ └─┬ recyclerlistview@3.0.5 │ └── react-native@0.70.6 deduped ├─┬ react-native-device-info@10.3.0 │ └── react-native@0.70.6 deduped ├─┬ react-native-fbsdk-next@11.1.0 │ └── react-native@0.70.6 deduped ├─┬ react-native-gesture-handler@2.9.0 │ └── react-native@0.70.6 deduped ├─┬ react-native-image-picker@4.10.3 │ └── react-native@0.70.6 deduped ├─┬ react-native-keyboard-manager@6.5.4-4 │ └── react-native@0.70.6 deduped ├─┬ react-native-linear-gradient@2.6.2 │ └── react-native@0.70.6 deduped ├─┬ react-native-mmkv@2.5.1 │ └── react-native@0.70.6 deduped ├─┬ react-native-pager-view@6.1.2 │ └── react-native@0.70.6 deduped ├─┬ react-native-push-notification@8.1.1 │ └── react-native@0.70.6 deduped ├─┬ react-native-reanimated@2.14.4 │ └── react-native@0.70.6 deduped ├─┬ react-native-safe-area-context@4.4.1 │ └── react-native@0.70.6 deduped ├─┬ react-native-screens@3.18.2 │ └── react-native@0.70.6 deduped ├─┬ react-native-snap-carousel@3.9.1 │ └── react-native@0.70.6 deduped ├─┬ react-native-wheel-scrollview-picker@2.0.1 │ └── react-native@0.70.6 deduped └── react-native@0.70.6

Happens on both iOS phone and simulator.

[marcos-segantine]

I was having the same issue..

[marcos-segantine]

Make sure you are filling in the fields dayNames and dayNamesShort inside LocaleConfig.locales in the correct order.

[igorjos]

@Marcos-Segantine thanks for the hint, but actually they are in correct order in the config, yet the displayed dates are not properly displayed. Here is my config:

import { LocaleConfig } from 'react-native-calendars';

LocaleConfig.locales['en'] = {
    monthNames: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ],
    monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    dayNames: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    dayNamesShort: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    today: "Today"
};

LocaleConfig.defaultLocale = 'en';

[igorjos]

Ok found the issue, as stated in the documentation, the first day in the config must be Sunday, while as props firstDay={1} meaning that Monday will be rendered as first on screen.

//proper config setup of day names
{
    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
}