Spaces:
Running
Running
gpt-engineer-app[bot]
commited on
Commit
·
6d0b1ef
1
Parent(s):
f09e08a
Fix: Calendar conference date display
Browse filesThe calendar was not displaying straight lines for conference dates, only showing the first day. This commit addresses that issue.
- src/pages/Calendar.tsx +15 -13
src/pages/Calendar.tsx
CHANGED
@@ -189,26 +189,28 @@ const CalendarPage = () => {
|
|
189 |
const startDate = safeParseISO(conf.start);
|
190 |
const endDate = safeParseISO(conf.end);
|
191 |
|
192 |
-
if (!startDate || !
|
193 |
-
return null;
|
194 |
-
}
|
195 |
|
196 |
const categoryColor = conf.tags?.[0] ? categoryColors[conf.tags[0]] || "bg-purple-600" : "bg-purple-600";
|
197 |
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
const daysBetween = Math.ceil((effectiveEndDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;
|
204 |
-
width = `calc(100% * ${daysBetween})`;
|
205 |
-
}
|
206 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
207 |
return (
|
208 |
<div
|
209 |
-
key={conf.id}
|
210 |
className={`h-0.5 ${categoryColor} absolute`}
|
211 |
-
style={{ width }}
|
212 |
title={conf.title}
|
213 |
/>
|
214 |
);
|
|
|
189 |
const startDate = safeParseISO(conf.start);
|
190 |
const endDate = safeParseISO(conf.end);
|
191 |
|
192 |
+
if (!startDate || !endDate) return null;
|
|
|
|
|
193 |
|
194 |
const categoryColor = conf.tags?.[0] ? categoryColors[conf.tags[0]] || "bg-purple-600" : "bg-purple-600";
|
195 |
|
196 |
+
if (day < startDate || day > endDate) return null;
|
197 |
+
|
198 |
+
const isFirstDayOfMonth = day.getDate() === 1;
|
199 |
+
const isStartDate = isSameDay(startDate, day);
|
|
|
|
|
|
|
|
|
200 |
|
201 |
+
const lastDayOfMonth = new Date(day.getFullYear(), day.getMonth() + 1, 0);
|
202 |
+
const daysUntilMonthEnd = Math.min(
|
203 |
+
Math.ceil((endDate.getTime() - day.getTime()) / (1000 * 60 * 60 * 24)) + 1,
|
204 |
+
Math.ceil((lastDayOfMonth.getTime() - day.getTime()) / (1000 * 60 * 60 * 24)) + 1
|
205 |
+
);
|
206 |
+
|
207 |
+
if (!isStartDate && !isFirstDayOfMonth) return null;
|
208 |
+
|
209 |
return (
|
210 |
<div
|
211 |
+
key={`${conf.id}-${format(day, 'yyyy-MM')}`}
|
212 |
className={`h-0.5 ${categoryColor} absolute`}
|
213 |
+
style={{ width: `calc(100% * ${daysUntilMonthEnd})` }}
|
214 |
title={conf.title}
|
215 |
/>
|
216 |
);
|