svelte-range-calendar 0.2.0 → 0.5.0

package/dist/Calendar.svelte.d.ts

@@ -3,11 +3,11 @@ import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import type { Formatter } from './shared/formatters.js';
 import type { CalendarType, Detail, LooseValue, NavigationLabelArgs, ReturnValue, TileArgs, Value, View, ViewCallbackProperties } from './shared/types.js';
-type CalendarProps = {
+type CalendarProps<T> = {
     /**
      * The beginning of the period that shall be displayed. Can be bound.
      */
-    activeStartDate?: Date | null;
+    activeStartDate?: T | null;
     /**
      * Whether a partial range (only the first end selected) should be passed to `onChange`. Only applies when `selectRange` is set.
      *
@@ -25,18 +25,18 @@ type CalendarProps = {
     /**
      * The beginning of the period that shall be displayed by default.
      */
-    defaultActiveStartDate?: Date;
+    defaultActiveStartDate?: T;
     /**
      * Calendar view that shall be displayed by default.
      */
     defaultView?: View;
-    formatDay?: Formatter;
-    formatLongDate?: Formatter;
-    formatMonth?: Formatter;
-    formatMonthYear?: Formatter;
-    formatShortWeekday?: Formatter;
-    formatWeekday?: Formatter;
-    formatYear?: Formatter;
+    formatDay?: Formatter<T>;
+    formatLongDate?: Formatter<T>;
+    formatMonth?: Formatter<T>;
+    formatMonthYear?: Formatter<T>;
+    formatShortWeekday?: Formatter<T>;
+    formatWeekday?: Formatter<T>;
+    formatYear?: Formatter<T>;
     /**
      * Whether to go to the beginning of the selected range when it changes.
      *
@@ -50,7 +50,7 @@ type CalendarProps = {
     /**
      * Maximum date that the user can select. Periods partially overlapped by `maxDate` will also be selectable.
      */
-    maxDate?: Date;
+    maxDate?: T;
     /**
      * The most detailed view that the user shall see. Clicking an item in this view selects a date.
      *
@@ -60,7 +60,7 @@ type CalendarProps = {
     /**
      * Minimum date that the user can select. Periods partially overlapped by `minDate` will also be selectable.
      */
-    minDate?: Date;
+    minDate?: T;
     /**
      * The least detailed view that the user shall see.
      *
@@ -72,7 +72,7 @@ type CalendarProps = {
     /**
      * Custom content of the navigation label.
      */
-    navigationLabel?: Snippet<[NavigationLabelArgs]>;
+    navigationLabel?: Snippet<[NavigationLabelArgs<T>]>;
     next2AriaLabel?: string;
     /**
      * Content of the "jump forward" button. Setting it to `null` hides the button.
@@ -87,18 +87,18 @@ type CalendarProps = {
      * @default '›'
      */
     nextLabel?: string | null;
-    onActiveStartDateChange?: (args: ViewCallbackProperties) => void;
+    onActiveStartDateChange?: (args: ViewCallbackProperties<T>) => void;
     /**
      * Function called when the user selects a value. When `selectRange` is set, receives a `[from, to]` array.
      */
-    onChange?: (value: Value, event: MouseEvent) => void;
-    onClickDay?: (value: Date, event: MouseEvent) => void;
-    onClickDecade?: (value: Date, event: MouseEvent) => void;
-    onClickMonth?: (value: Date, event: MouseEvent) => void;
-    onClickYear?: (value: Date, event: MouseEvent) => void;
-    onDrillDown?: (args: ViewCallbackProperties) => void;
-    onDrillUp?: (args: ViewCallbackProperties) => void;
-    onViewChange?: (args: ViewCallbackProperties) => void;
+    onChange?: (value: Value<T>, event: MouseEvent) => void;
+    onClickDay?: (value: T, event: MouseEvent) => void;
+    onClickDecade?: (value: T, event: MouseEvent) => void;
+    onClickMonth?: (value: T, event: MouseEvent) => void;
+    onClickYear?: (value: T, event: MouseEvent) => void;
+    onDrillDown?: (args: ViewCallbackProperties<T>) => void;
+    onDrillUp?: (args: ViewCallbackProperties<T>) => void;
+    onViewChange?: (args: ViewCallbackProperties<T>) => void;
     prev2AriaLabel?: string;
     /**
      * Content of the "jump backward" button. Setting it to `null` hides the button.
@@ -149,24 +149,45 @@ type CalendarProps = {
     /**
      * Class name(s) added to tiles. Can be a function receiving `{ activeStartDate, date, view }`.
      */
-    tileClassName?: ClassValue | ((args: TileArgs) => ClassValue);
+    tileClassName?: ClassValue | ((args: TileArgs<T>) => ClassValue);
     /**
      * Custom content rendered inside tiles.
      */
-    tileContent?: Snippet<[TileArgs]>;
+    tileContent?: Snippet<[TileArgs<T>]>;
     /**
      * Function that returns `true` for dates that should be disabled.
      */
-    tileDisabled?: (args: TileArgs) => boolean;
+    tileDisabled?: (args: TileArgs<T>) => boolean;
     /**
      * Calendar value. Can be a single date or a range.
      */
-    value?: LooseValue;
+    value?: LooseValue<T>;
     /**
      * Currently displayed view. Can be bound.
      */
     view?: View;
 };
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "activeStartDate" | "view">;
-type Calendar = ReturnType<typeof Calendar>;
+declare function $$render<T>(): {
+    props: CalendarProps<T>;
+    exports: {};
+    bindings: "activeStartDate" | "view";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "activeStartDate" | "view";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Calendar: $$IsomorphicComponent;
+type Calendar<T> = InstanceType<typeof Calendar<T>>;
 export default Calendar;

package/dist/shared/dates.d.ts

@@ -1,21 +1,17 @@
+import type { DateAdapter } from 'svelte-date-utils';
 import type { CalendarType, DateType, LooseValue, LooseValuePiece, Range, View } from './types.js';
 export declare const views: readonly ["century", "decade", "year", "month"];
-/** Type of date represented by a single tile in a given view. */
 export declare const tileTypes: Record<View, DateType>;
 export declare function getCalendarType(locale: string): CalendarType;
-export declare function isWeekend(date: Date, calendarType: CalendarType): boolean;
-export declare function addDays(date: Date, days: number): Date;
-export declare function getBeginOfWeek(date: Date, calendarType: CalendarType): Date;
-export declare function getDaysBetween(from: Date, to: Date): number;
-export declare function getWeekNumber(date: Date, calendarType: CalendarType): number;
-export declare function getBegin(type: DateType, date: Date): Date;
-export declare function getEnd(type: DateType, date: Date): Date;
-export declare function getRange(type: DateType, date: Date): Range<Date>;
-/**
- * Moves a date by one unit of the given view (`double` = false), or by one unit of the next
- * bigger view (`double` = true), and returns the beginning of the resulting period.
- */
-export declare function shiftDate(view: View, date: Date, amount: number, double?: boolean): Date;
-export declare function isRangeWithinRange(greater: Range<Date>, smaller: Range<Date>): boolean;
-export declare function toDate(value: LooseValuePiece | undefined): Date | null;
-export declare function normalizeValue(value: LooseValue | undefined): Range<Date | null>;
+export declare function isWeekend<T>(adapter: DateAdapter<T>, date: T, calendarType: CalendarType): boolean;
+export declare function addDays<T>(adapter: DateAdapter<T>, date: T, days: number): T;
+export declare function getBeginOfWeek<T>(adapter: DateAdapter<T>, date: T, calendarType: CalendarType): T;
+export declare function getDaysBetween<T>(adapter: DateAdapter<T>, from: T, to: T): number;
+export declare function getWeekNumber<T>(adapter: DateAdapter<T>, date: T, calendarType: CalendarType): number;
+export declare function getBegin<T>(adapter: DateAdapter<T>, type: DateType, date: T): T;
+export declare function getEnd<T>(adapter: DateAdapter<T>, type: DateType, date: T): T;
+export declare function getRange<T>(adapter: DateAdapter<T>, type: DateType, date: T): Range<T>;
+export declare function shiftDate<T>(adapter: DateAdapter<T>, view: View, date: T, amount: number, double?: boolean): T;
+export declare function isRangeWithinRange<T>(adapter: DateAdapter<T>, greater: Range<T>, smaller: Range<T>): boolean;
+export declare function toDate<T>(adapter: DateAdapter<T>, value: LooseValuePiece<T> | undefined): T | null;
+export declare function normalizeValue<T>(adapter: DateAdapter<T>, value: LooseValue<T> | undefined): Range<T | null>;

package/dist/shared/dates.js

@@ -1,15 +1,11 @@
-import { getCenturyEnd, getCenturyStart, getDayEnd, getDayStart, getDecadeEnd, getDecadeStart, getMonthEnd, getMonthStart, getYearEnd, getYearStart, } from 'svelte-date-utils';
+import { createDateUtils } from 'svelte-date-utils';
 export const views = ['century', 'decade', 'year', 'month'];
-/** Type of date represented by a single tile in a given view. */
 export const tileTypes = {
     century: 'decade',
     decade: 'year',
     year: 'month',
     month: 'day',
 };
-const dayInMs = 24 * 60 * 60 * 1000;
-const gregoryRegions = new Set('AG AS AU BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW'.split(' '));
-const islamicRegions = new Set('AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.split(' '));
 export function getCalendarType(locale) {
     let region;
     try {
@@ -18,13 +14,15 @@ export function getCalendarType(locale) {
     catch {
         region = locale.split('-')[1]?.toUpperCase();
     }
-    if (region === 'IL') {
+    if (region === 'IL')
         return 'hebrew';
-    }
-    if (region && islamicRegions.has(region)) {
+    if (region && 'AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY'.split(' ').includes(region)) {
         return 'islamic';
     }
-    if (region && gregoryRegions.has(region)) {
+    if (region &&
+        'AG AS AU BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW'
+            .split(' ')
+            .includes(region)) {
         return 'gregory';
     }
     return 'iso8601';
@@ -35,98 +33,104 @@ const weekStartDays = {
     iso8601: 1,
     islamic: 6,
 };
-export function isWeekend(date, calendarType) {
-    const day = date.getDay();
+export function isWeekend(adapter, date, calendarType) {
+    const day = adapter.toJsDate(date).getDay();
     return calendarType === 'islamic' || calendarType === 'hebrew'
         ? day === 5 || day === 6
         : day === 0 || day === 6;
 }
-export function addDays(date, days) {
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+export function addDays(adapter, date, days) {
+    return adapter.startOfDay(adapter.addDays(date, days));
 }
-export function getBeginOfWeek(date, calendarType) {
-    const offset = (date.getDay() - weekStartDays[calendarType] + 7) % 7;
-    return addDays(date, -offset);
+export function getBeginOfWeek(adapter, date, calendarType) {
+    const day = adapter.toJsDate(date).getDay();
+    const offset = (day - weekStartDays[calendarType] + 7) % 7;
+    return addDays(adapter, date, -offset);
 }
-export function getDaysBetween(from, to) {
-    const fromDay = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
-    const toDay = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
-    return Math.round((toDay - fromDay) / dayInMs);
+export function getDaysBetween(adapter, from, to) {
+    const a = adapter.toJsDate(from);
+    const b = adapter.toJsDate(to);
+    const fromDay = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+    const toDay = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+    return Math.round((toDay - fromDay) / 86_400_000);
 }
-export function getWeekNumber(date, calendarType) {
+export function getWeekNumber(adapter, date, calendarType) {
+    const jsDate = adapter.toJsDate(date);
     if (calendarType === 'iso8601') {
-        const thursday = addDays(date, 4 - (date.getDay() || 7));
-        const yearStart = new Date(thursday.getFullYear(), 0, 1);
-        return Math.ceil((getDaysBetween(yearStart, thursday) + 1) / 7);
+        const day = jsDate.getDay() || 7;
+        const thursday = addDays(adapter, date, 4 - day);
+        const year = adapter.getYear(thursday);
+        const yearStart = adapter.setDate(adapter.setMonth(adapter.setYear(adapter.date(), year), 0), 1);
+        return Math.ceil((getDaysBetween(adapter, yearStart, thursday) + 1) / 7);
     }
-    const weekStart = getBeginOfWeek(date, calendarType);
-    // The week containing January 1st is week 1
-    if (addDays(weekStart, 6).getFullYear() > weekStart.getFullYear()) {
+    const weekStart = getBeginOfWeek(adapter, date, calendarType);
+    if (adapter.getYear(addDays(adapter, weekStart, 6)) > adapter.getYear(weekStart))
         return 1;
-    }
-    const firstWeekStart = getBeginOfWeek(new Date(weekStart.getFullYear(), 0, 1), calendarType);
-    return Math.round(getDaysBetween(firstWeekStart, weekStart) / 7) + 1;
+    const year = adapter.getYear(weekStart);
+    const firstDate = adapter.setDate(adapter.setMonth(adapter.setYear(adapter.date(), year), 0), 1);
+    const firstWeekStart = getBeginOfWeek(adapter, firstDate, calendarType);
+    return Math.round(getDaysBetween(adapter, firstWeekStart, weekStart) / 7) + 1;
 }
-export function getBegin(type, date) {
+export function getBegin(adapter, type, date) {
+    const utils = createDateUtils(adapter);
     switch (type) {
         case 'century':
-            return getCenturyStart(date);
+            return utils.getCenturyStart(date);
         case 'decade':
-            return getDecadeStart(date);
+            return utils.getDecadeStart(date);
         case 'year':
-            return getYearStart(date);
+            return utils.getYearStart(date);
         case 'month':
-            return getMonthStart(date);
+            return utils.getMonthStart(date);
         case 'day':
-            return getDayStart(date);
+            return utils.getDayStart(date);
     }
 }
-export function getEnd(type, date) {
+export function getEnd(adapter, type, date) {
+    const utils = createDateUtils(adapter);
     switch (type) {
         case 'century':
-            return getCenturyEnd(date);
+            return utils.getCenturyEnd(date);
         case 'decade':
-            return getDecadeEnd(date);
+            return utils.getDecadeEnd(date);
         case 'year':
-            return getYearEnd(date);
+            return utils.getYearEnd(date);
         case 'month':
-            return getMonthEnd(date);
+            return utils.getMonthEnd(date);
         case 'day':
-            return getDayEnd(date);
+            return utils.getDayEnd(date);
     }
 }
-export function getRange(type, date) {
-    return [getBegin(type, date), getEnd(type, date)];
+export function getRange(adapter, type, date) {
+    return [getBegin(adapter, type, date), getEnd(adapter, type, date)];
 }
 const stepInYears = { century: 100, decade: 10, month: 0, year: 1 };
 const bigStepInYears = { century: 0, decade: 100, month: 1, year: 10 };
-/**
- * Moves a date by one unit of the given view (`double` = false), or by one unit of the next
- * bigger view (`double` = true), and returns the beginning of the resulting period.
- */
-export function shiftDate(view, date, amount, double = false) {
-    const year = date.getFullYear();
-    const month = date.getMonth();
+function makeDate(adapter, year, month, day = 1) {
+    const date = adapter.setYear(adapter.date(), year);
+    return adapter.setDate(adapter.setMonth(date, month), day);
+}
+export function shiftDate(adapter, view, date, amount, double = false) {
+    const year = adapter.getYear(date);
+    const month = adapter.getMonth(date);
     if (!double) {
         return view === 'month'
-            ? new Date(year, month + amount, 1)
-            : getBegin(view, new Date(year + amount * stepInYears[view], 0, 1));
+            ? makeDate(adapter, year, month + amount)
+            : getBegin(adapter, view, makeDate(adapter, year + amount * stepInYears[view], 0));
     }
-    return getBegin(view, new Date(year + amount * bigStepInYears[view], view === 'month' ? month : 0, 1));
+    return getBegin(adapter, view, makeDate(adapter, year + amount * bigStepInYears[view], view === 'month' ? month : 0));
 }
-export function isRangeWithinRange(greater, smaller) {
-    return (greater[0].getTime() <= smaller[0].getTime() && greater[1].getTime() >= smaller[1].getTime());
+export function isRangeWithinRange(adapter, greater, smaller) {
+    return !adapter.isAfter(smaller[0], greater[0]) && !adapter.isBefore(smaller[1], greater[1]);
 }
-export function toDate(value) {
-    if (value === null || value === undefined) {
+export function toDate(adapter, value) {
+    if (value === null || value === undefined)
         return null;
-    }
-    const date = value instanceof Date ? value : new Date(value);
-    return Number.isNaN(date.getTime()) ? null : date;
+    const date = typeof value === 'string' ? adapter.date(value) : value;
+    return adapter.isValid(date) ? date : null;
 }
-export function normalizeValue(value) {
-    if (Array.isArray(value)) {
-        return [toDate(value[0]), toDate(value[1])];
-    }
-    return [toDate(value), null];
+export function normalizeValue(adapter, value) {
+    if (Array.isArray(value))
+        return [toDate(adapter, value[0]), toDate(adapter, value[1])];
+    return [toDate(adapter, value), null];
 }

package/dist/shared/formatters.d.ts

@@ -1,4 +1,4 @@
-export type Formatter = (locale: string | undefined, date: Date) => string;
+export type Formatter<T = Date> = (locale: string | undefined, date: T) => string;
 export declare const formatDay: Formatter;
 export declare const formatLongDate: Formatter;
 export declare const formatMonth: Formatter;

package/dist/shared/types.d.ts

@@ -3,25 +3,25 @@ export type CalendarType = 'gregory' | 'hebrew' | 'islamic' | 'iso8601';
 export type View = 'century' | 'decade' | 'year' | 'month';
 export type Detail = View;
 export type DateType = View | 'day';
-export type LooseValuePiece = string | Date | null;
-export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
-export type ValuePiece = Date | null;
-export type Value = ValuePiece | Range<ValuePiece>;
+export type LooseValuePiece<T = Date> = string | T | null;
+export type LooseValue<T = Date> = LooseValuePiece<T> | Range<LooseValuePiece<T>>;
+export type ValuePiece<T = Date> = T | null;
+export type Value<T = Date> = ValuePiece<T> | Range<ValuePiece<T>>;
 export type ReturnValue = 'start' | 'end' | 'range';
 export type NavigationAction = 'prev' | 'prev2' | 'next' | 'next2' | 'onChange' | 'drillUp' | 'drillDown';
-export type ViewCallbackProperties = {
+export type ViewCallbackProperties<T = Date> = {
     action: NavigationAction;
-    activeStartDate: Date | null;
-    value: LooseValue | undefined;
+    activeStartDate: T | null;
+    value: LooseValue<T> | undefined;
     view: View;
 };
-export type TileArgs = {
-    activeStartDate: Date;
-    date: Date;
+export type TileArgs<T = Date> = {
+    activeStartDate: T;
+    date: T;
     view: View;
 };
-export type NavigationLabelArgs = {
-    date: Date;
+export type NavigationLabelArgs<T = Date> = {
+    date: T;
     label: string;
     locale: string | undefined;
     view: View;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-calendar",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "A calendar with range selection for your Svelte app.",
   "keywords": [
     "calendar",
@@ -50,8 +50,7 @@
     "watch": "svelte-package --input src --output dist --watch"
   },
   "dependencies": {
-    "get-user-locale": "^3.0.0",
-    "svelte-date-utils": "^0.2.0"
+    "svelte-date-utils": "^0.5.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^3.0.1",