diff --git a/packages/blade/src/components/DatePicker/Calendar.web.tsx b/packages/blade/src/components/DatePicker/Calendar.web.tsx
index 7e032c6e5bf..4c0b5d0bbbb 100644
--- a/packages/blade/src/components/DatePicker/Calendar.web.tsx
+++ b/packages/blade/src/components/DatePicker/Calendar.web.tsx
@@ -26,12 +26,6 @@ const Calendar = <Type extends DateSelectionType>({
   locale,
   onNext,
   onPrevious,
-  onNextMonth,
-  onNextYear,
-  onNextDecade,
-  onPreviousMonth,
-  onPreviousYear,
-  onPreviousDecade,
   presets,
   ...props
 }: CalendarProps<Type> & {
@@ -73,29 +67,25 @@ const Calendar = <Type extends DateSelectionType>({
 
   const handleNextMonth = () => {
     const nextDate = dayjs(currentDate).add(columnsToScroll, 'month').toDate();
-    onNextMonth?.(nextDate);
-    onNext?.(nextDate);
+    onNext?.({ date: nextDate, type: 'month' });
     setDate(nextDate);
   };
 
   const handlePreviousMonth = () => {
     const nextDate = dayjs(currentDate).subtract(columnsToScroll, 'month').toDate();
-    onPreviousMonth?.(nextDate);
-    onPrevious?.(nextDate);
+    onPrevious?.({ date: nextDate, type: 'month' });
     setDate(nextDate);
   };
 
   const handleNextYear = () => {
     const nextDate = dayjs(currentDate).add(columnsToScroll, 'year').toDate();
-    onNextYear?.(nextDate);
-    onNext?.(nextDate);
+    onNext?.({ date: nextDate, type: 'year' });
     setDate(nextDate);
   };
 
   const handlePreviousYear = () => {
     const nextDate = dayjs(currentDate).subtract(columnsToScroll, 'year').toDate();
-    onPreviousYear?.(nextDate);
-    onPrevious?.(nextDate);
+    onPrevious?.({ date: nextDate, type: 'year' });
     setDate(nextDate);
   };
 
@@ -103,8 +93,7 @@ const Calendar = <Type extends DateSelectionType>({
     const nextDate = dayjs(currentDate)
       .add(10 * columnsToScroll, 'year')
       .toDate();
-    onNextDecade?.(nextDate);
-    onNext?.(nextDate);
+    onNext?.({ date: nextDate, type: 'decade' });
     setDate(nextDate);
   };
 
@@ -112,8 +101,7 @@ const Calendar = <Type extends DateSelectionType>({
     const nextDate = dayjs(currentDate)
       .subtract(10 * columnsToScroll, 'year')
       .toDate();
-    onPreviousDecade?.(nextDate);
-    onNext?.(nextDate);
+    onPrevious?.({ date: nextDate, type: 'decade' });
     setDate(nextDate);
   };
 
diff --git a/packages/blade/src/components/DatePicker/DatePicker.web.tsx b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
index 4a86a14f274..4b3d3aa40bd 100644
--- a/packages/blade/src/components/DatePicker/DatePicker.web.tsx
+++ b/packages/blade/src/components/DatePicker/DatePicker.web.tsx
@@ -194,12 +194,12 @@ const DatePicker = <Type extends DateSelectionType = 'single'>({
             props?.onYearSelect?.(date);
             onDateChange(date);
           }}
-          onNext={(date) => {
-            props?.onNext?.(date);
+          onNext={(data) => {
+            props?.onNext?.(data);
             forceRerenderBottomSheet();
           }}
-          onPrevious={(date) => {
-            props?.onPrevious?.(date);
+          onPrevious={(data) => {
+            props?.onPrevious?.(data);
             forceRerenderBottomSheet();
           }}
           picker={_picker}
diff --git a/packages/blade/src/components/DatePicker/types.ts b/packages/blade/src/components/DatePicker/types.ts
index 9bfed84a616..503ed6243f6 100644
--- a/packages/blade/src/components/DatePicker/types.ts
+++ b/packages/blade/src/components/DatePicker/types.ts
@@ -9,6 +9,7 @@ import type { BaseInputProps } from '~components/Input/BaseInput';
 import type { TextInputProps } from '~components/Input/TextInput';
 import type { FormInputValidationProps } from '~components/Form';
 
+type Level = 'month' | 'year' | 'decade';
 type PickerType = 'day' | 'month' | 'year';
 type Preset = {
   /**
@@ -101,15 +102,20 @@ type CalendarProps<SelectionType extends DateSelectionType> = Pick<
    */
   locale?: string;
 
-  // Basic selection props
-  onNext?: (date: Date) => void;
-  onNextMonth?: (date: Date) => void;
-  onNextYear?: (date: Date) => void;
-  onNextDecade?: (date: Date) => void;
-  onPrevious?: (date: Date) => void;
-  onPreviousYear?: (date: Date) => void;
-  onPreviousMonth?: (date: Date) => void;
-  onPreviousDecade?: (date: Date) => void;
+  /**
+   * Callback which is called whenever the next button is clicked.
+   *
+   * @param date - The updated date.
+   * @param type - The level of the calendar. ("month" | "year" | "decade")
+   */
+  onNext?: ({ date, type }: { date: Date; type: Level }) => void;
+  /**
+   * Callback which is called whenever the previous button is clicked.
+   *
+   * @param date - The updated date.
+   * @param type - The level of the calendar. ("month" | "year" | "decade")
+   */
+  onPrevious?: ({ date, type }: { date: Date; type: Level }) => void;
 };
 
 type DatePickerProps<Type extends DateSelectionType> = Omit<