diff --git a/src/content/components/date-components/Calendar/index.ts b/src/content/components/date-components/Calendar/index.ts
index 801ec7e7d37e..815c2dba8b7d 100644
--- a/src/content/components/date-components/Calendar/index.ts
+++ b/src/content/components/date-components/Calendar/index.ts
@@ -1,7 +1,49 @@
+import dynamic from 'next/dynamic';
+import {Repos} from 'src/types/common';
+
 import {Component} from '../../types';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.DateComponents, componentName: 'Calendar'};
 
 export const calendarConfig: Component = {
     id: 'calendar',
     title: 'Calendar',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        component: dynamic(() =>
+            import('../examples/components/index').then((mod) => mod.CalendarExample),
+        ),
+        props: {
+            size: {
+                type: 'radioButton',
+                values: mappingOptions(['m', 'l', 'xl']),
+                defaultValue: 'm',
+            },
+            mode: {
+                type: 'select',
+                values: mappingOptions(['days', 'months', 'quarters', 'years']),
+            },
+            disabled: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            readOnly: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            minValue: {
+                type: 'input',
+            },
+            maxValue: {
+                type: 'input',
+            },
+            focusedValue: {
+                type: 'input',
+            },
+        },
+    },
 };
diff --git a/src/content/components/date-components/examples/components/CalendarExample.tsx b/src/content/components/date-components/examples/components/CalendarExample.tsx
new file mode 100644
index 000000000000..6c0d0d5539c4
--- /dev/null
+++ b/src/content/components/date-components/examples/components/CalendarExample.tsx
@@ -0,0 +1,35 @@
+import {Calendar, CalendarProps} from '@gravity-ui/date-components';
+import {DateTimeInput, dateTimeParse} from '@gravity-ui/date-utils';
+
+type CalendarExampleProps = {
+    defaultValue?: DateTimeInput;
+    maxValue?: DateTimeInput;
+    minValue?: DateTimeInput;
+    defaultFocusedValue?: DateTimeInput;
+    focusedValue?: DateTimeInput;
+} & Omit<
+    CalendarProps,
+    'defaultValue' | 'maxValue' | 'minValue' | 'defaultFocusedValue' | 'focusedValue'
+>;
+
+export const CalendarExample = ({
+    focusedValue,
+    defaultFocusedValue,
+    defaultValue,
+    maxValue,
+    minValue,
+    ...otherProps
+}: CalendarExampleProps) => {
+    const modes: CalendarProps['modes'] = {days: true, months: true, quarters: true, years: true};
+    return (
+        <Calendar
+            {...otherProps}
+            defaultFocusedValue={dateTimeParse(defaultFocusedValue)}
+            defaultValue={dateTimeParse(defaultValue)}
+            minValue={dateTimeParse(minValue)}
+            maxValue={dateTimeParse(maxValue)}
+            focusedValue={dateTimeParse(focusedValue)}
+            modes={modes}
+        />
+    );
+};
diff --git a/src/content/components/date-components/examples/components/DateFieldExample.tsx b/src/content/components/date-components/examples/components/DateFieldExample.tsx
index edc838bd4756..3aedede6f971 100644
--- a/src/content/components/date-components/examples/components/DateFieldExample.tsx
+++ b/src/content/components/date-components/examples/components/DateFieldExample.tsx
@@ -13,16 +13,12 @@ export const DateFieldExample = ({
     minValue,
     ...restProps
 }: DateFieldExampleProps) => {
-    const parsedDefaultValue = defaultValue ? dateTimeParse(defaultValue) : undefined;
-    const parsedMaxValue = maxValue ? dateTimeParse(maxValue) : undefined;
-    const parsedMinValue = minValue ? dateTimeParse(minValue) : undefined;
-
     return (
         <DateField
             {...restProps}
-            defaultValue={parsedDefaultValue}
-            maxValue={parsedMaxValue}
-            minValue={parsedMinValue}
+            defaultValue={dateTimeParse(defaultValue)}
+            maxValue={dateTimeParse(maxValue)}
+            minValue={dateTimeParse(minValue)}
         />
     );
 };
diff --git a/src/content/components/date-components/examples/components/index.tsx b/src/content/components/date-components/examples/components/index.tsx
new file mode 100644
index 000000000000..b93df63fd881
--- /dev/null
+++ b/src/content/components/date-components/examples/components/index.tsx
@@ -0,0 +1,2 @@
+export * from './CalendarExample';
+export * from './DateFieldExample';