nielsr HF staff commited on
Commit
156ac8e
·
1 Parent(s): 0c2b271

Stack lines on top of each other

Browse files
Files changed (1) hide show
  1. 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
- const isFirst = isSameDay(date, startDate);
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 && isSameWeek(date, prevDate);
203
- const hasNextDay = nextDate <= endDate && isSameWeek(date, nextDate);
204
 
205
- let lineStyle = "h-1 absolute bottom-0";
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-0";
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
- {/* Conference lines */}
 
 
 
 
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 covering the whole cell */}
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>