Workaround for chromium Calcutta/Kolkata timezone bug

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;
+};

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> = (props) => {
 		formState: { errors }
 	} = useForm<CreateEventPayload>({
 		defaultValues: {
-			timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+			timeZone: getCurrentTimeZone(),
 			startDate: startOfDay(new Date()),
 			endDate: endOfDay(new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3))
 		},

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<EventListItemProps> = (props) => {
 	const { event } = props;
+	const currentTimeZone = getCurrentTimeZone();
 
 	return (
 		<div>
@@ -22,26 +25,18 @@ export const EventListItem: React.FC<EventListItemProps> = (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'
 									)}.`}
 								>
 									<span className="block text-center text-tiny text-gray-600">
-										{formatInTimeZone(
-											new Date(event.startDate),
-											Intl.DateTimeFormat().resolvedOptions().timeZone,
-											'MMM dd'
-										)}
+										{formatInTimeZone(new Date(event.startDate), currentTimeZone, 'MMM dd')}
 										<br />
-										{formatInTimeZone(
-											new Date(event.endDate),
-											Intl.DateTimeFormat().resolvedOptions().timeZone,
-											'MMM dd'
-										)}
+										{formatInTimeZone(new Date(event.endDate), currentTimeZone, 'MMM dd')}
 									</span>
 								</Tooltip>
 							</div>

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 ? (
 		<em className="mt-1 block text-sm text-gray-500">
 			The true date will be {formatInTimeZone(date, timeZone, 'MM/dd/yyyy h:mm a')} in the events
 			timezone.