Spaces:
Running
Running
Stack lines on top of each other
Browse files- src/pages/Calendar.tsx +13 -22
src/pages/Calendar.tsx
CHANGED
@@ -3,7 +3,7 @@ import conferencesData from "@/data/conferences.yml";
|
|
3 |
import { Conference } from "@/types/conference";
|
4 |
import { Calendar as CalendarIcon, Tag } from "lucide-react";
|
5 |
import { Calendar } from "@/components/ui/calendar";
|
6 |
-
import { parseISO, format, isValid, isSameMonth, isSameYear, isSameDay } from "date-fns";
|
7 |
import { Toggle } from "@/components/ui/toggle";
|
8 |
import Header from "@/components/Header";
|
9 |
import FilterBar from "@/components/FilterBar";
|
@@ -173,13 +173,6 @@ const CalendarPage = () => {
|
|
173 |
// Add these helper functions at the top of the file
|
174 |
const isEndOfWeek = (date: Date) => date.getDay() === 6; // Saturday
|
175 |
const isStartOfWeek = (date: Date) => date.getDay() === 0; // Sunday
|
176 |
-
const isSameWeek = (date1: Date, date2: Date) => {
|
177 |
-
const diff = Math.abs(date1.getTime() - date2.getTime());
|
178 |
-
const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
|
179 |
-
return diffDays <= 6 &&
|
180 |
-
Math.floor(date1.getTime() / (1000 * 60 * 60 * 24 * 7)) ===
|
181 |
-
Math.floor(date2.getTime() / (1000 * 60 * 60 * 24 * 7));
|
182 |
-
};
|
183 |
|
184 |
// Update the getConferenceLineStyle function
|
185 |
const getConferenceLineStyle = (date: Date) => {
|
@@ -190,26 +183,23 @@ const CalendarPage = () => {
|
|
190 |
const endDate = safeParseISO(conf.end);
|
191 |
|
192 |
if (startDate && endDate && date >= startDate && date <= endDate) {
|
193 |
-
|
194 |
-
const isLast = isSameDay(date, endDate);
|
195 |
-
|
196 |
-
// Check if previous and next days are part of the same conference and week
|
197 |
const prevDate = new Date(date);
|
198 |
prevDate.setDate(date.getDate() - 1);
|
199 |
const nextDate = new Date(date);
|
200 |
nextDate.setDate(date.getDate() + 1);
|
201 |
|
202 |
-
const hasPrevDay = prevDate >= startDate
|
203 |
-
const hasNextDay = nextDate <= endDate
|
204 |
|
205 |
-
let lineStyle = "h-1
|
206 |
|
207 |
if (hasPrevDay && hasNextDay) {
|
208 |
// Middle of a sequence
|
209 |
lineStyle += " w-[calc(100%+1rem)] -left-2";
|
210 |
} else if (hasPrevDay) {
|
211 |
// End of a sequence
|
212 |
-
lineStyle += " w-[calc(100%+0.5rem)] left-
|
213 |
} else if (hasNextDay) {
|
214 |
// Start of a sequence
|
215 |
lineStyle += " w-[calc(100%+0.5rem)] right-0";
|
@@ -241,7 +231,6 @@ const CalendarPage = () => {
|
|
241 |
|
242 |
// Get deadline style
|
243 |
const hasDeadline = dayEvents.deadlines.length > 0;
|
244 |
-
const deadlineStyle = hasDeadline ? "h-1 w-full bg-red-500" : "";
|
245 |
|
246 |
return (
|
247 |
<div className="relative w-full h-full flex flex-col items-center">
|
@@ -251,19 +240,21 @@ const CalendarPage = () => {
|
|
251 |
</div>
|
252 |
|
253 |
{/* Event indicator lines at the bottom */}
|
254 |
-
<div className="absolute bottom-0 w-full flex flex-col gap-[2px]">
|
255 |
-
{/*
|
|
|
|
|
|
|
|
|
256 |
{conferenceStyles.map((style, index) => (
|
257 |
<div
|
258 |
key={`conf-${index}`}
|
259 |
className={`${style.style} ${style.color}`}
|
260 |
/>
|
261 |
))}
|
262 |
-
{/* Deadline line */}
|
263 |
-
{deadlineStyle && <div className={deadlineStyle} />}
|
264 |
</div>
|
265 |
|
266 |
-
{/* Tooltip trigger
|
267 |
{hasEvents && (
|
268 |
<TooltipProvider>
|
269 |
<Tooltip>
|
|
|
3 |
import { Conference } from "@/types/conference";
|
4 |
import { Calendar as CalendarIcon, Tag } from "lucide-react";
|
5 |
import { Calendar } from "@/components/ui/calendar";
|
6 |
+
import { parseISO, format, isValid, isSameMonth, isSameYear, isSameDay, isSameWeek } from "date-fns";
|
7 |
import { Toggle } from "@/components/ui/toggle";
|
8 |
import Header from "@/components/Header";
|
9 |
import FilterBar from "@/components/FilterBar";
|
|
|
173 |
// Add these helper functions at the top of the file
|
174 |
const isEndOfWeek = (date: Date) => date.getDay() === 6; // Saturday
|
175 |
const isStartOfWeek = (date: Date) => date.getDay() === 0; // Sunday
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
176 |
|
177 |
// Update the getConferenceLineStyle function
|
178 |
const getConferenceLineStyle = (date: Date) => {
|
|
|
183 |
const endDate = safeParseISO(conf.end);
|
184 |
|
185 |
if (startDate && endDate && date >= startDate && date <= endDate) {
|
186 |
+
// Check if previous and next days are part of the same conference
|
|
|
|
|
|
|
187 |
const prevDate = new Date(date);
|
188 |
prevDate.setDate(date.getDate() - 1);
|
189 |
const nextDate = new Date(date);
|
190 |
nextDate.setDate(date.getDate() + 1);
|
191 |
|
192 |
+
const hasPrevDay = prevDate >= startDate;
|
193 |
+
const hasNextDay = nextDate <= endDate;
|
194 |
|
195 |
+
let lineStyle = "h-1";
|
196 |
|
197 |
if (hasPrevDay && hasNextDay) {
|
198 |
// Middle of a sequence
|
199 |
lineStyle += " w-[calc(100%+1rem)] -left-2";
|
200 |
} else if (hasPrevDay) {
|
201 |
// End of a sequence
|
202 |
+
lineStyle += " w-[calc(100%+0.5rem)] -left-2";
|
203 |
} else if (hasNextDay) {
|
204 |
// Start of a sequence
|
205 |
lineStyle += " w-[calc(100%+0.5rem)] right-0";
|
|
|
231 |
|
232 |
// Get deadline style
|
233 |
const hasDeadline = dayEvents.deadlines.length > 0;
|
|
|
234 |
|
235 |
return (
|
236 |
<div className="relative w-full h-full flex flex-col items-center">
|
|
|
240 |
</div>
|
241 |
|
242 |
{/* Event indicator lines at the bottom */}
|
243 |
+
<div className="absolute bottom-0 w-full h-2 flex flex-col justify-end gap-[2px]">
|
244 |
+
{/* Deadline lines always on top */}
|
245 |
+
{hasDeadline && (
|
246 |
+
<div className="h-1 w-full bg-red-500" />
|
247 |
+
)}
|
248 |
+
{/* Conference lines at the bottom */}
|
249 |
{conferenceStyles.map((style, index) => (
|
250 |
<div
|
251 |
key={`conf-${index}`}
|
252 |
className={`${style.style} ${style.color}`}
|
253 |
/>
|
254 |
))}
|
|
|
|
|
255 |
</div>
|
256 |
|
257 |
+
{/* Tooltip trigger */}
|
258 |
{hasEvents && (
|
259 |
<TooltipProvider>
|
260 |
<Tooltip>
|