+ userDispatch({
+ type: 'define',
+ payload: {events, selectedDate: new Date(), month: month},
+ })
+ }
+ >
+ {getMonthName(month)}
{DaysName.map((d, i) => (
diff --git a/page/src/components/Day/Day.js b/page/src/components/Day/Day.js
index 48c0de052d..083b5302e2 100644
--- a/page/src/components/Day/Day.js
+++ b/page/src/components/Day/Day.js
@@ -3,16 +3,15 @@ import {useCustomContext} from 'app.context';
const Day = ({date, events}) => {
const userDispatch = useCustomContext().userDispatch;
- let invisible = date?.getDate() ? '' : ' invisible';
- let intensity = events?.length ?? 0;
-
- if (intensity > 10) intensity = 10;
- intensity = ` intensity-${intensity}`;
+ const invisible = date?.getDate() ? '' : ' invisible';
+ const intensity = ` intensity-${Math.min(events?.length ?? 0, 10)}`;
return (
userDispatch({type: 'define', payload: {events, selectedDate: date}})}
+ onClick={() =>
+ userDispatch({type: 'define', payload: {events, selectedDate: date, month: false}})
+ }
>
{date?.getDate() || ''}
diff --git a/page/src/components/EventDisplay/EventDisplay.js b/page/src/components/EventDisplay/EventDisplay.js
index 494984c38b..797b7178d0 100644
--- a/page/src/components/EventDisplay/EventDisplay.js
+++ b/page/src/components/EventDisplay/EventDisplay.js
@@ -1,12 +1,16 @@
import 'styles/EventDisplay.css';
+import {formatEventDates} from './EventDisplay.utils';
-const EventDisplay = ({name, hyperlink, location, misc}) => {
+const EventDisplay = ({name, hyperlink, location, misc, date}) => {
return (
);
};
diff --git a/page/src/components/EventDisplay/EventDisplay.utils.js b/page/src/components/EventDisplay/EventDisplay.utils.js
new file mode 100644
index 0000000000..8c1a120576
--- /dev/null
+++ b/page/src/components/EventDisplay/EventDisplay.utils.js
@@ -0,0 +1,3 @@
+import {formatDate} from 'utils';
+
+export const formatEventDates = dates => [...dates].map(d => formatDate(new Date(d))).join(' -> ');
diff --git a/page/src/components/SelectedEvents/SelectedEvents.js b/page/src/components/SelectedEvents/SelectedEvents.js
index 106c6b8283..ffc5b93a19 100644
--- a/page/src/components/SelectedEvents/SelectedEvents.js
+++ b/page/src/components/SelectedEvents/SelectedEvents.js
@@ -2,9 +2,9 @@ import {useMemo, useRef, useState} from 'react';
import 'styles/SelectedEvents.css';
import EventDisplay from '../EventDisplay/EventDisplay';
-import {formatDate} from './SelectedEvents.utils';
+import {formatDate, getMonthName} from '../../utils';
-const SelectedEvents = ({events, date}) => {
+const SelectedEvents = ({events, date, month}) => {
const [evnts, setEvnts] = useState(null);
const scrollToRef = useRef();
@@ -24,7 +24,7 @@ const SelectedEvents = ({events, date}) => {
{date ? (
<>
- {formatDate(date)}
+ {getMonthName(month) || formatDate(date)}
{evnts}
>
diff --git a/page/src/components/SelectedEvents/SelectedEvents.utils.js b/page/src/components/SelectedEvents/SelectedEvents.utils.js
deleted file mode 100644
index ec53e216cd..0000000000
--- a/page/src/components/SelectedEvents/SelectedEvents.utils.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const lpad2 = number => ('0' + number).slice(-2);
-
-export const formatDate = date =>
- date.getFullYear() + '-' + lpad2(date.getMonth() + 1) + '-' + lpad2(date.getDate());
diff --git a/page/src/styles/Calendar.css b/page/src/styles/Calendar.css
index 6db7adf56a..614e7d14d6 100644
--- a/page/src/styles/Calendar.css
+++ b/page/src/styles/Calendar.css
@@ -1,5 +1,8 @@
.header {
text-align: center;
+ cursor: pointer;
+ font-weight: bold;
+ text-decoration: underline;
}
.dayList {
diff --git a/page/src/styles/EventDisplay.css b/page/src/styles/EventDisplay.css
index 28e6a34cb4..63f4ff501a 100644
--- a/page/src/styles/EventDisplay.css
+++ b/page/src/styles/EventDisplay.css
@@ -6,3 +6,17 @@
flex-direction: column;
border: 1px solid #ccc;
}
+
+.eventCell .content {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+}
+
+.eventCell a {
+ color: blue;
+}
+
+.eventCell .when {
+ font-size: 0.8em;
+}
diff --git a/page/src/utils.js b/page/src/utils.js
index 256074656c..4133729d6b 100644
--- a/page/src/utils.js
+++ b/page/src/utils.js
@@ -26,3 +26,24 @@ export const exportYear = selectedYear => {
link.download = `developer-conference-${selectedYear}.ics`;
link.click();
};
+
+const lpad2 = number => ('0' + number).slice(-2);
+
+export const formatDate = date =>
+ date.getFullYear() + '-' + lpad2(date.getMonth() + 1) + '-' + lpad2(date.getDate());
+
+export const getMonthName = month =>
+ [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December',
+ ][month];