diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
index 21da2c54..bb0225cc 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
@@ -52,7 +52,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
},
];
- const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss');
+ const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'pp');
const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index 6082f0e2..6663a563 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -10,6 +10,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
const { dateLocale } = useLocale();
const { labels, formatMessage } = useMessages();
+ const { weekStartsOn } = dateLocale.options;
+ const daysOfWeek = Array(7)
+ .fill(weekStartsOn)
+ .map((d, i) => (d + i) % 7);
const [, max] = data
? data.reduce((arr: number[], hours: number[], index: number) => {
@@ -40,7 +44,9 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
{Array(24)
.fill(null)
.map((_, i) => {
- const label = format(addHours(startOfDay(new Date()), i), 'haaa');
+ const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale })
+ .replace(/\D00 ?/, '')
+ .toLowerCase();
return (
{label}
@@ -48,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
);
})}
- {data?.map((day: number[], index: number) => {
- return (
-
-
- {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+ {data &&
+ daysOfWeek.map((index: number) => {
+ const day = data[index];
+ return (
+
+
+ {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+
+ {day?.map((hour: number) => {
+ const pct = hour / max;
+ return (
+
+ {hour > 0 && (
+
+
+
+ )}
+
+ );
+ })}
- {day?.map((hour: number, n) => {
- const pct = hour / max;
- return (
-
- {hour > 0 && (
-
-
-
- )}
-
- );
- })}
-
- );
- })}
+ );
+ })}
);
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index 0a020d5c..a59d3a92 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -34,7 +34,7 @@ export function SessionActivity({
return (
{showHeader && (
- {formatTimezoneDate(createdAt, 'EEEE, PPP')}
+ {formatTimezoneDate(createdAt, 'PPPP')}
)}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
index 889eb972..3ce78d48 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
{formatMessage(labels.lastSeen)}
- {formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}
+ {formatTimezoneDate(data?.lastAt, 'PPPPpp')}
{formatMessage(labels.firstSeen)}
- {formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}
+ {formatTimezoneDate(data?.firstAt, 'PPPPpp')}
{formatMessage(labels.country)}
diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts
index 5f01c2ab..364e3939 100644
--- a/src/components/hooks/useTimezone.ts
+++ b/src/components/hooks/useTimezone.ts
@@ -1,12 +1,14 @@
import { setItem } from '@/lib/storage';
import { TIMEZONE_CONFIG } from '@/lib/constants';
import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
-import useStore, { setTimezone } from '@/store/app';
+import useStore, { setTimezone } from 'store/app';
+import useLocale from './useLocale';
const selector = (state: { timezone: string }) => state.timezone;
export function useTimezone() {
const timezone = useStore(selector);
+ const { dateLocale } = useLocale();
const saveTimezone = (value: string) => {
setItem(TIMEZONE_CONFIG, value);
@@ -20,6 +22,7 @@ export function useTimezone() {
: date.split(' ').join('T') + 'Z',
timezone,
pattern,
+ { locale: dateLocale },
);
};