diff --git a/shared/utils/date.ts b/shared/utils/date.ts index cf682f8c..21f49f71 100644 --- a/shared/utils/date.ts +++ b/shared/utils/date.ts @@ -32,3 +32,13 @@ export const formatDateRange = (start: Date, end: Date, args: FormatDateRangeArg showHour ? dayjs(startDate).format(', h:mm a') : '' } - ${dayjs(endDate).format('MMM Do')}${showHour ? dayjs(endDate).format(', h:mm a') : ''}`; }; + +export const getCurrentTimeZone = () => { + let currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; + if (currentTimeZone === 'Asia/Calcutta') { + // see: https://github.com/eventalapp/evental/pull/2 + currentTimeZone = 'Asia/Kolkata'; + } + + return currentTimeZone; +}; diff --git a/web/components/events/CreateEventForm.tsx b/web/components/events/CreateEventForm.tsx index eb8ffaad..34c9f6aa 100644 --- a/web/components/events/CreateEventForm.tsx +++ b/web/components/events/CreateEventForm.tsx @@ -5,7 +5,12 @@ import React, { DetailedHTMLProps, FormHTMLAttributes } from 'react'; import ReactDatePicker from 'react-datepicker'; import { useForm } from 'react-hook-form'; -import { CreateEventPayload, CreateEventSchema, formatDateRange } from '@eventalapp/shared/utils'; +import { + CreateEventPayload, + CreateEventSchema, + formatDateRange, + getCurrentTimeZone +} from '@eventalapp/shared/utils'; import { UseCreateEventMutationData } from '../../hooks/mutations/useCreateEvent'; import { LoadingInner } from '../error/LoadingInner'; @@ -33,7 +38,7 @@ export const CreateEventForm: React.FC = (props) => { formState: { errors } } = useForm({ defaultValues: { - timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, + timeZone: getCurrentTimeZone(), startDate: startOfDay(new Date()), endDate: endOfDay(new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3)) }, diff --git a/web/components/events/EventListItem.tsx b/web/components/events/EventListItem.tsx index 6f0443b3..006cd232 100644 --- a/web/components/events/EventListItem.tsx +++ b/web/components/events/EventListItem.tsx @@ -4,12 +4,15 @@ import Image from 'next/image'; import Link from 'next/link'; import React from 'react'; +import { getCurrentTimeZone } from '@eventalapp/shared/utils'; + import Tooltip from '../primitives/Tooltip'; type EventListItemProps = { event: Prisma.Event }; export const EventListItem: React.FC = (props) => { const { event } = props; + const currentTimeZone = getCurrentTimeZone(); return (
@@ -22,26 +25,18 @@ export const EventListItem: React.FC = (props) => { side={'top'} message={`This is event is taking place from ${formatInTimeZone( new Date(event.startDate), - Intl.DateTimeFormat().resolvedOptions().timeZone, + currentTimeZone, 'MMMM do' )} to ${formatInTimeZone( new Date(event.endDate), - Intl.DateTimeFormat().resolvedOptions().timeZone, + currentTimeZone, 'MMMM do zzz' )}.`} > - {formatInTimeZone( - new Date(event.startDate), - Intl.DateTimeFormat().resolvedOptions().timeZone, - 'MMM dd' - )} + {formatInTimeZone(new Date(event.startDate), currentTimeZone, 'MMM dd')}
- {formatInTimeZone( - new Date(event.endDate), - Intl.DateTimeFormat().resolvedOptions().timeZone, - 'MMM dd' - )} + {formatInTimeZone(new Date(event.endDate), currentTimeZone, 'MMM dd')}
diff --git a/web/components/form/TimeZoneNotice.tsx b/web/components/form/TimeZoneNotice.tsx index cb41a599..5b31c3d0 100644 --- a/web/components/form/TimeZoneNotice.tsx +++ b/web/components/form/TimeZoneNotice.tsx @@ -1,10 +1,12 @@ import { formatInTimeZone } from 'date-fns-tz'; import React from 'react'; +import { getCurrentTimeZone } from '@eventalapp/shared/utils'; + export const TimeZoneNotice: React.FC<{ date: Date; timeZone: string }> = (props) => { const { date, timeZone } = props; - return Intl.DateTimeFormat().resolvedOptions().timeZone !== timeZone ? ( + return getCurrentTimeZone() !== timeZone ? ( The true date will be {formatInTimeZone(date, timeZone, 'MM/dd/yyyy h:mm a')} in the events timezone.