diff --git a/CHANGELOG.md b/CHANGELOG.md index 592ba06..669faa7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [3.2.0](https://github.com/6eDesign/svelte-calendar/compare/v3.1.6...v3.2.0) (2022-10-10) + +### Feature ADD +* Added the posibility to block specific dates. + ## [3.1.6](https://github.com/6eDesign/svelte-calendar/compare/v3.1.5...v3.1.6) (2021-09-22) diff --git a/docs/docs/examples/index.html b/docs/docs/examples/index.html index e7abb1e..16694a2 100644 --- a/docs/docs/examples/index.html +++ b/docs/docs/examples/index.html @@ -2,45 +2,45 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/stores/datepicker.js b/src/lib/stores/datepicker.js index e77a9ef..ed6ad45 100644 --- a/src/lib/stores/datepicker.js +++ b/src/lib/stores/datepicker.js @@ -12,13 +12,15 @@ 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 get = ({ selected, start, end, disabledDates = [], format, startOfWeekIndex = 0, shouldEnlargeDay = false }) => { const { subscribe, set, update } = writable({ open: false, hasChosen: false, selected, start: zeroDay(start), end: zeroDay(end), + disabledDates, + format, shouldEnlargeDay, enlargeDay: false, year: selected.getFullYear(), @@ -39,9 +41,10 @@ const get = ({ selected, start, end, startOfWeekIndex = 0, shouldEnlargeDay = fa update((state) => ({ ...state, enlargeDay })); }, getSelectableVector(date) { - const { start, end } = this.getState(); + const { start, end, disabledDates, format } = this.getState(); if (date < start) return -1; if (date > end) return 1; + if( disabledDates.includes(dayjs(date).format(format)) ) return -1; return 0; }, isSelectable(date, clamping = []) { diff --git a/src/routes/docs/examples.svelte b/src/routes/docs/examples.svelte index 323488c..c3ea753 100644 --- a/src/routes/docs/examples.svelte +++ b/src/routes/docs/examples.svelte @@ -9,6 +9,7 @@ // @example(quickStart, QuickStart.svelte) // @example(startAndEnd, StartAndEnd.svelte) + // @example(blockedDays, BlockedDays.svelte) // @example(inlineCalendar, InlineCalendar.svelte) // @example(darkTheme, DarkTheme.svelte) // @example(customTheme, CustomTheme.svelte) @@ -30,6 +31,11 @@ component: startAndEnd.component, code: startAndEnd.code }, + { + title: 'Blocked Days', + component: blockedDays.component, + code: blockedDays.code + }, { title: 'Inline Calendar', component: inlineCalendar.component,