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 |
);
|