Add setting to change first day of the week: Issue #844 (#910)

<!-- Thank you for submitting a pull request! Make sure to follow the
instructions to write release notes for your PR — it should only take a
minute or two:
https://github.com/actualbudget/docs#writing-good-release-notes -->

Resolves issue #844 .

---------

Co-authored-by: biohzrddd <>

packages/desktop-client/src/components/select/DateSelect.js

@@ -6,17 +6,20 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
+import { useSelector } from 'react-redux';
 
 import * as d from 'date-fns';
 import Pikaday from 'pikaday';
 
 import 'pikaday/css/pikaday.css';
+
 import {
   getDayMonthFormat,
   getDayMonthRegex,
   getShortYearFormat,
   getShortYearRegex,
 } from 'loot-core/src/shared/months';
+import { stringToInteger } from 'loot-core/src/shared/util';
 
 import { colors } from '../../style';
 import { View, Input, Tooltip } from '../common';
@@ -66,7 +69,7 @@ let pickerStyles = {
 };
 
 export let DatePicker = React.forwardRef(
-  ({ value, dateFormat, onUpdate, onSelect }, ref) => {
+  ({ value, firstDayOfWeekIdx, dateFormat, onUpdate, onSelect }, ref) => {
     let picker = useRef(null);
     let mountPoint = useRef(null);
 
@@ -107,6 +110,7 @@ export let DatePicker = React.forwardRef(
       picker.current = new Pikaday({
         theme: 'actual-date-picker',
         keyboardInput: false,
+        firstDay: stringToInteger(firstDayOfWeekIdx),
         defaultDate: value
           ? d.parse(value, dateFormat, new Date())
           : new Date(),
@@ -189,6 +193,12 @@ export default function DateSelect({
   let [selectedValue, setSelectedValue] = useState(value);
   let userSelectedValue = useRef(selectedValue);
 
+  const firstDayOfWeekIdx = useSelector(state =>
+    state.prefs.local?.firstDayOfWeekIdx
+      ? state.prefs.local.firstDayOfWeekIdx
+      : '0',
+  );
+
   useEffect(() => {
     userSelectedValue.current = value;
   }, [value]);
@@ -334,6 +344,7 @@ export default function DateSelect({
           <DatePicker
             ref={picker}
             value={selectedValue}
+            firstDayOfWeekIdx={firstDayOfWeekIdx}
             dateFormat={dateFormat}
             onUpdate={date => {
               setSelectedValue(d.format(date, dateFormat));

packages/desktop-client/src/components/settings/Format.js

@@ -8,6 +8,18 @@ import { Checkbox } from '../forms';
 
 import { Setting } from './UI';
 
+// Follows Pikaday 'firstDay' numbering
+// https://github.com/Pikaday/Pikaday
+let daysOfWeek = [
+  { value: '0', label: 'Sunday' },
+  { value: '1', label: 'Monday' },
+  { value: '2', label: 'Tuesday' },
+  { value: '3', label: 'Wednesday' },
+  { value: '4', label: 'Thursday' },
+  { value: '5', label: 'Friday' },
+  { value: '6', label: 'Saturday' },
+];
+
 let dateFormats = [
   { value: 'MM/dd/yyyy', label: 'MM/DD/YYYY' },
   { value: 'dd/MM/yyyy', label: 'DD/MM/YYYY' },
@@ -35,6 +47,10 @@ function Column({ title, children }) {
 }
 
 export default function FormatSettings({ prefs, savePrefs }) {
+  function onFirstDayOfWeek(idx) {
+    savePrefs({ firstDayOfWeekIdx: idx });
+  }
+
   function onDateFormat(format) {
     savePrefs({ dateFormat: format });
   }
@@ -48,6 +64,7 @@ export default function FormatSettings({ prefs, savePrefs }) {
     savePrefs({ hideFraction });
   }
 
+  let firstDayOfWeekIdx = prefs.firstDayOfWeekIdx || '0'; // Sunday
   let dateFormat = prefs.dateFormat || 'MM/dd/yyyy';
   let numberFormat = prefs.numberFormat || 'comma-dot';
 
@@ -98,6 +115,17 @@ export default function FormatSettings({ prefs, savePrefs }) {
               />
             </Button>
           </Column>
+
+          <Column title="First day of the week">
+            <Button bounce={false} style={{ padding: 0 }}>
+              <CustomSelect
+                value={firstDayOfWeekIdx}
+                onChange={onFirstDayOfWeek}
+                options={daysOfWeek.map(f => [f.value, f.label])}
+                style={{ padding: '5px 10px', fontSize: 15 }}
+              />
+            </Button>
+          </Column>
         </View>
       }
     >

upcoming-release-notes/910.md

+---
+category: Enhancements
+authors: [biohzrddd]
+---
+
+Add setting to change first day of the week
\ No newline at end of file