Phase 0.3: migrate date formatting to date-fns

frontend/src/components/calendar/AppointmentModal.tsx

@@ -21,6 +21,7 @@ import {
   type EntryPriority,
   type EntrySubtype,
 } from '@/api/calendar';
+import { formatDateTimeInput } from '@/utils/date';
 
 export interface AppointmentModalProps {
   open: boolean;
@@ -41,9 +42,7 @@ export interface AppointmentModalProps {
 
 function toDateTimeLocalValue(d: Date | null | undefined): string {
   if (!d) return '';
-  // datetime-local needs YYYY-MM-DDTHH:mm in local time
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  return formatDateTimeInput(d);
 }
 
 function fromDateTimeLocalValue(v: string): Date | null {

frontend/src/components/calendar/CalendarDetail.tsx

@@ -21,21 +21,11 @@ import {
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Calendar as CalendarIcon, Pencil, Trash2, X } from 'lucide-react';
+import { formatDateTime } from '@/utils/date';
 
 function formatDate(dateStr: string | null | undefined): string {
   if (!dateStr) return '-';
-  try {
-    const d = new Date(dateStr);
-    return d.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  } catch {
-    return dateStr;
-  }
+  return formatDateTime(dateStr) || '-';
 }
 
 function priorityClass(p: string): string {

frontend/src/components/calendar/KanbanBoard.tsx

@@ -7,6 +7,7 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
 import type { CalendarEntry } from '@/api/calendar';
+import { formatDateShort } from '@/utils/date';
 
 export type KanbanStatus = 'open' | 'in_progress' | 'done' | 'cancelled';
 
@@ -38,8 +39,7 @@ function priorityBadgeClass(p: string): string {
 
 function fmtDue(entry: CalendarEntry): string | null {
   if (!entry.due_date) return null;
-  const d = new Date(entry.due_date);
-  return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+  return formatDateShort(entry.due_date) || null;
 }
 
 export function KanbanBoard({ board, loading, onMove, onSelect }: KanbanBoardProps) {

frontend/src/components/calendar/TaskDetailPanel.tsx

@@ -15,6 +15,7 @@ import {
   type CalendarEntry,
   type Subtask,
 } from '@/api/calendar';
+import { formatDateShort } from '@/utils/date';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 
@@ -129,7 +130,7 @@ export function TaskDetailPanel({ entry, onClose, onChanged }: TaskDetailPanelPr
           </span>
           {entry.due_date && (
             <span className="px-2 py-0.5 rounded bg-primary-50 text-primary-700">
-              {new Date(entry.due_date).toLocaleDateString('de-DE')}
+              {formatDateShort(entry.due_date)}
             </span>
           )}
         </div>