wip: tz field

api/db/migrations/20241006214917_add_timezone_to_events/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Event" ADD COLUMN     "timezone" TEXT NOT NULL DEFAULT 'UTC';

api/db/schema.prisma

@@ -20,10 +20,10 @@ model Event {
   confirmed  Boolean @default(false)
   visible    Boolean @default(false)
 
-  slug          String   @unique
-  title         String
-  description   String
-  start         DateTime
-  end           DateTime
-  utcOffsetMins Int      @default(0)
+  slug        String   @unique
+  title       String
+  description String
+  start       DateTime
+  end         DateTime
+  timezone    String   @default("UTC")
 }

api/src/graphql/events.sdl.ts

@@ -14,6 +14,7 @@ export const schema = gql`
     start: DateTime!
     end: DateTime!
     utcOffsetMins: Int!
+    timezone: String!
   }
 
   type PublicEvent {
@@ -22,7 +23,7 @@ export const schema = gql`
     description: String!
     start: DateTime!
     end: DateTime!
-    utcOffsetMins: Int!
+    timezone: String!
   }
 
   type Query {
@@ -43,6 +44,7 @@ export const schema = gql`
     description: String
     start: DateTime
     end: DateTime
+    timezone: String
   }
 
   type Mutation {

api/src/services/events/ogImage.ts

@@ -222,14 +222,17 @@ async function renderImage(
 export async function renderEventPreview(event: {
   start: string | Date
   end: string | Date
+  utcOffsetMins: number
   title: string
   description: string
 }): Promise<Uint8Array> {
   const s = dayjs(event.start)
   const e = dayjs(event.end)
+  s.add(event.utcOffsetMins, 'minute')
+  e.add(event.utcOffsetMins, 'minute')
+
   const month = s.format('MMM')
   const day = s.format('D')
-  // TODO: store event timezone
   let time = s.format('H:mm z')
   if (s.isSame(e, 'day')) time = `${s.format('H:mm')}-${e.format('H:mm z')}`
 

web/src/components/EditEventForm/EditEventForm.tsx

@@ -24,7 +24,7 @@ import { useMutation } from '@redwoodjs/web'
 import { fqUrlForPath } from 'src/apiLib/url'
 import { checkVisibility } from 'src/apiLib/visibility'
 import FormField from 'src/components/FormField/FormField'
-import { toLocal, toUTC, tzPretty } from 'src/convert/date'
+import { toLocal, toUTC } from 'src/convert/date'
 import { fieldAttrs, formErrorAttrs } from 'src/styles/classes'
 
 import { QUERY } from '../EditEventCell'
@@ -45,6 +45,7 @@ type Event = {
   description: string
   start: string
   end: string
+  timezone: string
 }
 
 type EventWithTokens = Event & {
@@ -61,6 +62,7 @@ const UPDATE_EVENT = gql`
       description
       start
       end
+      timezone
     }
   }
 `
@@ -165,17 +167,34 @@ const EditEventForm = (props: Props) => {
           />
         </FormField>
 
+        <Controller
+          control={formMethods.control}
+          name="timezone"
+          render={({ field }) => (
+            <label className="label" htmlFor="timezone">
+              Time zone
+              <br />
+              <div className="control">
+                <input
+                  id="timezone"
+                  className="input"
+                  type="datetime-local"
+                  disabled={loading}
+                  {...field}
+                />
+              </div>
+              <FieldError name="timezone" className="error has-text-danger" />
+            </label>
+          )}
+        />
+
         <Controller
           control={formMethods.control}
           name="start"
           render={({ field }) => (
             <label className="label" htmlFor="start">
               Start
               <br />
-              <Typ x="labelDetails">
-                Start/end times are in your local timezone,{' '}
-                <strong>{tzPretty}</strong>
-              </Typ>
               <div className="control">
                 <input
                   id="start"

web/src/convert/tz.ts

@@ -22,3 +22,8 @@ export function tzToOffsetMins(timeZone: string, when = new Date()): number {
 
   return result
 }
+
+/** List all supported timezones. */
+export function listTimeZones(): string[] {
+  return Intl.supportedValuesOf('timeZone')
+}