feat: add startOfWeekIndex prop and update props documentation

src/lib/components/Datepicker.svelte

@@ -14,10 +14,17 @@
 	export let start = calendarDefaults.start;
 	export let end = calendarDefaults.end;
 	export let format = calendarDefaults.format;
-	export let formatted;
-	export let store = datepickerStore.get({ selected, start, end, shouldEnlargeDay: true });
+	export let formatted = '';
 	export let theme = {};
 	export let defaultTheme = undefined;
+	export let startOfWeekIndex = 0;
+	export let store = datepickerStore.get({
+		selected,
+		start,
+		end,
+		shouldEnlargeDay: true,
+		startOfWeekIndex
+	});
 
 	setContext(storeContextKey, store);
 	setContext(

src/lib/components/InlineCalendar.svelte

@@ -14,9 +14,10 @@
 	export let end = calendarDefaults.end;
 	export let format = calendarDefaults.format;
 	export let formatted;
-	export let store = datepickerStore.get({ selected, start, end });
 	export let theme = {};
 	export let defaultTheme = undefined;
+	export let startOfWeekIndex = 0;
+	export let store = datepickerStore.get({ selected, start, end, startOfWeekIndex });
 
 	const focused = writable(false);
 

src/lib/components/calendar/DayPicker.svelte

@@ -9,13 +9,17 @@
 	import scrollable from '$lib/directives/scrollable';
 	import { scrollStep } from '$lib/config/scroll';
 
+	const store = getContext(storeContextKey);
+
 	const duration = 450;
 
 	const legend = Array(7)
 		.fill(0)
-		.map((d, i) => dayjs().day(i).format('ddd'));
-
-	const store = getContext(storeContextKey);
+		.map((d, i) =>
+			dayjs()
+				.day(($store.startOfWeekIndex + i) % 7)
+				.format('ddd')
+		);
 
 	const add = (amount) => () => store.add(amount, 'day');
 

src/lib/stores/datepicker.js

@@ -12,7 +12,7 @@ const pipe = (...fns) => (val) => fns.reduce((accum, fn) => fn(accum), val);
 
 const zeroDay = (date) => dayjs(date).startOf('day').toDate();
 
-const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
+const get = ({ selected, start, end, startOfWeekIndex = 0, shouldEnlargeDay = false }) => {
 	const { subscribe, set, update } = writable({
 		open: false,
 		hasChosen: false,
@@ -25,17 +25,21 @@ const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
 		month: selected.getMonth(),
 		day: selected.getDate(),
 		activeView: 'days',
-		activeViewDirection: 1
+		activeViewDirection: 1,
+		startOfWeekIndex
 	});
 
 	return {
 		set,
 		subscribe,
+		getState() {
+			return getFromStore({ subscribe });
+		},
 		enlargeDay(enlargeDay = true) {
 			update((state) => ({ ...state, enlargeDay }));
 		},
 		getSelectableVector(date) {
-			const { start, end } = getFromStore({ subscribe });
+			const { start, end } = this.getState();
 			if (date < start) return -1;
 			if (date > end) return 1;
 			return 0;
@@ -50,7 +54,8 @@ const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
 		clampValue(day, clampable) {
 			const vector = this.getSelectableVector(day.toDate());
 			if (vector === 0) return day;
-			const boundary = dayjs(getFromStore({ subscribe })[vector === 1 ? 'end' : 'start']);
+			const boundaryKey = vector === 1 ? 'end' : 'start';
+			const boundary = dayjs(this.getState()[boundaryKey]);
 			return clampable.reduce((day, type) => day[type](boundary[type]()), day);
 		},
 		add(amount, unit, clampable = []) {
@@ -97,6 +102,7 @@ const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
 			this.close({ hasChosen: true });
 		},
 		getCalendarPage(month, year) {
+			const { startOfWeekIndex } = this.getState();
 			let last = { date: new Date(year, month, 1), outsider: false };
 			const days = [];
 
@@ -107,7 +113,7 @@ const get = ({ selected, start, end, shouldEnlargeDay = false }) => {
 				last = { date, outsider: false };
 			}
 
-			while (days[0].date.getDay()) {
+			while (days[0].date.getDay() !== startOfWeekIndex) {
 				const date = new Date(days[0].date);
 				date.setDate(days[0].date.getDate() - 1);
 				days.unshift({

src/routes/docs/props.svelte

@@ -29,21 +29,33 @@
 			description:
 				'A `dayjs` format expression.  Used when updating the read-only `formatted` prop.'
 		},
+		{
+			name: 'startOfWeekIndex',
+			defaultVal: '0',
+			description:
+				'Which date.getDay() should be considered the start of the week (eg: 1 would indicate week should start on Monday)'
+		},
 		{
 			name: 'formatted',
-			defaultVal: 'undefined;',
+			defaultVal: 'undefined',
 			description:
 				'Readonly prop which provides a formatted version of the currently-selected date.'
 		},
 		{
 			name: 'store',
-			defaultVal: 'datepickerStore.get({ selected, start, end })',
+			defaultVal: 'datepickerStore.get({ selected, start, end, startOfWeekIndex })',
 			description: 'Readonly prop which provides access to the internal store.'
 		},
 		{
 			name: 'theme',
 			defaultVal: '{}',
 			description: `An object containing theme/style overrides for the component.  See <a href="${base}/docs/theme-editor/light">theme-editor documentation</a>`
+		},
+		{
+			name: 'defaultTheme',
+			defaultVal: 'undefined',
+			description:
+				'The default theme to extend with the `theme` prop.  When this prop is not set the `light` theme will be used by default.'
 		}
 	];
 </script>