diff --git a/components/calendar/event-modal.tsx b/components/calendar/event-modal.tsx index e5e31a36..7f369a33 100644 --- a/components/calendar/event-modal.tsx +++ b/components/calendar/event-modal.tsx @@ -21,6 +21,7 @@ import { import { PluginSlot } from "@/components/plugins/plugin-slot"; import { useSettingsStore } from "@/stores/settings-store"; import { generateUUID } from "@/lib/utils"; +import { useFormatEventDate } from "@/hooks/use-format-event-date"; export interface PendingEventPreview { start: Date; @@ -130,15 +131,7 @@ export function EventModal({ const timeFormat = useSettingsStore((s) => s.timeFormat); const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm"; const isEdit = !!event; - - const formatEventDate = useCallback((startD: Date): string => { - const dayOfWeek = format(startD, "EEE").toLowerCase(); - const month = format(startD, "MMM").toLowerCase(); - const day = format(startD, "d"); - const year = format(startD, "yyyy"); - return `${t(`days.${dayOfWeek}`)}, ${t(`months.${month}`)} ${day}, ${year}`; - }, [t]); - + const formatEventDate = useFormatEventDate(); const [mode, setMode] = useState<"view" | "edit">(isEdit ? "view" : "edit"); const userIsOrganizer = useMemo(() => { diff --git a/hooks/use-format-event-date.ts b/hooks/use-format-event-date.ts new file mode 100644 index 00000000..137f1b39 --- /dev/null +++ b/hooks/use-format-event-date.ts @@ -0,0 +1,27 @@ +import { useCallback } from "react"; +import { useTranslations } from "next-intl"; +import { format } from "date-fns"; + +/** + * Returns a memoized function that formats a calendar event date + * using the current locale for day and month names. + * + * The string will be in the format: "EEE, MMM d, yyyy" + * + * For example: "Wed, Apr 29, 2026" (en) + * "Qua, Abr 29, 2026" (pt) + */ +export function useFormatEventDate(): (date: Date) => string { + const t = useTranslations("calendar"); + + return useCallback( + (date: Date): string => { + const dayOfWeek = format(date, "EEE").toLowerCase(); + const month = format(date, "MMM").toLowerCase(); + const day = format(date, "d"); + const year = format(date, "yyyy"); + return `${t(`days.${dayOfWeek}`)}, ${t(`months.${month}`)} ${day}, ${year}`; + }, + [t] + ); +} diff --git a/locales/en/common.json b/locales/en/common.json index d1dc60eb..49e78319 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -2284,7 +2284,7 @@ "sep": "Sep", "oct": "Oct", "nov": "Nov", - "dec": "Dez" + "dec": "Dec" }, "notifications": { "event_created": "Event created", @@ -2763,4 +2763,4 @@ "unified_mailbox": { "search_unavailable": "Search is not available in the unified view" } -} \ No newline at end of file +} diff --git a/locales/fr/common.json b/locales/fr/common.json index 289aed51..d937152a 100644 --- a/locales/fr/common.json +++ b/locales/fr/common.json @@ -2752,4 +2752,4 @@ "custom": "Personnalisé" } } -} \ No newline at end of file +} diff --git a/locales/pt/common.json b/locales/pt/common.json index e75aae52..c47796ba 100644 --- a/locales/pt/common.json +++ b/locales/pt/common.json @@ -2752,4 +2752,4 @@ "custom": "Personalizado" } } -} \ No newline at end of file +}