Added end dates to event description card and mini event card
This commit is contained in:
parent
ae3e1e25a3
commit
71d1775936
|
@ -14,6 +14,7 @@ interface Props {
|
|||
online: boolean;
|
||||
location: string;
|
||||
date: Date;
|
||||
endDate?: Date;
|
||||
poster?: string;
|
||||
registerLink?: string;
|
||||
permaLink: string;
|
||||
|
@ -38,6 +39,7 @@ export function EventDescriptionCard({
|
|||
online,
|
||||
registerLink,
|
||||
permaLink,
|
||||
endDate,
|
||||
}: Props) {
|
||||
const Icon = getIcon(location);
|
||||
|
||||
|
@ -48,7 +50,12 @@ export function EventDescriptionCard({
|
|||
<div className={styles.details}>
|
||||
<h1 className={styles.name}>{name}</h1>
|
||||
<h2 className={styles.setting}>
|
||||
<EventSetting date={date} online={online} location={location} />
|
||||
<EventSetting
|
||||
date={date}
|
||||
endDate={endDate}
|
||||
online={online}
|
||||
location={location}
|
||||
/>
|
||||
</h2>
|
||||
<p className={styles.desc}>{short}</p>
|
||||
<Link href={permaLink}>Learn more</Link>
|
||||
|
|
|
@ -15,22 +15,25 @@ export function EventSetting(props: Props) {
|
|||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
const time = props.date.toLocaleTimeString("en-US", {
|
||||
let time = props.date.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
timeZoneName: "short",
|
||||
});
|
||||
time = time.substring(0, time.length - 3); // remove the time zone tag (eg PDT) from the start date
|
||||
|
||||
const endDate = props.endDate?.toLocaleDateString("en-US", {
|
||||
const endDate =
|
||||
props.endDate?.toLocaleDateString("en-US", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
const endTime = props.endDate?.toLocaleTimeString("en-US", {
|
||||
}) ?? "";
|
||||
const endTime =
|
||||
props.endDate?.toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
timeZoneName: "short",
|
||||
});
|
||||
}) ?? "";
|
||||
|
||||
const location = props.online ? `Online - ${props.location}` : props.location;
|
||||
const separator = <span className={styles.separator}> | </span>;
|
||||
|
|
|
@ -28,6 +28,7 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
|
|||
year,
|
||||
term,
|
||||
slug,
|
||||
endDate,
|
||||
}) => {
|
||||
return (
|
||||
<details className={styles.card}>
|
||||
|
@ -38,7 +39,12 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
|
|||
<div className={styles.nameSpacer}></div>
|
||||
</h2>
|
||||
<div className={styles.info}>
|
||||
<EventSetting date={date} location={location} online={online} />
|
||||
<EventSetting
|
||||
date={date}
|
||||
endDate={endDate}
|
||||
location={location}
|
||||
online={online}
|
||||
/>
|
||||
</div>
|
||||
<p className={styles.shortDescription}>{short}</p>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue