Events Page: Added option to override browser time format and style (#5538)

* use12hour optional config

* use12hour config arg

* added use12HourFormat arg to format function

* dateStyle & timeStyle option

* moved timezone & locales to format function

* added dateStyle & timeStyle

* re-formatted

* added strftime_fmt config entry

* strftime package

* added strftime option

* underscore instead of camelCase

* underscore props instead of camelCase

web/src/routes/Events.jsx

@@ -287,9 +287,6 @@ export default function Events({ path, ...props }) {
     return <ActivityIndicator />;
   }
 
-  const timezone = config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const locale = window.navigator?.language || 'en-US';
-
   return (
     <div className="space-y-4 p-2 px-4 w-full">
       <Heading>Events</Heading>
@@ -508,7 +505,7 @@ export default function Events({ path, ...props }) {
                         </div>
                         <div className="text-sm flex">
                           <Clock className="h-5 w-5 mr-2 inline" />
-                          {formatUnixTimestampToDateTime(event.start_time, locale, timezone)}
+                          {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })}
                           <div className="hidden md:inline">
                             <span className="m-1">-</span>
                             <TimeAgo time={event.start_time * 1000} dense />

web/src/utils/dateUtil.ts

@@ -1,7 +1,8 @@
+import strftime from 'strftime';
+import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
 export const longToDate = (long: number): Date => new Date(long * 1000);
 export const epochToLong = (date: number): number => date / 1000;
 export const dateToLong = (date: Date): number => epochToLong(date.getTime());
-import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
 
 const getDateTimeYesterday = (dateTime: Date): Date => {
   const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
@@ -17,28 +18,53 @@ export const getNowYesterdayInLong = (): number => {
 };
 
 /**
- * This function takes in a unix timestamp, locale, timezone,
- * and returns a dateTime string.
- * If unixTimestamp is not provided, it returns 'Invalid time'
- * @param unixTimestamp: number
- * @param locale: string
- * @param timezone: string
- * @returns string - dateTime or 'Invalid time' if unixTimestamp is not provided
+ * This function takes in a Unix timestamp, configuration options for date/time display, and an optional strftime format string,
+ * and returns a formatted date/time string.
+ *
+ * If the Unix timestamp is not provided, it returns "Invalid time".
+ *
+ * The configuration options determine how the date and time are formatted.
+ * The `timezone` option allows you to specify a specific timezone for the output, otherwise the user's browser timezone will be used.
+ * The `use12hour` option allows you to display time in a 12-hour format if true, and 24-hour format if false.
+ * The `dateStyle` and `timeStyle` options allow you to specify pre-defined formats for displaying the date and time.
+ * The `strftime_fmt` option allows you to specify a custom format using the strftime syntax.
+ *
+ * If both `strftime_fmt` and `dateStyle`/`timeStyle` are provided, `strftime_fmt` takes precedence.
+ *
+ * @param unixTimestamp The Unix timestamp to format
+ * @param config An object containing the configuration options for date/time display
+ * @returns The formatted date/time string, or "Invalid time" if the Unix timestamp is not provided or invalid.
  */
-export const formatUnixTimestampToDateTime = (unixTimestamp: number, locale: string, timezone: string): string => {
+interface DateTimeStyle {
+  timezone: string;
+  use12hour: boolean | undefined;
+  date_style: 'full' | 'long' | 'medium' | 'short';
+  time_style: 'full' | 'long' | 'medium' | 'short';
+  strftime_fmt: string;
+}
+
+export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: DateTimeStyle): string => {
+  const { timezone, use12hour, date_style, time_style, strftime_fmt } = config;
+  const locale = window.navigator?.language || 'en-US';
+
   if (isNaN(unixTimestamp)) {
     return 'Invalid time';
   }
   try {
     const date = new Date(unixTimestamp * 1000);
+
+    // use strftime_fmt if defined in config file
+    if (strftime_fmt) {
+      const strftime_locale = strftime.localizeByIdentifier(locale);
+      return strftime_locale(strftime_fmt, date);
+    }
+
+    // else use Intl.DateTimeFormat
     const formatter = new Intl.DateTimeFormat(locale, {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      timeZone: timezone,
+      dateStyle: date_style,
+      timeStyle: time_style,
+      timeZone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+      hour12: use12hour !== null ? use12hour : undefined,
     });
     return formatter.format(date);
   } catch (error) {