Added datetime helper function

src/components/AnnouncementsPage/Announcement.js

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';
+import { getDateTime } from '../../utils/datetime_utils';
 
 const useStyles = makeStyles(theme => ({
 	subject: {
@@ -21,18 +22,15 @@ const useStyles = makeStyles(theme => ({
 
 function Announcement({ subject, timestamp, body }) {
 	const classes = useStyles();
-
-	const d = new Date(timestamp);
-	const date = d.toLocaleDateString('en-US');
-	const time = d.toLocaleTimeString('en-US');
+	const datetime = getDateTime(timestamp);
 
 	return (
 		<Container>
 			<Typography variant='h5' component='h2' className={classes.subject}>
 				{subject}
 			</Typography>
 			<Typography variant='subtitle1' className={classes.timestamp}>
-                Posted on {date} at {time} PST
+                Posted on {datetime.date} at {datetime.time} PST
 			</Typography>
 			<Typography variant='body2' className={classes.body}>
 				{body.trim()}

src/components/HomePage/Banner.js

@@ -13,7 +13,7 @@ import Button from '@material-ui/core/Button';
 
 import { useStaticQuery, graphql } from 'gatsby';
 import Img from 'gatsby-image';
-import { getTimeZoneWithFormat } from '../../utils/timezone_names.js';
+import { getTimeZoneWithFormat, getDayOfWeek } from '../../utils/datetime_utils.js';
 
 import {
 	hothStart,
@@ -192,6 +192,8 @@ function Banner() {
 		const endDay = hothEnd.getDate();
 		const eventCrossesDate = startDay !== endDay;
 		const endDayString = eventCrossesDate ? `–${endDay}` : '';
+		const eventYear = hothStart.getFullYear();
+		const eventDayOfWeek = getDayOfWeek(hothStart.getDay());
 
 		return (
 			<>
@@ -224,10 +226,9 @@ function Banner() {
 							style={{ marginBottom: 10, fontWeight: 500 }}
 							component='h3'
 						>
-							<time dateTime={hothStart.toISOString()} hidden>
-								{month} {startDay}{endDayString}, 2022
+							<b>Date: </b><time dateTime={hothStart.toISOString()} >
+								{eventDayOfWeek}, {month} {startDay}{endDayString}, {eventYear}
 							</time>
-							<b>Date:</b> Sunday, March 5, 2023
 						</Typography>
 					</Tooltip>
 				</Box>

src/components/HomePage/HomeAnnouncementBanner.js

@@ -8,6 +8,7 @@ import data from '../../data/announcements.json';
 import PropTypes from 'prop-types';
 import Collapse from '@material-ui/core/Collapse';
 import { Link } from 'gatsby';
+import { getDateTime } from '../../utils/datetime_utils';
 
 import ClearIcon from '@material-ui/icons/Clear';
 import IconButton from '@material-ui/core/IconButton';
@@ -61,9 +62,7 @@ const useStyles = makeStyles(theme => ({
 
 function HomeAnnouncement({ subject, timestamp, body }) {
 	const classes = useStyles();
-	const d = new Date(timestamp);
-	const date = d.toLocaleDateString('en-US');
-	const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+	const datetime = getDateTime(timestamp);
 
 	return (
 		<Grid container direction='column' justify='space-between'>
@@ -76,7 +75,7 @@ function HomeAnnouncement({ subject, timestamp, body }) {
 					</Grid>
 					<Grid item>
 						<Typography variant='subtitle2' className={classes.date}>
-							{date}, {time}
+							{datetime.date}, {datetime.time}
 						</Typography>
 					</Grid>
 				</Grid>

src/components/SchedulePage/StickyTimeSlot.js

@@ -7,7 +7,7 @@ import ScheduleRoundedIcon from '@material-ui/icons/ScheduleRounded';
 import Box from '@material-ui/core/Box';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import ListItem from '@material-ui/core/ListItem';
-import { getTimeZoneWithFormat } from '../../utils/timezone_names.js';
+import { getTimeZoneWithFormat } from '../../utils/datetime_utils';
 
 const useStyles = makeStyles(theme => {
 	return {

src/utils/datetime_utils.js

@@ -0,0 +1,44 @@
+/**
+ * Returns an object containing the date and time for the given timestamp.
+ * Takes the timestamp to convert to date and time as parameter.
+ * Returns an object containing the date and time as strings, or null if an error occurs.
+ */
+function getDateTime(timestamp) {
+	try {
+		const d = new Date(timestamp);
+		const date = d.toLocaleDateString('en-US');
+		const time = d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+		return { date, time };
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Returns the day of the week as a string for the given numeric day of the week.
+ * Takes the numeric day of the week (0 for Sunday, 1 for Monday, etc.) as parameter.
+ * Returns the name of the day of the week as a string, or null if an error occurs.
+ */
+function getDayOfWeek(day) {
+	try {
+		const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+		return dayOfWeek[day];
+	} catch {
+		return null;
+	}
+}
+
+// format must be 'long' or 'short'
+function getTimeZoneWithFormat(date, format) {
+	try {
+		const formatter = new Intl.DateTimeFormat('en-US', { timeZoneName: format });
+		return formatter.formatToParts(date).find(part => {
+			return part.type === 'timeZoneName';
+		}).value || '';
+	} catch {
+		return '';
+	}
+}
+
+export { getDateTime, getDayOfWeek, getTimeZoneWithFormat };
+