84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import React from "react";
|
|
|
|
import styles from "./EventSetting.module.css";
|
|
|
|
interface Props {
|
|
date: Date;
|
|
endDate?: Date;
|
|
online: boolean;
|
|
location: string;
|
|
}
|
|
|
|
export function EventSetting(props: Props) {
|
|
const date = props.date.toLocaleDateString("en-US", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
});
|
|
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", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric",
|
|
}) ?? "";
|
|
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>;
|
|
let dateDisplay;
|
|
|
|
if (!endDate) {
|
|
dateDisplay = (
|
|
<>
|
|
<time dateTime={props.date.toISOString()}>{date}</time>
|
|
{separator}
|
|
<span>{time}</span>
|
|
</>
|
|
);
|
|
} else {
|
|
if (date != endDate) {
|
|
// multiday event
|
|
dateDisplay = (
|
|
<span>
|
|
<time dateTime={props.date.toISOString()}>{date}</time>
|
|
<span> - {time} to </span>
|
|
<time dateTime={props.date.toISOString()}>{endDate}</time>
|
|
<span> - {endTime}</span>
|
|
</span>
|
|
);
|
|
} else {
|
|
// same day event
|
|
dateDisplay = (
|
|
<>
|
|
<time dateTime={props.date.toISOString()}>{date}</time>
|
|
{separator}
|
|
<span>
|
|
{time} - {endTime}
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{dateDisplay}
|
|
{separator}
|
|
{location}
|
|
{separator}
|
|
</div>
|
|
);
|
|
}
|