Merge pull request #45 from farhoudshapouran/support-starting-day-of-…

…week Support starting day of week
farhoudshapouran · Dec 11, 2023 · f3617e6 · f3617e6
2 parents 701851b + ba44f76
commit f3617e6
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ For more, take a look at the `/example` directory.
 | locale                   | `string`        | `'en'`          | Defines the DatePicker locale                                                          |
 | minimumDate              | `DateType`      | `null`          | Defines DatePicker minimum selectable date                                             |
 | maximumDate              | `DateType`      | `null`          | Defines DatePicker maximum selectable date                                             |
+| firstDayOfWeek           | `number`        | `0`             | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday                 |
 | displayFullDays          | `boolean`       | `false`         | Defines show previous and next month's days in the current calendar view               |
 | calendarTextStyle        | `TextStyle`     | `null`          | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes)  |
 | selectedTextStyle        | `TextStyle`     | `null`          | Defines selected (Day, Month, Year) text styles                                        |

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -97,6 +97,7 @@ export default function App() {
               value={value}
               //minimumDate={dayjs().startOf('day')}
               //maximumDate={dayjs().add(3, 'day').endOf('day')}
+              //firstDayOfWeek={1}
               displayFullDays={true}
               locale={locale}
               onValueChange={(date) => setValue(date)}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-datepicker",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Customizable datetime picker for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/CalendarContext.tsx b/src/CalendarContext.tsx
@@ -13,6 +13,7 @@ export interface CalendarContextType extends CalendarState {
   displayFullDays: boolean;
   minimumDate: DateType;
   maximumDate: DateType;
+  firstDayOfWeek: number;
   theme?: CalendarTheme;
   setCalendarView: (value: CalendarViews) => void;
   onSelectDate: (date: DateType) => void;

diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx
@@ -26,6 +26,7 @@ interface PropTypes extends CalendarTheme, HeaderProps {
   locale?: string | ILocale;
   minimumDate?: DateType;
   maximumDate?: DateType;
+  firstDayOfWeek?: number;
   onValueChange?: (value: DateType) => void;
   displayFullDays?: boolean;
 }
@@ -36,6 +37,7 @@ const DateTimePicker = ({
   locale = 'en',
   minimumDate = null,
   maximumDate = null,
+  firstDayOfWeek = 0,
   onValueChange = () => {},
   displayFullDays = false,
   headerButtonsPosition = 'around',
@@ -200,6 +202,8 @@ const DateTimePicker = ({
         displayFullDays,
         minimumDate,
         maximumDate,
+        firstDayOfWeek:
+          firstDayOfWeek >= 0 && firstDayOfWeek <= 6 ? firstDayOfWeek : 0,
         theme,
       }}
     >

diff --git a/src/components/DaySelector.tsx b/src/components/DaySelector.tsx
@@ -19,6 +19,7 @@ const DaySelector = () => {
     displayFullDays,
     minimumDate,
     maximumDate,
+    firstDayOfWeek,
     theme,
   } = useCalendarContext();
   const { year, month, hour, minute } = getParsedDate(currentDate);
@@ -30,7 +31,8 @@ const DaySelector = () => {
         currentDate,
         displayFullDays,
         minimumDate,
-        maximumDate
+        maximumDate,
+        firstDayOfWeek
       ).map((day) => {
         return day
           ? {
@@ -60,7 +62,7 @@ const DaySelector = () => {
         style={[styles.weekDaysContainer, theme?.weekDaysContainerStyle]}
         testID="week-days"
       >
-        {getWeekdaysMin()?.map((item, index) => (
+        {getWeekdaysMin(firstDayOfWeek)?.map((item, index) => (
           <View key={index} style={styles.weekDayCell}>
             <Text style={theme?.weekDaysTextStyle}>{item}</Text>
           </View>

diff --git a/src/utils.ts b/src/utils.ts
@@ -13,7 +13,16 @@ export const getWeekdays = () => dayjs.weekdays();
 
 export const getWeekdaysShort = () => dayjs.weekdaysShort();
 
-export const getWeekdaysMin = () => dayjs.weekdaysMin();
+export const getWeekdaysMin = (firstDayOfWeek: number) => {
+  let days = dayjs.weekdaysMin();
+  if (firstDayOfWeek > 0) {
+    days = [
+      ...days.slice(firstDayOfWeek, days.length),
+      ...days.slice(0, firstDayOfWeek),
+    ] as dayjs.WeekdayNames;
+  }
+  return days;
+};
 
 export const getFormated = (date: DateType) =>
   dayjs(date).format(CALENDAR_FORMAT);
@@ -71,19 +80,21 @@ export const getParsedDate = (date: DateType) => {
  * @param displayFullDays
  * @param minimumDate - min selectable date
  * @param maximumDate - max selectable date
+ * @param firstDayOfWeek - first day of week, number 0-6, 0 – Sunday, 6 – Saturday
  *
  * @returns days array based on current date
  */
 export const getMonthDays = (
   datetime: DateType = dayjs(),
   displayFullDays: boolean,
   minimumDate: DateType,
-  maximumDate: DateType
+  maximumDate: DateType,
+  firstDayOfWeek: number
 ): IDayObject[] => {
   const date = getDate(datetime);
   const daysInMonth = date.daysInMonth();
   const prevMonthDays = date.add(-1, 'month').daysInMonth();
-  const firstDay = date.date(1);
+  const firstDay = date.date(1 - firstDayOfWeek);
   const dayOfMonth = firstDay.day() % 7;
 
   const prevDays = displayFullDays