diff --git a/airflow/www/static/js/dag/details/dag/Calendar.tsx b/airflow/www/static/js/dag/details/dag/Calendar.tsx
index 6826ab5d674bf..f3c4b44a29382 100644
--- a/airflow/www/static/js/dag/details/dag/Calendar.tsx
+++ b/airflow/www/static/js/dag/details/dag/Calendar.tsx
@@ -77,8 +77,8 @@ const Calendar = () => {
 
   // We need to split the data into multiple years of calendars
   if (startYear !== endYear) {
-    for (let y = startYear; y <= endYear; y += 1) {
-      const index = y - startYear;
+    for (let y = endYear; y >= startYear; y -= 1) {
+      const index = endYear - y;
       const yearStartDate = y === startYear ? startDate : `${y}-01-01`;
       const yearEndDate = `${y}-12-31`;
       calendarOption.push({
@@ -182,6 +182,7 @@ const Calendar = () => {
           color: "gray",
           opacity: 0.6,
         },
+        show: false,
       },
     ],
     calendar: calendarOption,
@@ -195,10 +196,10 @@ const Calendar = () => {
   };
 
   return (
-    <Box height="100%">
+    <Box height={`${calendarOption.length * 165}px`} width="900px">
       <Flex>
         <InfoTooltip
-          label="        Only showing the next year of planned DAG runs or the next 2000 runs,
+          label="Only showing the next year of planned DAG runs or the next 2000 runs,
           whichever comes first."
           size={16}
         />
diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
index b459a82266f64..afe3de297c7cb 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -444,7 +444,7 @@ const Details = ({
             </TabPanel>
           )}
           {isDag && (
-            <TabPanel height="100%" width="100%">
+            <TabPanel height="100%" width="100%" overflow="auto">
               <Calendar />
             </TabPanel>
           )}