Make first day of week in calendar view customizable (#263)

* Make first day of the week customizable

New settings section 'Locale settings'
New setting 'First day of week'
New date picker reusable UI that uses the new setting
Meal planner now uses this new date picker

* Clean up unused code in settings page

* Fix First day of week mapping

* Replace missing v-date-picker with custom card DatePicker

* Mention first day of the week feature in change log

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -3,9 +3,6 @@
     <v-card-text>
       <h2 class="mt-1 mb-1">{{ $t("settings.homepage.home-page") }}</h2>
       <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
-        <v-col cols="1">
-          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
-        </v-col>
         <v-col cols="12" sm="3" md="2">
           <v-switch
             v-model="settings.showRecent"
@@ -119,6 +116,25 @@
         </v-col>
       </v-row>
     </v-card-text>
+    <v-card-text>
+      <h2 class="mt-1 mb-4">{{$t('settings.locale-settings')}}</h2>
+      <v-row>
+        <v-col cols="1">
+          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
+        </v-col>
+        <v-col sm="3">
+          <v-select
+                dense
+                prepend-icon="mdi-calendar-week-begin"
+                v-model="settings.firstDayOfWeek"
+                :items="allDays"
+                item-text="name"
+                item-value="value"
+                :label="$t('settings.first-day-of-week')"
+           />
+        </v-col>
+      </v-row>
+    </v-card-text>
     <v-card-actions>
       <v-spacer></v-spacer>
       <v-btn color="success" @click="saveSettings" class="mr-2">
@@ -145,6 +161,7 @@ export default {
     return {
       settings: {
         language: "en",
+        firstDayOfWeek: 0,
         showRecent: null,
         cardsPerSection: null,
         categories: [],
@@ -158,6 +175,38 @@ export default {
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    allDays() {
+      return [
+        {
+          name: this.$t('general.sunday'),
+          value: 0,
+        },
+        {
+          name: this.$t('general.monday'),
+          value: 1,
+        },
+        {
+          name: this.$t('general.tuesday'),
+          value: 2,
+        },
+        {
+          name: this.$t('general.wednesday'),
+          value: 3,
+        },
+        {
+          name: this.$t('general.thursday'),
+          value: 4,
+        },
+        {
+          name: this.$t('general.friday'),
+          value: 5,
+        },
+        {
+          name: this.$t('general.saturday'),
+          value: 6,
+        }
+      ];
+    },
   },
 
   methods: {
@@ -176,6 +225,7 @@ export default {
     },
     async saveSettings() {
       await api.siteSettings.update(this.settings);
+      this.$store.commit("setLang", this.settings.language);
       this.getOptions();
     },
   },