From ae00ff09e1572832fe53284a2d3331e25f16b976 Mon Sep 17 00:00:00 2001
From: Guillermo Pages <mail@guillermo.at>
Date: Wed, 16 Jul 2025 16:02:49 +0200
Subject: [PATCH] fix: included

---
 src/components/calendar/DateRange/index.tsx | 11 ++++++++---
 src/examples/DateRangeView.tsx              | 11 +++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/calendar/DateRange/index.tsx b/src/components/calendar/DateRange/index.tsx
index d3afe13..5e31c10 100644
--- a/src/components/calendar/DateRange/index.tsx
+++ b/src/components/calendar/DateRange/index.tsx
@@ -10,6 +10,7 @@ interface DateRangeProps {
   from: Date;
   to: Date;
   included?: boolean;
+  selected?: boolean;
   headerStyle?: HeaderStyle;
   weekendDays?: number[];
   size?: DaySize;
@@ -21,6 +22,7 @@ export const DateRange: React.FC<DateRangeProps> = ({
   from,
   to,
   included = true,
+  selected = false,
   headerStyle = 'tiny',
   weekendDays = [6, 0],
   size = 'l',
@@ -30,9 +32,12 @@ export const DateRange: React.FC<DateRangeProps> = ({
   const startDate = startOfDay(from);
   const endDate = startOfDay(to);
   
-  const days = eachDayOfInterval({ start: startDate, end: endDate });
+  // If included is false, we exclude the start and end dates
+  const days = included 
+    ? eachDayOfInterval({ start: startDate, end: endDate })
+    : eachDayOfInterval({ start: startDate, end: endDate }).slice(1, -1);
   
-  const dateRange = included ? {
+  const dateRange = selected ? {
     startDate,
     endDate,
     selecting: false,
@@ -42,7 +47,7 @@ export const DateRange: React.FC<DateRangeProps> = ({
 
   return (
     <div className={styles.DateRange__Container}>
-      {days.map((date, i) => {
+      {days.map((date) => {
         const dayOfWeek = date.getDay();
         const variations = getDateVariations(date, dateRange, weekendDays, dayOfWeek);
         
diff --git a/src/examples/DateRangeView.tsx b/src/examples/DateRangeView.tsx
index 2767129..1afa686 100644
--- a/src/examples/DateRangeView.tsx
+++ b/src/examples/DateRangeView.tsx
@@ -9,6 +9,7 @@ export const DateRangeView: React.FC = () => {
   const [size, setSize] = useState<DaySize>('l');
   const [fontProportion, setFontProportion] = useState<number>(100);
   const [included, setIncluded] = useState<boolean>(true);
+  const [selected, setSelected] = useState<boolean>(true);
   const [monthCutoff, setMonthCutoff] = useState<MonthCutoffType>(undefined);
 
   const fromDate = new Date(2025, 0, 15); // January 15, 2025
@@ -37,6 +38,14 @@ export const DateRangeView: React.FC = () => {
             checked={included}
             onChange={(e) => setIncluded(e.target.checked)}
           />
+          <span>Include start/end dates</span>
+        </label>
+        <label className={styles.control}>
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={(e) => setSelected(e.target.checked)}
+          />
           <span>Show as selected range</span>
         </label>
       </div>
@@ -45,6 +54,7 @@ export const DateRangeView: React.FC = () => {
           from={fromDate}
           to={toDate}
           included={included}
+          selected={selected}
           headerStyle={dayHeaderStyle}
           weekendDays={[6, 0]}
           size={size}
@@ -57,6 +67,7 @@ export const DateRangeView: React.FC = () => {
   from={new Date(2025, 0, 15)}
   to={new Date(2025, 0, 22)}
   included={${included}}
+  selected={${selected}}
   headerStyle="${dayHeaderStyle}"
   size="${size}"
   fontProportion={${fontProportion}}