feat: add JMAP Calendar integration with month/week/day/agenda views

Full calendar support via JMAP Calendars (RFC 8984): - Event create/edit/delete with recurrence rules and reminders - Multi-day event spanning, column-based overlap layout - Locale-aware date formatting, first day of week and time format settings - Real-time updates via push notifications - ARIA accessibility, input validation, color sanitization - Keyboard shortcuts, mobile touch targets, focus trap - ICU pluralization for all 8 supported languages
2026-02-16 20:34:29 +01:00
parent fb414bf2c9
commit e6f67c24cb
28 changed files with 3922 additions and 39 deletions
@@ -0,0 +1,55 @@
+"use client";
+
+import { useTranslations } from 'next-intl';
+import { useCalendarStore, CalendarViewMode } from '@/stores/calendar-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { SettingsSection, SettingItem, Select, RadioGroup } from './settings-section';
+
+export function CalendarSettings() {
+  const t = useTranslations('calendar.settings');
+  const tViews = useTranslations('calendar.views');
+  const tDays = useTranslations('calendar.days');
+
+  const { viewMode, setViewMode } = useCalendarStore();
+  const { timeFormat, firstDayOfWeek, updateSetting } = useSettingsStore();
+
+  return (
+    <SettingsSection title={t('title')}>
+      <SettingItem label={t('default_view')}>
+        <Select
+          value={viewMode}
+          onChange={(value) => setViewMode(value as CalendarViewMode)}
+          options={[
+            { value: 'month', label: tViews('month') },
+            { value: 'week', label: tViews('week') },
+            { value: 'day', label: tViews('day') },
+            { value: 'agenda', label: tViews('agenda') },
+          ]}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('week_starts_on')}>
+        <Select
+          value={firstDayOfWeek.toString()}
+          onChange={(value) => updateSetting('firstDayOfWeek', parseInt(value) as 0 | 1)}
+          options={[
+            { value: '1', label: tDays('monday') },
+            { value: '0', label: tDays('sunday') },
+          ]}
+        />
+      </SettingItem>
+
+      <SettingItem label={t('time_format')}>
+        <RadioGroup
+          value={timeFormat}
+          onChange={(value) => updateSetting('timeFormat', value as '12h' | '24h')}
+          options={[
+            { value: '12h', label: t('time_format_12h') },
+            { value: '24h', label: t('time_format_24h') },
+          ]}
+        />
+      </SettingItem>
+
+    </SettingsSection>
+  );
+}