setting starting day in meal plan

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -23,7 +23,8 @@
                 <meal-plan-calender-header
                     :header-props="headerProps"
                     @input="setShowDate" @delete-dragged="deleteEntry(dragged_item)"
-                    @create-new="createEntryClick(new Date())"/>
+                    @create-new="createEntryClick(new Date())" @set-starting-day-back="setStartingDay(-1)"
+                    @set-starting-day-forward="setStartingDay(1)"/>
               </template>
             </calendar-view>
           </div>
@@ -64,6 +65,12 @@
                     :options="dayNames"
                 ></b-form-select>
               </b-form-group>
+              <b-form-group id="WeekNumInput"
+                            :label="$t('Week_Numbers')">
+                <b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
+                  {{ $t('Show_Week_Numbers') }}
+                </b-form-checkbox>
+              </b-form-group>
             </b-form>
           </div>
           <div class="col-6">
@@ -294,6 +301,15 @@ export default {
     },
   },
   methods: {
+    setStartingDay(days) {
+      if (this.settings.startingDayOfWeek + days < 0) {
+        this.settings.startingDayOfWeek = 6
+      } else if (this.settings.startingDayOfWeek + days > 6) {
+        this.settings.startingDayOfWeek = 0
+      } else {
+        this.settings.startingDayOfWeek = this.settings.startingDayOfWeek + days
+      }
+    },
     newMealType() {
       let apiClient = new ApiApiFactory()
 

vue/src/components/MealPlanCalenderHeader.vue

@@ -1,51 +1,52 @@
 <template>
   <div class="cv-header">
     <div class="cv-header-nav">
-      <button
-          :disabled="!headerProps.previousYear"
-          class="previousYear"
-          aria-label="Previous Year"
-          @click.prevent="onInput(headerProps.previousYear)"
-      >
-        {{ previousYearLabel }}
-      </button>
       <button
           :disabled="!headerProps.previousPeriod"
           class="previousPeriod"
           aria-label="Previous Period"
           @click.prevent="onInput(headerProps.previousPeriod)"
-          v-html="previousPeriodLabel"
+          v-b-tooltip.hover.top
-      />
+          :title="$t('Previous_Period')"
+          v-html="previousYearLabel"/>
+      <button
+          class="previousDay"
+          aria-label="Previous Day"
+          @click.prevent="onDayBack"
+          v-b-tooltip.hover.top
+          :title="$t('Previous_Day')"
+          v-html="previousPeriodLabel"/>
       <button
           class="currentPeriod"
           aria-label="Current Period"
-          @click.prevent="onInput(headerProps.currentPeriod)"
+          @click.prevent="onInput(headerProps.currentPeriod)">
-      >
         {{ headerProps.currentPeriodLabel }}
       </button>
+      <button
+          class="nextDay"
+          aria-label="Next Day"
+          @click.prevent="onDayForward"
+          v-b-tooltip.hover.top
+          :title="$t('Next_Day')"
+          v-html="nextPeriodLabel"/>
       <button
           :disabled="!headerProps.nextPeriod"
           class="nextPeriod"
           aria-label="Next Period"
+          v-b-tooltip.hover.top
+          :title="$t('Next_Period')"
           @click.prevent="onInput(headerProps.nextPeriod)"
-      >
+          v-html="nextYearLabel"/>
-        {{ nextPeriodLabel }}
-      </button>
-      <button
-          :disabled="!headerProps.nextYear"
-          class="nextYear"
-          aria-label="Next Year"
-          @click.prevent="onInput(headerProps.nextYear)">
-        {{ nextYearLabel }}
-      </button>
     </div>
     <div class="periodLabel">
       <slot name="label">{{ headerProps.periodLabel }}</slot>
     </div>
     <div class="actionArea d-none d-sm-flex">
-      <button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i></button>
+      <button class="btn btn-success plus-button pt-1 pb-1" @click="$emit('create-new')"><i class="fas fa-plus"></i>
+      </button>
       <span class="delete-area text-danger p-1 mr-2 ml-2" @drop.prevent="onDeleteDrop($event)"
-            @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)" @dragover.prevent="onDeleteDragEnter"><i
+            @dragenter.prevent="onDeleteDragEnter($event)" @dragleave.prevent="onDeleteDragLeave($event)"
+            @dragover.prevent="onDeleteDragEnter"><i
           class="fas fa-trash"></i> {{ $t('Drag_Here_To_Delete') }}</span>
     </div>
   </div>
@@ -64,6 +65,12 @@ export default {
     nextYearLabel: {type: String, default: ">>"},
   },
   methods: {
+    onDayForward() {
+      this.$emit("set-starting-day-forward")
+    },
+    onDayBack() {
+      this.$emit("set-starting-day-back")
+    },
     onInput(d) {
       this.$emit("input", d)
     },

vue/src/locales/en.json

@@ -186,5 +186,7 @@
   "Meal_Type_Required": "Meal type is required",
   "Title_or_Recipe_Required": "Title or recipe selection required",
   "Color": "Color",
-  "New_Meal_Type": "New Meal type"
+  "New_Meal_Type": "New Meal type",
+  "Week_Numbers": "Week numbers",
+  "Show_Week_Numbers": "Show week numbers ?"
 }