From 687369638d0a099a33fbeba51fb1f6a656633cff Mon Sep 17 00:00:00 2001 From: Kevin Matthews Date: Wed, 20 Nov 2024 19:05:50 -0800 Subject: [PATCH 1/5] Create custom eventContent for schedule calendar --- .../components/Schedule/CalendarView.jsx | 48 ++++++++++++++++++- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/app/webpacker/components/Schedule/CalendarView.jsx b/app/webpacker/components/Schedule/CalendarView.jsx index 4338523bad..49d98f331a 100644 --- a/app/webpacker/components/Schedule/CalendarView.jsx +++ b/app/webpacker/components/Schedule/CalendarView.jsx @@ -1,7 +1,7 @@ -import luxonPlugin from '@fullcalendar/luxon3'; +import luxonPlugin, { toLuxonDateTime } from '@fullcalendar/luxon3'; import FullCalendar from '@fullcalendar/react'; import timeGridPlugin from '@fullcalendar/timegrid'; -import { DateTime } from 'luxon'; +import { DateTime, Interval } from 'luxon'; import React from 'react'; import { earliestTimeOfDayWithBuffer, @@ -92,6 +92,10 @@ export default function CalendarView({ locale={calendarLocale} timeZone={timeZone} events={fcActivities} + // custom rendering of event content + eventContent={(args) => ( + + )} /> {fcActivities.length === 0 && ( {I18n.t('competitions.schedule.no_activities')} @@ -99,3 +103,43 @@ export default function CalendarView({ ); } + +// TODO: check events crossing midnight +function CalendarEventView({ event, timeText, view }) { + const startLuxon = toLuxonDateTime(event.start, view.calendar); + const endLuxon = toLuxonDateTime(event.end, view.calendar); + const interval = Interval.fromDateTimes(startLuxon, endLuxon); + const lengthInMin = interval.length('minutes'); + + return ( +
+ {lengthInMin < 15 && ( +
+ {timeText} - {event.title} +
+ )} + {15 <= lengthInMin && lengthInMin < 20 && ( +
+ {timeText} - {event.title} +
+ )} + {20 <= lengthInMin && lengthInMin < 25 && ( +
+ {timeText} - {event.title} +
+ )} + {25 <= lengthInMin && lengthInMin < 30 && ( +
+
{timeText}
+
{event.title}
+
+ )} + {30 <= lengthInMin && ( +
+
{timeText}
+
{event.title}
+
+ )} +
+ ); +} \ No newline at end of file From 9dee956bf1bbbb11ae7ae47bea139f9456eda427 Mon Sep 17 00:00:00 2001 From: Kevin Matthews Date: Wed, 20 Nov 2024 19:13:51 -0800 Subject: [PATCH 2/5] Clean up and de-duplicate code --- .../components/Schedule/CalendarView.jsx | 66 +++++++++++-------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/app/webpacker/components/Schedule/CalendarView.jsx b/app/webpacker/components/Schedule/CalendarView.jsx index 49d98f331a..cf73e07a46 100644 --- a/app/webpacker/components/Schedule/CalendarView.jsx +++ b/app/webpacker/components/Schedule/CalendarView.jsx @@ -104,42 +104,52 @@ export default function CalendarView({ ); } -// TODO: check events crossing midnight function CalendarEventView({ event, timeText, view }) { const startLuxon = toLuxonDateTime(event.start, view.calendar); const endLuxon = toLuxonDateTime(event.end, view.calendar); const interval = Interval.fromDateTimes(startLuxon, endLuxon); const lengthInMin = interval.length('minutes'); + const style = getEventStyle(lengthInMin); + return (
- {lengthInMin < 15 && ( -
- {timeText} - {event.title} -
- )} - {15 <= lengthInMin && lengthInMin < 20 && ( -
- {timeText} - {event.title} -
- )} - {20 <= lengthInMin && lengthInMin < 25 && ( -
- {timeText} - {event.title} -
- )} - {25 <= lengthInMin && lengthInMin < 30 && ( -
-
{timeText}
-
{event.title}
-
- )} - {30 <= lengthInMin && ( -
-
{timeText}
-
{event.title}
-
- )} +
+ +
); +} + +function InnerEventContent({ lengthInMin, timeText, title }) { + if (lengthInMin < 25) { + return ( + <>{timeText} - {title} + ); + } else { + return ( + <> +
{timeText}
+
{title}
+ + ); + } +} + +function getEventStyle(lengthInMin) { + if (lengthInMin < 15) { + return { whiteSpace: 'nowrap', fontSize: '80%', lineHeight: '1.2em' }; + } else if (lengthInMin < 20) { + return { whiteSpace: 'nowrap', fontSize: '90%' }; + } else if (lengthInMin < 25) { + return { whiteSpace: 'nowrap' }; + } else if (lengthInMin < 30) { + return { lineHeight: '1.4em' }; + } else { + return {}; + } } \ No newline at end of file From fa212a90e18644d2ea3868b41a346aae5679cbfc Mon Sep 17 00:00:00 2001 From: Kevin Matthews Date: Wed, 20 Nov 2024 19:20:12 -0800 Subject: [PATCH 3/5] More deduplication --- .../components/Schedule/CalendarView.jsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/app/webpacker/components/Schedule/CalendarView.jsx b/app/webpacker/components/Schedule/CalendarView.jsx index cf73e07a46..b94cc387c6 100644 --- a/app/webpacker/components/Schedule/CalendarView.jsx +++ b/app/webpacker/components/Schedule/CalendarView.jsx @@ -113,14 +113,12 @@ function CalendarEventView({ event, timeText, view }) { const style = getEventStyle(lengthInMin); return ( -
-
- -
+
+
); } @@ -142,14 +140,14 @@ function InnerEventContent({ lengthInMin, timeText, title }) { function getEventStyle(lengthInMin) { if (lengthInMin < 15) { - return { whiteSpace: 'nowrap', fontSize: '80%', lineHeight: '1.2em' }; + return { overflow: 'hidden', whiteSpace: 'nowrap', fontSize: '80%', lineHeight: '1.2em' }; } else if (lengthInMin < 20) { - return { whiteSpace: 'nowrap', fontSize: '90%' }; + return { overflow: 'hidden', whiteSpace: 'nowrap', fontSize: '90%' }; } else if (lengthInMin < 25) { - return { whiteSpace: 'nowrap' }; + return { overflow: 'hidden', whiteSpace: 'nowrap' }; } else if (lengthInMin < 30) { - return { lineHeight: '1.4em' }; + return { overflow: 'hidden', lineHeight: '1.4em' }; } else { - return {}; + return { overflow: 'hidden' }; } } \ No newline at end of file From d6f24820121c987163ec7c79a24ed33ace2a29be Mon Sep 17 00:00:00 2001 From: Kevin Matthews Date: Wed, 20 Nov 2024 19:22:02 -0800 Subject: [PATCH 4/5] Adjust onlyOneLine arg --- app/webpacker/components/Schedule/CalendarView.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/webpacker/components/Schedule/CalendarView.jsx b/app/webpacker/components/Schedule/CalendarView.jsx index b94cc387c6..b2058ebd13 100644 --- a/app/webpacker/components/Schedule/CalendarView.jsx +++ b/app/webpacker/components/Schedule/CalendarView.jsx @@ -115,7 +115,7 @@ function CalendarEventView({ event, timeText, view }) { return (
@@ -123,8 +123,8 @@ function CalendarEventView({ event, timeText, view }) { ); } -function InnerEventContent({ lengthInMin, timeText, title }) { - if (lengthInMin < 25) { +function InnerEventContent({ onlyOneLine, timeText, title }) { + if (onlyOneLine) { return ( <>{timeText} - {title} ); From 742a2877eefa7324fa43d507557d047535feba7d Mon Sep 17 00:00:00 2001 From: Kevin Matthews Date: Wed, 20 Nov 2024 19:24:13 -0800 Subject: [PATCH 5/5] Adjust style for 15min events --- app/webpacker/components/Schedule/CalendarView.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/webpacker/components/Schedule/CalendarView.jsx b/app/webpacker/components/Schedule/CalendarView.jsx index b2058ebd13..f6faba5132 100644 --- a/app/webpacker/components/Schedule/CalendarView.jsx +++ b/app/webpacker/components/Schedule/CalendarView.jsx @@ -140,9 +140,9 @@ function InnerEventContent({ onlyOneLine, timeText, title }) { function getEventStyle(lengthInMin) { if (lengthInMin < 15) { - return { overflow: 'hidden', whiteSpace: 'nowrap', fontSize: '80%', lineHeight: '1.2em' }; + return { overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: '1.2em', fontSize: '80%' }; } else if (lengthInMin < 20) { - return { overflow: 'hidden', whiteSpace: 'nowrap', fontSize: '90%' }; + return { overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: '1.5em' }; } else if (lengthInMin < 25) { return { overflow: 'hidden', whiteSpace: 'nowrap' }; } else if (lengthInMin < 30) {