feat: Add Saturday localization support in settings and update calendar type handling

public/locales/ar/settings.json

@@ -57,6 +57,7 @@
     "firstDayOfWeekDescription": "اختر اليوم الذي يبدأ به أسبوعك",
     "sunday": "الأحد",
     "monday": "الاثنين",
+    "saturday": "السبت",
     "formats": {
       "mdy": "MM/DD/YYYY (الولايات المتحدة)",
       "dmy": "DD/MM/YYYY (أوروبا)",

public/locales/en/settings.json

@@ -57,6 +57,7 @@
     "firstDayOfWeekDescription": "Select which day starts your week",
     "sunday": "Sunday",
     "monday": "Monday",
+    "saturday": "Saturday",
     "formats": {
       "mdy": "MM/DD/YYYY (US)",
       "dmy": "DD/MM/YYYY (Europe)",

public/locales/es/settings.json

@@ -57,6 +57,7 @@
     "firstDayOfWeekDescription": "Selecciona qué día comienza tu semana",
     "sunday": "Domingo",
     "monday": "Lunes",
+    "saturday": "Sábado",
     "formats": {
       "mdy": "MM/DD/AAAA (EE.UU.)",
       "dmy": "DD/MM/AAAA (Europa)",

src/views/Settings/LocalizationSettings.jsx

@@ -167,7 +167,7 @@ const LocalizationSettings = () => {
               {t('localization.firstDayOfWeekDescription')}
             </Typography>
             <FormControl>
-              <Box sx={{ display: 'flex', gap: 2 }}>
+              <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                 <Button
                   variant={firstDayOfWeek === 0 ? 'solid' : 'outlined'}
                   onClick={() => setFirstDayOfWeek(0)}
@@ -180,6 +180,12 @@ const LocalizationSettings = () => {
                 >
                   {t('localization.monday')}
                 </Button>
+                <Button
+                  variant={firstDayOfWeek === 6 ? 'solid' : 'outlined'}
+                  onClick={() => setFirstDayOfWeek(6)}
+                >
+                  {t('localization.saturday')}
+                </Button>
               </Box>
             </FormControl>
           </Box>

src/views/components/CalendarDual.jsx

@@ -4,6 +4,7 @@ import Calendar from 'react-calendar'
 import { useNavigate } from 'react-router-dom'
 import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
 import { getPriorityColor, TASK_COLOR } from '../../utils/Colors'
+import { useLocalization } from '../../contexts/LocalizationContext'
 import styles from './CalendarDual.module.css'
 
 const getAssigneeColor = (assignee, userProfile) => {
@@ -13,6 +14,9 @@ const getAssigneeColor = (assignee, userProfile) => {
 }
 const CalendarDual = ({ chores, onDateChange }) => {
   const { data: userProfile } = useUserProfile()
+  const { firstDayOfWeek } = useLocalization()
+  const calendarType =
+    firstDayOfWeek === 1 ? 'iso8601' : firstDayOfWeek === 6 ? 'islamic' : 'gregory'
 
   const [selectedDate, setSeletedDate] = useState(null)
   const [currentDate, setCurrentDate] = useState(new Date())
@@ -106,6 +110,7 @@ const CalendarDual = ({ chores, onDateChange }) => {
       <Calendar
         className={styles.reactCalendar}
         tileContent={tileContent}
+        calendarType={calendarType}
         onChange={d => {
           let date = new Date(d)
           setSeletedDate(date)

src/views/components/CalendarMonthly.jsx

@@ -1,7 +1,11 @@
 import Calendar from 'react-calendar'
+import { useLocalization } from '../../contexts/LocalizationContext'
 import { getPriorityColor } from '../../utils/Colors'
 import styles from './Calendar.module.css'
 const CalendarMonthly = ({ chores, onDateChange }) => {
+  const { firstDayOfWeek } = useLocalization()
+  const calendarType =
+    firstDayOfWeek === 1 ? 'iso8601' : firstDayOfWeek === 6 ? 'islamic' : 'gregory'
   const tileContent = ({ date, view }) => {
     if (view === 'month') {
       const dayChores = chores.filter(chore => {
@@ -51,6 +55,7 @@ const CalendarMonthly = ({ chores, onDateChange }) => {
     <div className={styles.reactCalendar}>
       <Calendar
         tileContent={tileContent}
+        calendarType={calendarType}
         onChange={d => {
           onDateChange(new Date(d))
         }}