Merge pull request #389 from gregoire-jianda/start-week-on-monday

feat: Make it possible to start the week on monday

docusaurus/docs/date-picker/input-date-picker.md

@@ -119,6 +119,10 @@ The start year when the component is rendered. Defaults to `1800`.
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.
 
+**startWeekOnMonday**  
+`Type: boolean | undefined`  
+Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
+
 **inputEnabled**  
 `Type: boolean | undefined`  
 Flag indicating if the component should be enabled or not. Behavior similarly to `disabled`. Defaults to `true`.

docusaurus/docs/date-picker/multiple-dates-picker.md

@@ -131,6 +131,10 @@ The start year when the component is rendered. Defaults to `1800`.
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.
 
+**startWeekOnMonday**  
+`Type: boolean | undefined`  
+Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
+
 **closeIcon**  
 `Type: string | undefined`  
 The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

docusaurus/docs/date-picker/range-date-picker.md

@@ -134,6 +134,10 @@ The start year when the component is rendered. Defaults to `1800`.
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.
 
+**startWeekOnMonday**  
+`Type: boolean | undefined`  
+Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
+
 **closeIcon**  
 `Type: string | undefined`  
 The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

docusaurus/docs/date-picker/single-date-picker.md

@@ -121,6 +121,10 @@ The start year when the component is rendered. Defaults to `1800`.
 `Type: number | undefined`  
 The end year when the component is rendered. Defaults to `2200`.
 
+**startWeekOnMonday**  
+`Type: boolean | undefined`  
+Flag indicating if calendar grid sould show monday as the first column. Defaults to `false`.
+
 **closeIcon**  
 `Type: string | undefined`  
 The icon used to close the component. Defaults to `close`. You can pass the name of an icon from [MaterialCommunityIcons](https://materialdesignicons.com/).

example/src/ReadMeExampleMultiple.tsx

@@ -44,6 +44,7 @@ export default function ReadMeExampleMultiple() {
         // animationType="slide" // optional, default is slide on ios/android and none on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // startWeekOnMonday={true} // optional, default is false
       />
     </>
   )

example/src/ReadMeExampleRange.tsx

@@ -52,6 +52,7 @@ export default function ReadMeExampleRange() {
         // animationType="slide" // optional, default is slide on ios/android and none on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // startWeekOnMonday={true} // optional, default is false
       />
     </>
   )

example/src/ReadMeExampleSingle.tsx

@@ -43,6 +43,7 @@ export default function ReadMeExampleSingle() {
         // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
         // startYear={2000} // optional, default is 1800
         // endYear={2100} // optional, default is 2200
+        // startWeekOnMonday={true} // optional, default is false
         //
       />
     </>

src/Date/Calendar.tsx

@@ -33,6 +33,7 @@ export type BaseCalendarProps = {
   validRange?: ValidRangeType
   startYear?: number
   endYear?: number
+  startWeekOnMonday?: boolean
 
   // here they are optional but in final implementation they are required
   date?: CalendarDate
@@ -95,6 +96,7 @@ function Calendar(
     dates,
     validRange,
     dateMode,
+    startWeekOnMonday,
   } = props
 
   const theme = useTheme()
@@ -177,6 +179,7 @@ function Calendar(
         initialIndex={getInitialIndex(firstDate)}
         selectedYear={selectedYear}
         scrollMode={scrollMode}
+        startWeekOnMonday={startWeekOnMonday || false}
         renderItem={({ index }) => (
           <Month
             locale={locale}
@@ -196,6 +199,7 @@ function Calendar(
             selectColor={selectColor}
             roundness={theme.roundness}
             disableWeekDays={disableWeekDays}
+            startWeekOnMonday={startWeekOnMonday || false}
           />
         )}
         renderHeader={({ onPrev, onNext }) => (
@@ -205,6 +209,7 @@ function Calendar(
             onNext={onNext}
             scrollMode={scrollMode}
             disableWeekDays={disableWeekDays}
+            startWeekOnMonday={startWeekOnMonday || false}
           />
         )}
       />

src/Date/CalendarHeader.tsx

@@ -27,12 +27,14 @@ function CalendarHeader({
   onNext,
   disableWeekDays,
   locale,
+  startWeekOnMonday,
 }: {
   locale: undefined | string
   scrollMode: 'horizontal' | 'vertical'
   onPrev: () => any
   onNext: () => any
   disableWeekDays?: DisableWeekDaysType
+  startWeekOnMonday: boolean
 }) {
   const theme = useTheme()
   const isHorizontal = scrollMode === 'horizontal'
@@ -67,7 +69,11 @@ function CalendarHeader({
           </View>
         </View>
       ) : null}
-      <DayNames disableWeekDays={disableWeekDays} locale={locale} />
+      <DayNames
+        disableWeekDays={disableWeekDays}
+        locale={locale}
+        startWeekOnMonday={startWeekOnMonday}
+      />
     </View>
   )
 }

src/Date/DatePickerInput.shared.tsx

@@ -27,6 +27,7 @@ export type DatePickerInputProps = {
   disableStatusBarPadding?: boolean
   animationType?: 'slide' | 'fade' | 'none'
   presentationStyle?: 'pageSheet' | 'overFullScreen'
+  startWeekOnMonday?: boolean
 } & Omit<
   React.ComponentProps<typeof TextInput>,
   'value' | 'onChange' | 'onChangeText' | 'inputMode'

src/Date/DatePickerInput.tsx

@@ -60,6 +60,7 @@ function DatePickerInput(
         endYear,
         inputEnabled,
         disableStatusBarPadding,
+        startWeekOnMonday,
       }) =>
         withModal ? (
           <DatePickerModal
@@ -81,6 +82,7 @@ function DatePickerInput(
             animationType={animationType}
             presentationStyle={presentationStyle}
             label={rest.label as any}
+            startWeekOnMonday={startWeekOnMonday}
           />
         ) : null
       }

src/Date/DatePickerInputWithoutModal.tsx

@@ -29,6 +29,7 @@ function DatePickerInputWithoutModal(
     onChangeText,
     inputEnabled,
     disableStatusBarPadding,
+    startWeekOnMonday,
     ...rest
   }: DatePickerInputProps & {
     modal?: (params: {
@@ -43,6 +44,7 @@ function DatePickerInputWithoutModal(
       endYear: DatePickerInputProps['endYear']
       inputEnabled: DatePickerInputProps['inputEnabled']
       disableStatusBarPadding: DatePickerInputProps['disableStatusBarPadding']
+      startWeekOnMonday?: DatePickerInputProps['startWeekOnMonday']
     }) => any
     inputButton?: React.ReactNode
   },
@@ -118,6 +120,7 @@ function DatePickerInputWithoutModal(
         endYear,
         inputEnabled,
         disableStatusBarPadding,
+        startWeekOnMonday,
       })}
     </>
   )

src/Date/DatePickerModalContent.tsx

@@ -93,6 +93,7 @@ export function DatePickerModalContent(
     startYear,
     endYear,
     statusBarOnTopOfBackdrop,
+    startWeekOnMonday,
   } = props
   const anyProps = props as any
 
@@ -199,6 +200,7 @@ export function DatePickerModalContent(
             dateMode={dateMode}
             startYear={startYear}
             endYear={endYear}
+            startWeekOnMonday={startWeekOnMonday}
           />
         }
         calendarEdit={

src/Date/DayNames.tsx

@@ -6,31 +6,35 @@ import { DisableWeekDaysType, showWeekDay } from './dateUtils'
 
 export const dayNamesHeight = 44
 
-// TODO: wait for a better Intl api ;-)
-const weekdays = [
-  new Date(2020, 7, 2),
-  new Date(2020, 7, 3),
-  new Date(2020, 7, 4),
-  new Date(2020, 7, 5),
-  new Date(2020, 7, 6),
-  new Date(2020, 7, 7),
-  new Date(2020, 7, 8),
-]
-
 function DayNames({
   disableWeekDays,
   locale,
+  startWeekOnMonday,
 }: {
   locale: undefined | string
   disableWeekDays?: DisableWeekDaysType
+  startWeekOnMonday: boolean
 }) {
   const theme = useTheme()
   const shortDayNames = React.useMemo<string[]>(() => {
+    // TODO: wait for a better Intl api ;-)
+    const weekdays = [
+      new Date(2020, 7, 2),
+      new Date(2020, 7, 3),
+      new Date(2020, 7, 4),
+      new Date(2020, 7, 5),
+      new Date(2020, 7, 6),
+      new Date(2020, 7, 7),
+      new Date(2020, 7, 8),
+    ]
+    if (startWeekOnMonday) {
+      weekdays.push(weekdays.shift() as Date)
+    }
     const formatter = new Intl.DateTimeFormat(locale, {
       weekday: 'narrow',
     })
     return weekdays.map((date) => formatter.format(date))
-  }, [locale])
+  }, [locale, startWeekOnMonday])
 
   return (
     <View

src/Date/Month.tsx

@@ -49,6 +49,7 @@ interface BaseMonthProps {
   selectColor: string
   roundness: number
   validRange?: ValidRangeType
+  startWeekOnMonday: boolean
 
   // some of these should be required in final implementation
   startDate?: CalendarDate
@@ -91,6 +92,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     disableWeekDays,
     locale,
     validRange,
+    startWeekOnMonday,
   } = props
   const theme = useTheme()
   const textColorOnPrimary = useTextColorOnPrimary()
@@ -111,10 +113,10 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     const today = new Date()
 
     const daysInMonth = getDaysInMonth({ year, month })
-    const dayOfWeek = getFirstDayOfMonth({ year, month })
+    const dayOfWeek = getFirstDayOfMonth({ year, month, startWeekOnMonday })
     const emptyDays = dayOfWeek
 
-    return monthGrid(index).map(({ days, weekGrid }) => {
+    return monthGrid(index, startWeekOnMonday).map(({ days, weekGrid }) => {
       return {
         weekIndex: weekGrid,
         generatedDays: days.map((_, dayIndex) => {
@@ -248,6 +250,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
     endDate,
     dates,
     date,
+    startWeekOnMonday,
   ])
 
   let textFont = theme?.isV3
@@ -263,7 +266,12 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   const iconSource = theme.isV3 ? iconSourceV3 : iconSourceV2
 
   return (
-    <View style={[styles.month, { height: getMonthHeight(scrollMode, index) }]}>
+    <View
+      style={[
+        styles.month,
+        { height: getMonthHeight(scrollMode, index, startWeekOnMonday) },
+      ]}
+    >
       <View
         style={[
           styles.monthHeader,
@@ -388,8 +396,8 @@ const styles = StyleSheet.create({
   opacity1: { opacity: 1 },
 })
 
-const monthGrid = (index: number) => {
-  return Array(getGridCount(index))
+const monthGrid = (index: number, startWeekOnMonday: boolean) => {
+  return Array(getGridCount(index, startWeekOnMonday))
     .fill(null)
     .map((_, weekGrid) => {
       const days = Array(7).fill(null)
@@ -405,20 +413,20 @@ function getIndexCount(index: number): number {
   return -(startAtIndex - index)
 }
 
-function weeksOffset(index: number): number {
+function weeksOffset(index: number, startWeekOnMonday: boolean): number {
   if (index === startAtIndex) {
     return 0
   }
   let off = 0
   if (index > startAtIndex) {
     for (let i = 0; i < index - startAtIndex; i++) {
       const cIndex = startAtIndex + i
-      off += gridCounts[cIndex] || getGridCount(cIndex)
+      off += gridCounts[cIndex] || getGridCount(cIndex, startWeekOnMonday)
     }
   } else {
     for (let i = 0; i < startAtIndex - index; i++) {
       const cIndex = startAtIndex - i - 1
-      off -= gridCounts[cIndex] || getGridCount(cIndex)
+      off -= gridCounts[cIndex] || getGridCount(cIndex, startWeekOnMonday)
     }
   }
   return off
@@ -431,10 +439,13 @@ export function getIndexFromHorizontalOffset(
   return startAtIndex + Math.floor(offset / width)
 }
 
-export function getIndexFromVerticalOffset(offset: number): number {
+export function getIndexFromVerticalOffset(
+  offset: number,
+  startWeekOnMonday: boolean
+): number {
   let estimatedIndex = startAtIndex + Math.ceil(offset / estimatedMonthHeight)
 
-  const realOffset = getVerticalMonthsOffset(estimatedIndex)
+  const realOffset = getVerticalMonthsOffset(estimatedIndex, startWeekOnMonday)
   const difference = (realOffset - beginOffset - offset) / estimatedMonthHeight
   if (difference >= 1 || difference <= -1) {
     estimatedIndex -= Math.floor(difference)
@@ -449,9 +460,12 @@ export function getHorizontalMonthOffset(index: number, width: number) {
   return width * index
 }
 
-export function getVerticalMonthsOffset(index: number) {
+export function getVerticalMonthsOffset(
+  index: number,
+  startWeekOnMonday: boolean
+) {
   const count = getIndexCount(index)
-  const ob = weeksOffset(index)
+  const ob = weeksOffset(index, startWeekOnMonday)
   const monthsHeight = weekSize * ob
   const c = monthsHeight + count * (dayNamesHeight + montHeaderHeight)
 
@@ -460,10 +474,11 @@ export function getVerticalMonthsOffset(index: number) {
 
 export function getMonthHeight(
   scrollMode: 'horizontal' | 'vertical',
-  index: number
+  index: number,
+  startWeekOnMonday: boolean
 ): number {
   const calendarHeight = getCalendarHeaderHeight(scrollMode)
-  const gc = getGridCount(index)
+  const gc = getGridCount(index, startWeekOnMonday)
 
   const currentMonthHeight = weekSize * gc
   const extraHeight =