feat: Add marked dates to InlineCalendar

src/lib/components/InlineCalendar.svelte

@@ -13,6 +13,7 @@
 	export let start = calendarDefaults.start;
 	export let end = calendarDefaults.end;
 	export let format = calendarDefaults.format;
+	export let marked = [];
 	export let formatted = '';
 	export let theme = {};
 	export let defaultTheme = undefined;

src/lib/components/calendar/DayPicker.svelte

@@ -93,6 +93,7 @@
 								class:disabled={!store.isSelectable(day.date)}
 								class:selected={index === monthIndex &&
 									dayjs(day.date).isSame($store.selected, 'day')}
+								class:marked={store.isMarked(day.date)}
 								class:outsider={day.outsider}
 								out:send|local={{ key }}
 								in:receive|local={{ key }}

src/lib/components/generic/Grid.svelte

@@ -34,6 +34,11 @@
 	.grid > :global(*:hover) {
 		background: var(--sc-theme-calendar-colors-background-hover);
 	}
+	.grid > :global(*.marked) {
+		background: var(--sc-theme-calendar-colors-background-marked);
+		color: var(--sc-theme-calendar-colors-text-marked);
+		opacity: 1;
+	}
 	.grid > :global(*.selected) {
 		background: var(--sc-theme-calendar-colors-background-highlight);
 		color: var(--sc-theme-calendar-colors-text-highlight);

src/lib/config/theme.js

@@ -9,10 +9,12 @@ const light = {
 		colors: {
 			text: {
 				primary: '#333',
+				marked: '#fff',
 				highlight: '#fff'
 			},
 			background: {
 				primary: '#fff',
+				marked: '#ffe6cc',
 				highlight: '#eb7400',
 				hover: '#eee'
 			},
@@ -40,10 +42,12 @@ const dark = {
 		colors: {
 			text: {
 				primary: '#eee',
+				marked: '#fff',
 				highlight: '#fff'
 			},
 			background: {
 				primary: '#333',
+				marked: '#ddd4f7',
 				highlight: '#5829d6',
 				hover: '#222'
 			},

src/lib/stores/datepicker.js

@@ -12,11 +12,31 @@ const pipe = (...fns) => (val) => fns.reduce((accum, fn) => fn(accum), val);
 
 const zeroDay = (date) => dayjs(date).startOf('day').toDate();
 
-const get = ({ selected, start, end, startOfWeekIndex = 0, shouldEnlargeDay = false }) => {
+const buildMarkedDates = (dates = []) => {
+	return dates.reduce((acc, date) => {
+		const year = date.getFullYear();
+		const month = date.getMonth();
+		const day = date.getDate();
+		const markedMonths = acc[year] || {};
+		const markedDays = markedMonths[month] || [];
+		const updatedDays = markedDays.include(day) ? markedDays : [...markedDays, day];
+
+		return {
+			...acc,
+			[year]: {
+				...markedMonths,
+				[month]: updatedDays
+			}
+		};
+	}, {})
+};
+
+const get = ({ selected, start, end, startOfWeekIndex = 0, shouldEnlargeDay = false, marked = [] }) => {
 	const { subscribe, set, update } = writable({
 		open: false,
 		hasChosen: false,
 		selected,
+		marked: buildMarkedDates(marked),
 		start: zeroDay(start),
 		end: zeroDay(end),
 		shouldEnlargeDay,
@@ -44,6 +64,10 @@ const get = ({ selected, start, end, startOfWeekIndex = 0, shouldEnlargeDay = fa
 			if (date > end) return 1;
 			return 0;
 		},
+		isMarked(date) {
+			const { markedDates } = this.getState();
+			return !!markedDates[date.getFullYear()]?.[date.getMonth]?.includes(date.getDate());
+		},
 		isSelectable(date, clamping = []) {
 			const vector = this.getSelectableVector(date);
 			if (vector === 0) return true;