[Feature] Add locale support by adding another type of config

src/index.tsx

@@ -1,6 +1,6 @@
 export type { DatepickerConfigs, OnDateSelected } from './utils/commonTypes';
 export type { CalendarPanelProps } from './components/calendarPanel';
-export * from './utils/calanderUtils';
+export * from './utils/calendarUtils';
 export { CalendarPanel } from './components/calendarPanel';
 export * from './single';
 export * from './range';

src/range.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Props as DayzedHookProps } from 'dayzed';
-import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
+import { Month_Names_Short, Weekday_Names_Short } from './utils/calendarUtils';
 import {
   Flex,
   Input,
@@ -14,13 +14,17 @@ import {
 import { CalendarPanel } from './components/calendarPanel';
 import {
   CalendarConfigs,
+  CalendarLocaleConfigs,
   DatepickerConfigs,
+  DatepickerLocaleConfigs,
   DatepickerProps,
   OnDateSelected,
   PropsConfigs,
 } from './utils/commonTypes';
 import { format } from 'date-fns';
 import FocusLock from 'react-focus-lock';
+import { daysForLocale, monthsForLocale } from './utils/calendarUtils';
+import * as dateFnsLocales from 'date-fns/locale';
 
 interface RangeCalendarPanelProps {
   dayzedHookProps: DayzedHookProps;
@@ -82,7 +86,7 @@ export const RangeCalendarPanel: React.FC<RangeCalendarPanelProps> = ({
 
 export interface RangeDatepickerProps extends DatepickerProps {
   selectedDates: Date[];
-  configs?: DatepickerConfigs;
+  configs?: DatepickerConfigs | DatepickerLocaleConfigs;
   disabled?: boolean;
   defaultIsOpen?: boolean;
   closeOnSelect?: boolean;
@@ -99,6 +103,13 @@ const DefaultConfigs: CalendarConfigs = {
   firstDayOfWeek: 0,
 };
 
+const DefaultLocaleConfigs: CalendarLocaleConfigs = {
+  locale: 'en-US',
+  month: 'short',
+  day: 'short',
+  firstDayOfWeek: 0,
+};
+
 export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
   configs,
   propsConfigs = {},
@@ -116,10 +127,37 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
   const [offset, setOffset] = useState(0);
   const { onOpen, onClose, isOpen } = useDisclosure({ defaultIsOpen });
 
-  const calendarConfigs: CalendarConfigs = {
-    ...DefaultConfigs,
-    ...configs,
-  };
+  let calendarConfigs: CalendarConfigs;
+
+  if (configs !== undefined && 'locale' in configs) {
+    let calendarLocaleConfigs = {
+      ...DefaultLocaleConfigs,
+      ...configs,
+    };
+
+    let currentDateFns =
+      Object.values(dateFnsLocales)
+        .filter((dateFns) => dateFns.code === calendarLocaleConfigs.locale)
+        .pop() || dateFnsLocales.enUS;
+
+    calendarConfigs = {
+      dateFormat: currentDateFns.formatLong?.date({ width: 'short' }),
+      dayNames: daysForLocale(
+        calendarLocaleConfigs.locale,
+        calendarLocaleConfigs.day
+      ),
+      monthNames: monthsForLocale(
+        calendarLocaleConfigs.locale,
+        calendarLocaleConfigs.month
+      ),
+      firstDayOfWeek: calendarLocaleConfigs.firstDayOfWeek,
+    };
+  } else {
+    calendarConfigs = {
+      ...DefaultConfigs,
+      ...configs,
+    };
+  }
 
   const onPopoverClose = () => {
     onClose();

src/single.tsx

@@ -10,19 +10,23 @@ import {
 } from '@chakra-ui/react';
 import { format } from 'date-fns';
 import FocusLock from 'react-focus-lock';
-import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
+import { Month_Names_Short, Weekday_Names_Short } from './utils/calendarUtils';
 import { CalendarPanel } from './components/calendarPanel';
 import {
   CalendarConfigs,
   DatepickerConfigs,
   DatepickerProps,
+  CalendarLocaleConfigs,
+  DatepickerLocaleConfigs,
   OnDateSelected,
 } from './utils/commonTypes';
+import { daysForLocale, monthsForLocale } from './utils/calendarUtils';
+import * as dateFnsLocales from 'date-fns/locale';
 
 export interface SingleDatepickerProps extends DatepickerProps {
   date?: Date;
   onDateChange: (date: Date) => void;
-  configs?: DatepickerConfigs;
+  configs?: DatepickerConfigs | DatepickerLocaleConfigs;
   disabled?: boolean;
   /**
    * disabledDates: `Uses startOfDay as comparison`
@@ -42,6 +46,13 @@ const DefaultConfigs: CalendarConfigs = {
   firstDayOfWeek: 0,
 };
 
+const DefaultLocaleConfigs: CalendarLocaleConfigs = {
+  locale: 'en-US',
+  month: 'short',
+  day: 'short',
+  firstDayOfWeek: 0,
+};
+
 export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
   configs,
   propsConfigs,
@@ -66,10 +77,37 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
 
   const { onOpen, onClose, isOpen } = useDisclosure({ defaultIsOpen });
 
-  const calendarConfigs: CalendarConfigs = {
-    ...DefaultConfigs,
-    ...configs,
-  };
+  let calendarConfigs: CalendarConfigs;
+
+  if (configs !== undefined && 'locale' in configs) {
+    let calendarLocaleConfigs = {
+      ...DefaultLocaleConfigs,
+      ...configs,
+    };
+
+    let currentDateFns =
+      Object.values(dateFnsLocales)
+        .filter((dateFns) => dateFns.code === calendarLocaleConfigs.locale)
+        .pop() || dateFnsLocales.enUS;
+
+    calendarConfigs = {
+      dateFormat: currentDateFns.formatLong?.date({ width: 'short' }),
+      dayNames: daysForLocale(
+        calendarLocaleConfigs.locale,
+        calendarLocaleConfigs.day
+      ),
+      monthNames: monthsForLocale(
+        calendarLocaleConfigs.locale,
+        calendarLocaleConfigs.month
+      ),
+      firstDayOfWeek: calendarLocaleConfigs.firstDayOfWeek,
+    };
+  } else {
+    calendarConfigs = {
+      ...DefaultConfigs,
+      ...configs,
+    };
+  }
 
   const onPopoverClose = () => {
     onClose();

src/utils/calendarUtils.ts

@@ -0,0 +1,61 @@
+export const Month_Names_Full = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const Month_Names_Short = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export const Weekday_Names_Short = [
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+];
+
+export function daysForLocale(
+  localeName: string = 'en-US',
+  weekday: 'short' | 'long' = 'short'
+) {
+  const { format } = new Intl.DateTimeFormat(localeName, { weekday });
+  return [...Array(7).keys()].map((day) =>
+    format(new Date(Date.UTC(2021, 5, day - 1)))
+  );
+}
+
+export function monthsForLocale(
+  localeName: string = 'en-US',
+  monthFormat: 'short' | 'long' = 'short'
+) {
+  const { format } = new Intl.DateTimeFormat(localeName, {
+    month: monthFormat,
+  });
+  return [...Array(12).keys()].map((m) =>
+    format(new Date(Date.UTC(2021, m % 12)))
+  );
+}

src/utils/commonTypes.ts

@@ -46,3 +46,17 @@ export interface CalendarConfigs {
   dayNames: string[];
   firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
+
+export interface DatepickerLocaleConfigs {
+  locale?: string;
+  month?: 'long' | 'short';
+  day?: 'long' | 'short';
+  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface CalendarLocaleConfigs {
+  locale: string;
+  month: 'long' | 'short';
+  day: 'long' | 'short';
+  firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}