diff --git a/example/app/index.tsx b/example/app/index.tsx index 29e7e2e..2c2d262 100644 --- a/example/app/index.tsx +++ b/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} diff --git a/example/components/LocaleSelector.tsx b/example/components/LocaleSelector.tsx index 09d2e11..04d6e3e 100644 --- a/example/components/LocaleSelector.tsx +++ b/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; diff --git a/src/components/Day.tsx b/src/components/Day.tsx index f0fb16b..fd59707 100644 --- a/src/components/Day.tsx +++ b/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, ]); diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx index 3631179..5792cae 100644 --- a/src/components/DaySelector.tsx +++ b/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 ( - + {daysGrid?.map((day, index) => { return day ? ( diff --git a/src/components/WeekDays.tsx b/src/components/WeekDays.tsx index 132c7b2..25cf9fc 100644 --- a/src/components/WeekDays.tsx +++ b/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 ( - {getWeekdaysMin(firstDayOfWeek)?.map((item, index) => ( + {getWeekdaysMin(locale, firstDayOfWeek)?.map((item, index) => ( {item} diff --git a/src/utils.ts b/src/utils.ts index 718cf24..bbf5612 100644 --- a/src/utils.ts +++ b/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 = [