fix: disabled days style

Author: farhoudshapouran

example/app/index.tsx

@@ -18,6 +18,7 @@ import 'dayjs/locale/de';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fr';
 import 'dayjs/locale/tr';
+import 'dayjs/locale/fa';
 
 const Themes: ITheme[] = [
   { mainColor: '#0047FF', activeTextColor: '#fff' },
@@ -193,7 +194,7 @@ export default function MainPage() {
               //maxDate={dayjs().add(3, 'day').endOf('day')}
               //disabledDates={[dayjs(), dayjs().add(1, 'day')]}
               //disabledDates={(date) => [0, 6].includes(dayjs(date).day())} // disable weekends
-              //firstDayOfWeek={1}
+              //firstDayOfWeek={6}
               displayFullDays
               timePicker={timePicker}
               onChange={onChange}

example/components/LocaleSelector.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { StyleSheet, View, Text, Pressable } from 'react-native';
 
-const Locales = ['en', 'de', 'es', 'fr', 'tr'];
+const Locales = ['en', 'de', 'es', 'fr', 'tr', 'fa'];
 
 type Props = {
   locale: string;

src/components/Day.tsx

@@ -65,13 +65,21 @@ function Day({
       borderColor: selectedItemColor,
       backgroundColor: selectedItemColor,
     },
+    disabled && style.disabledDay,
   ]);
 
   const textStyle = StyleSheet.flatten([
     isSelected
-      ? { color: '#fff', ...selectedTextStyle }
+      ? {
+          color: '#fff',
+          ...selectedTextStyle,
+        }
       : isToday
-      ? { ...calendarTextStyle, color: selectedItemColor, ...todayTextStyle }
+      ? {
+          ...calendarTextStyle,
+          color: selectedItemColor,
+          ...todayTextStyle,
+        }
       : calendarTextStyle,
   ]);
 

src/components/DaySelector.tsx

@@ -30,6 +30,7 @@ const DaySelector = () => {
     firstDayOfWeek,
     theme,
     height,
+    locale,
   } = useCalendarContext();
 
   const { year, month, hour, minute } = getParsedDate(currentDate);
@@ -181,7 +182,7 @@ const DaySelector = () => {
 
   return (
     <View style={styles.container} testID="day-selector">
-      <WeekDays firstDayOfWeek={firstDayOfWeek} theme={theme} />
+      <WeekDays locale={locale} firstDayOfWeek={firstDayOfWeek} theme={theme} />
       <View style={styles.daysContainer} testID="days">
         {daysGrid?.map((day, index) => {
           return day ? (

src/components/WeekDays.tsx

@@ -4,17 +4,18 @@ import { getWeekdaysMin } from '../utils';
 import { CalendarThemeProps } from '../types';
 
 type WeekDaysProps = {
+  locale: string | ILocale;
   firstDayOfWeek: number;
   theme: CalendarThemeProps;
 };
 
-const WeekDays = ({ firstDayOfWeek, theme }: WeekDaysProps) => {
+const WeekDays = ({ locale, firstDayOfWeek, theme }: WeekDaysProps) => {
   return (
     <View
       style={[styles.weekDaysContainer, theme?.weekDaysContainerStyle]}
       testID="week-days"
     >
-      {getWeekdaysMin(firstDayOfWeek)?.map((item, index) => (
+      {getWeekdaysMin(locale, firstDayOfWeek)?.map((item, index) => (
         <View key={index} style={styles.weekDayCell}>
           <Text style={theme?.weekDaysTextStyle}>{item}</Text>
         </View>

src/utils.ts

@@ -13,7 +13,11 @@ export const getWeekdays = () => dayjs.weekdays();
 
 export const getWeekdaysShort = () => dayjs.weekdaysShort();
 
-export const getWeekdaysMin = (firstDayOfWeek: number) => {
+export const getWeekdaysMin = (
+  locale: string | ILocale,
+  firstDayOfWeek: number
+) => {
+  dayjs().locale(locale);
   let days = dayjs.weekdaysMin();
   if (firstDayOfWeek > 0) {
     days = [