Add setting for the first day of the week

src/components/input/datepicker.vue

@@ -118,6 +118,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'datepicker',
@@ -127,14 +128,6 @@ export default {
 			show: false,
 			changed: false,
 
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				inline: true,
-			},
 			// Since flatpickr dates are strings, we need to convert them to native date objects.
 			// To make that work, we need a separate variable since flatpickr does not have a change event.
 			flatPickrDate: null,
@@ -172,6 +165,19 @@ export default {
 			this.updateData()
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			inline: true,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		setDateValue(newVal) {
 			if(newVal === null) {

src/components/list/partials/filters.vue

@@ -205,6 +205,7 @@ import UserService from '@/services/user'
 import LabelService from '@/services/label'
 import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'filters',
@@ -243,14 +244,6 @@ export default {
 				list_id: '',
 				namespace: '',
 			},
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				mode: 'range',
-			},
 
 			usersService: UserService,
 			foundusers: [],
@@ -291,6 +284,19 @@ export default {
 			this.prepareFilters()
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			mode: 'range',
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		change() {
 			this.$emit('input', this.params)

src/components/tasks/edit-task.vue

@@ -94,14 +94,6 @@ export default {
 			newTask: TaskModel,
 			isTaskEdit: false,
 			taskEditTask: TaskModel,
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				onOpen: this.updateLastReminderDate,
-				onClose: this.addReminderDate,
-			},
 		}
 	},
 	components: {

src/components/tasks/partials/defer-task.vue

@@ -40,6 +40,7 @@
 <script>
 import TaskService from '../../../services/task'
 import flatPickr from 'vue-flatpickr-component'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'defer-task',
@@ -51,15 +52,6 @@ export default {
 			dueDate: null,
 			lastValue: null,
 			changeInterval: null,
-
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				inline: true,
-			},
 		}
 	},
 	components: {
@@ -102,6 +94,19 @@ export default {
 			this.lastValue = this.dueDate
 		},
 	},
+	computed: mapState({
+		flatPickerConfig: state => ({
+			altFormat: 'j M Y H:i',
+			altInput: true,
+			dateFormat: 'Y-m-d H:i',
+			enableTime: true,
+			time_24hr: true,
+			inline: true,
+			locale: {
+				firstDayOfWeek: state.auth.settings.weekStart,
+			},
+		})
+	}),
 	methods: {
 		deferDays(days) {
 			this.dueDate = new Date(this.dueDate)