diff --git a/.changeset/polite-mails-remain.md b/.changeset/polite-mails-remain.md
new file mode 100644
index 0000000..2686ea7
--- /dev/null
+++ b/.changeset/polite-mails-remain.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+Add calendar system customization in `DatePicker` component
diff --git a/packages/react/src/components/Forms/DatePicker/index.mdx b/packages/react/src/components/Forms/DatePicker/index.mdx
index f6b4087..3984d22 100644
--- a/packages/react/src/components/Forms/DatePicker/index.mdx
+++ b/packages/react/src/components/Forms/DatePicker/index.mdx
@@ -122,6 +122,16 @@ When passing an invalid date, for example outside of the valid range, the DatePi
   <Story id="components-forms-datepicker--invalid-value"/>
 </Canvas>
 
+## International calendars
+
+When passing a locale value to the DatePicker components, dates would be automatically displayed in the appropriate calendar system.
+By default, the DatePicker component uses the CunninghamProvider locale.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--custom-locale"/>
+  <Story id="components-forms-datepicker--cunningham-locale"/>
+</Canvas>
+
 ## Props
 
 You can see the list of props below.
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 7757545..c9957a1 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -95,6 +95,26 @@ export const Fullwidth = {
   },
 };
 
+export const CustomLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider>
+      <DatePicker
+        label="Pick a date"
+        locale="hi-IN-u-ca-indian"
+        defaultValue="2023-06-25"
+      />
+    </CunninghamProvider>
+  </div>
+);
+
+export const CunninghamLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider currentLocale="fr-FR">
+      <DatePicker label="Pick a date" defaultValue="2023-06-25" />
+    </CunninghamProvider>
+  </div>
+);
+
 export const Controlled = () => {
   const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
   return (