diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
index 85bdd51d..c3b84f2a 100644
--- a/src/form/Calendar/Calendar.story.tsx
+++ b/src/form/Calendar/Calendar.story.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Card } from '../../layout/Card';
 import { Calendar } from './Calendar';
 import { CalendarRange } from './CalendarRange';
-import { add, addMonths, sub } from 'date-fns';
+import { add, addMonths, endOfMonth, startOfMonth, sub } from 'date-fns';
 import { Divider } from '../../layout/Divider';
 import { Stack } from '../../layout/Stack';
 
@@ -152,6 +152,31 @@ export const Range = () => {
   );
 };
 
+export const CurrentMonth = () => {
+  const [range, setRange] = useState<[Date, Date]>([
+    startOfMonth(new Date()),
+    endOfMonth(new Date())
+  ]);
+
+  return (
+    <Card>
+      <Calendar
+        value={range}
+        onChange={val => setRange(val as [Date, Date | undefined])}
+        isRange
+        showDayOfWeek
+        showToday
+      />
+      <Divider />
+      <Stack justifyContent="center">
+        {range
+          ? `${range[0]?.toLocaleDateString()}-${range[1]?.toLocaleDateString()}`
+          : 'No date selected'}
+      </Stack>
+    </Card>
+  );
+};
+
 export const Multiview = () => {
   const [range, setRange] = useState<[Date, Date]>();
 
diff --git a/src/form/Calendar/utils.ts b/src/form/Calendar/utils.ts
index 570e0a83..af15607a 100644
--- a/src/form/Calendar/utils.ts
+++ b/src/form/Calendar/utils.ts
@@ -13,7 +13,8 @@ import {
   startOfMonth,
   min,
   max,
-  subDays
+  subDays,
+  isWithinInterval
 } from 'date-fns';
 
 /**
@@ -155,10 +156,7 @@ export function getDayAttributes(
     const startDate = min(range);
     const endDate = max(range);
 
-    return (
-      isAfter(date, addDays(startDate, -1)) &&
-      isBefore(date, addDays(endDate, 1))
-    );
+    return isWithinInterval(date, { start: startDate, end: endDate });
   };
 
   const isSelectionStarted = Array.isArray(current) && isValid(current[0]);