feat: add a light event colors setting that shows calendar events tinted with a color bar, as in Outlook

2026-10-31 00:12:39 +00:00 · 2026-10-28 21:50:47 +01:00
parent 67b44fd5de
commit 0d3916cfcc
36 changed files with 130 additions and 17 deletions
@@ -1,6 +1,7 @@
 import { render, screen, cleanup } from '@testing-library/react';
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, afterEach, beforeEach } from 'vitest';
 import { EventCard } from '../event-card';
+import { useSettingsStore } from '@/stores/settings-store';
 import type { Calendar, CalendarEvent, CalendarParticipant } from '@/lib/jmap/types';

 // #1110: an invitation the user declined - the whole series or one occurrence
@@ -89,4 +90,25 @@ describe('EventCard fill', () => {
    expect(shadow).toContain('0 0 0 2px var(--color-primary)');
    expect(shadow).toContain('inset 0 0 0 1px');
  });
+
+  describe('with light event colours', () => {
+    beforeEach(() => useSettingsStore.setState({ calendarTintedEvents: true }));
+    afterEach(() => useSettingsStore.setState({ calendarTintedEvents: false }));
+
+    it.each(['chip', 'span', 'block'] as const)('tints the %s and draws the calendar colour as a bar at its start', (variant) => {
+      render(<EventCard event={makeOccurrence('a', 'accepted')} calendar={calendar} variant={variant} currentUserEmails={me} />);
+      const card = screen.getByRole('button');
+      expect(card).toHaveClass('start-bar');
+      expect(card.style.getPropertyValue('--start-bar')).toBe('#22c55e');
+      expect(card.style.backgroundColor).not.toBe('rgb(34, 197, 94)');
+      expect(card.style.color).toBe('var(--color-foreground)');
+    });
+
+    it('keeps the outline of a declined event, without a bar', () => {
+      render(<EventCard event={makeOccurrence('a', 'declined')} calendar={calendar} variant="block" currentUserEmails={me} />);
+      const card = screen.getByRole('button');
+      expect(card).not.toHaveClass('start-bar');
+      expect(card.style.boxShadow).toContain('inset 0 0 0 1px');
+    });
+  });
 });
@@ -5,7 +5,8 @@ import { useTranslations } from "next-intl";
 import { useDisplayDateFormatter } from "@/hooks/use-display-date-formatter";
 import { format, isSameDay, eachDayOfInterval, differenceInCalendarDays } from "date-fns";
 import { cn } from "@/lib/utils";
-import { EventCard } from "./event-card";
+import { useSettingsStore } from "@/stores/settings-store";
+import { EventCard, eventFillClass, eventFillStyle } from "./event-card";
 import { CalendarTaskChip } from "./task-chip";
 import { QuickEventInput } from "./quick-event-input";
 import { AllHoursToggle, HiddenEventsIndicator } from "./display-hours-controls";
@@ -21,7 +22,6 @@ import { useScrollWindow, getScrollStart, setScrollStart, scrollToStart } from "
 import { dayKey, type ScrollWindowViewProps } from "@/lib/calendar-scroll-window";
 import type { PendingEventPreview } from "./event-modal";
 import { useCalendarErrorMessage } from "@/hooks/use-calendar-error-message";
-import { readableTextOn } from "@/lib/color-transform";
 import { PluginDayLabel } from "./plugin-day-label";

 interface CalendarDayViewProps extends ScrollWindowViewProps {
@@ -93,6 +93,7 @@ export function CalendarDayView({
  revealAt,
 }: CalendarDayViewProps) {
  const t = useTranslations("calendar");
+  const tintedEvents = useSettingsStore((s) => s.calendarTintedEvents);
  const describeError = useCalendarErrorMessage();
  // Grid days / event dates are display dates (local fields = wall-clock in
  // the user's zone); the app-wide formatter would shift them again (#755).
@@ -654,12 +655,11 @@ export function CalendarDayView({
                        return (
                          <div
                            data-pending-preview
-                            className="absolute left-0.5 right-0.5 z-30 rounded-xs pointer-events-none overflow-hidden px-1.5 py-0.5 text-xs shadow-md"
+                            className={cn("absolute left-0.5 right-0.5 z-30 rounded-xs pointer-events-none overflow-hidden px-1.5 py-0.5 text-xs shadow-md", eventFillClass(tintedEvents, false))}
                            style={{
                              top: ((clip.startMinutes - hours.startMinutes) / 60) * hourHeight,
                              height: Math.max(24, ((clip.endMinutes - clip.startMinutes) / 60) * hourHeight),
-                              backgroundColor: color,
-                              color: readableTextOn(color),
+                              ...eventFillStyle(color, { inactive: false, tinted: tintedEvents }),
                            }}
                          >
                            <div className="font-medium truncate">
@@ -7,7 +7,7 @@ import {
  startOfWeek, format, isSameDay, eachDayOfInterval,
 } from "date-fns";
 import { cn } from "@/lib/utils";
-import { EventCard } from "./event-card";
+import { EventCard, eventFillClass, eventFillStyle } from "./event-card";
 import { QuickEventInput } from "./quick-event-input";
 import { CalendarTaskChip } from "./task-chip";
 import { AllHoursToggle, HiddenEventsIndicator } from "./display-hours-controls";
@@ -24,7 +24,6 @@ import { useScrollWindow, getScrollStart, setScrollStart, scrollToStart } from "
 import { dayKey, type ScrollWindowViewProps } from "@/lib/calendar-scroll-window";
 import type { PendingEventPreview } from "./event-modal";
 import { useCalendarErrorMessage } from "@/hooks/use-calendar-error-message";
-import { readableTextOn } from "@/lib/color-transform";
 import { PluginDayLabel } from "./plugin-day-label";

 interface CalendarWeekViewProps extends ScrollWindowViewProps {
@@ -107,6 +106,7 @@ export function CalendarWeekView({
  revealAt,
 }: CalendarWeekViewProps) {
  const t = useTranslations("calendar");
+  const tintedEvents = useSettingsStore((s) => s.calendarTintedEvents);
  const describeError = useCalendarErrorMessage();
  // Grid days / event dates are display dates (local fields = wall-clock in
  // the user's zone); the app-wide formatter would shift them again (#755).
@@ -839,12 +839,11 @@ export function CalendarWeekView({
                      return (
                        <div
                          data-pending-preview
-                          className="absolute left-0.5 right-0.5 z-30 rounded-xs pointer-events-none overflow-hidden px-1.5 py-0.5 text-xs shadow-md"
+                          className={cn("absolute left-0.5 right-0.5 z-30 rounded-xs pointer-events-none overflow-hidden px-1.5 py-0.5 text-xs shadow-md", eventFillClass(tintedEvents, false))}
                          style={{
                            top: ((clip.startMinutes - hours.startMinutes) / 60) * hourHeight,
                            height: Math.max(20, ((clip.endMinutes - clip.startMinutes) / 60) * hourHeight),
-                            backgroundColor: color,
-                            color: readableTextOn(color),
+                            ...eventFillStyle(color, { inactive: false, tinted: tintedEvents }),
                          }}
                        >
                          <div className="font-medium truncate">
@@ -55,11 +55,14 @@ function getEventColor(event: CalendarEvent, calendar?: Calendar): string {

 // Events are solid blocks of their calendar colour; declined and cancelled
 // ones drop the fill and keep a 1px border in it (repos/branding/APP.md).
+// With light event colours on (the Outlook look, as on the printout) an
+// event is a light tint of its colour with a bar in it at the start
+// (eventFillClass) and text in the text colour.
 // Everything is drawn with box-shadow, so the selection ring joins the list
 // here and the browser's focus outline stays free.
-function eventFillStyle(
+export function eventFillStyle(
  color: string,
-  { inactive, separated, selected }: { inactive: boolean; separated?: boolean; selected?: boolean },
+  { inactive, separated, selected, tinted }: { inactive: boolean; separated?: boolean; selected?: boolean; tinted?: boolean },
 ): CSSProperties {
  const shadows: string[] = [];
  if (selected) shadows.push("0 0 0 2px var(--color-primary)");
@@ -67,10 +70,21 @@ function eventFillStyle(
  if (inactive) shadows.push(`inset 0 0 0 1px ${color}`);
  const fill: CSSProperties = inactive
    ? { backgroundColor: "var(--color-background)", color: `color-mix(in srgb, ${color} 55%, var(--color-foreground))` }
-    : { backgroundColor: color, color: readableTextOn(color) };
+    : tinted
+      ? {
+        backgroundColor: `color-mix(in srgb, ${color} 20%, var(--color-background))`,
+        color: "var(--color-foreground)",
+        ["--start-bar" as string]: color,
+      }
+      : { backgroundColor: color, color: readableTextOn(color) };
  return shadows.length > 0 ? { ...fill, boxShadow: shadows.join(", ") } : fill;
 }

+/** The class that draws the light style's bar; declined and cancelled events keep their outline. */
+export function eventFillClass(tinted: boolean, inactive: boolean): string | undefined {
+  return tinted && !inactive ? "start-bar" : undefined;
+}
+
 function parseDuration(duration: string | undefined): number {
  if (!duration) return 0;
  let totalMinutes = 0;
@@ -107,6 +121,7 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
  const startDate = getEventStartDate(event);
  const timeFormat = useSettingsStore((state) => state.timeFormat);
  const showTimeInMonthView = useSettingsStore((state) => state.showTimeInMonthView);
+  const tinted = useSettingsStore((state) => state.calendarTintedEvents);
  const timeFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";

  const calendarName = calendar?.name || "";
@@ -193,9 +208,10 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
          "min-h-[44px] sm:min-h-0",
          "hover:opacity-90 transition-opacity",
          isBeingDragged && "opacity-50",
+          eventFillClass(tinted, isInactive),
          className
        )}
-        style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected }), ...style }}
+        style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected, tinted }), ...style }}
      >
        {/* The whole width, aligned to the title's own start: a short English
            title in Arabic sat at the right, a cut one filled to the left. */}
@@ -221,9 +237,10 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
          continuesBefore && "rounded-s-none",
          continuesAfter && "rounded-e-none pe-2",
          isBeingDragged && "opacity-50",
+          eventFillClass(tinted, isInactive),
          className
        )}
-        style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected }), ...style }}
+        style={{ ...eventFillStyle(color, { inactive: isInactive, selected: isSelected, tinted }), ...style }}
      >
        <div className="flex items-center gap-1 min-w-0">
          {showTimeInMonthView && !event.showWithoutTime && (
@@ -259,9 +276,10 @@ export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onM
        continuesAfter && "rounded-b-none",
        continuesBefore && "pe-4",
        isBeingDragged && "opacity-50",
+        eventFillClass(tinted, isInactive),
        className
      )}
-      style={{ ...eventFillStyle(color, { inactive: isInactive, separated: true, selected: isSelected }), ...style }}
+      style={{ ...eventFillStyle(color, { inactive: isInactive, separated: true, selected: isSelected, tinted }), ...style }}
    >
      {continuesBefore && <ChevronUp aria-hidden="true" className="absolute top-0.5 end-0.5 w-3 h-3 opacity-85" />}
      {continuesAfter && <ChevronDown aria-hidden="true" className="absolute bottom-0.5 end-0.5 w-3 h-3 opacity-85" />}
@@ -34,6 +34,7 @@ export function CalendarSettings() {
  const defaultIdentityId = participantIdentities.find((i) => i.isDefault)?.id ?? participantIdentities[0]?.id ?? '';
  const {
    showTimeInMonthView,
+    calendarTintedEvents,
    showWeekNumbers,
    calendarFreeScroll,
    enableCalendarTasks,
@@ -135,6 +136,16 @@ export function CalendarSettings() {
        />
      </SettingItem>

+      <SettingItem
+        label={t('tinted_events')}
+        description={t('tinted_events_desc')}
+      >
+        <ToggleSwitch
+          checked={calendarTintedEvents}
+          onChange={(checked) => updateSetting('calendarTintedEvents', checked)}
+        />
+      </SettingItem>
+
      <SettingItem
        label={t('show_week_numbers')}
        description={t('show_week_numbers_desc')}
@@ -235,6 +235,7 @@ export const tabSearchEntries: Record<Tab, SettingsSearchEntry[]> = {
    { label: 'calendar.settings.default_view' },
    { label: 'calendar.settings.invitation_parsing' },
    { label: 'calendar.settings.show_time_in_month_view' },
+    { label: 'calendar.settings.tinted_events' },
    { label: 'calendar.settings.show_week_numbers' },
    { label: 'calendar.settings.limit_hours' },
    { label: 'calendar.settings.visible_hours' },
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "اكتشاف دعوات التقويم في مرفقات البريد وإظهار إجراءات التقويم",
      "show_time_in_month_view": "إظهار الوقت في عرض الشهر",
      "show_time_in_month_view_desc": "عرض أوقات الأحداث في عرض التقويم الشهري",
+      "tinted_events": "ألوان أحداث فاتحة",
+      "tinted_events_desc": "عرض الأحداث بدرجة فاتحة من لون التقويم مع شريط ملوّن في البداية، كما في Outlook وفي النسخة المطبوعة، بدلاً من الكتل المصمتة.",
      "show_week_numbers": "إظهار أرقام الأسابيع",
      "show_week_numbers_desc": "عرض أرقام الأسابيع في التقويم المصغّر",
      "calendar_free_scroll": "تمرير حر",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Detecta les invitacions de calendari als fitxers adjunts del correu i mostra les accions del calendari",
      "show_time_in_month_view": "Mostra l'hora a la vista mensual",
      "show_time_in_month_view_desc": "Mostra l'hora dels esdeveniments a la vista mensual del calendari. En pantalles petites, això mostra entrades completes d'esdeveniment en lloc de punts.",
+      "tinted_events": "Colors d'esdeveniment clars",
+      "tinted_events_desc": "Mostra els esdeveniments amb un to clar del color del calendari i una barra de color al principi, com a l'Outlook i a la impressió, en lloc de blocs sòlids.",
      "show_week_numbers": "Mostra els números de setmana",
      "show_week_numbers_desc": "Mostra els números de setmana al minicalendari",
      "calendar_free_scroll": "Desplaçament lliure",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Rozpoznávat pozvánky kalendáře v přílohách e-mailů a zobrazovat akce kalendáře",
      "show_time_in_month_view": "Zobrazit čas v měsíčním zobrazení",
      "show_time_in_month_view_desc": "Zobrazovat časy událostí v měsíčním zobrazení kalendáře",
+      "tinted_events": "Světlé barvy událostí",
+      "tinted_events_desc": "Zobrazovat události ve světlém odstínu barvy kalendáře s barevným pruhem na začátku, jako v Outlooku a při tisku, místo plných bloků.",
      "show_week_numbers": "Zobrazit čísla týdnů",
      "show_week_numbers_desc": "Zobrazovat čísla týdnů v minikalendáři",
      "calendar_free_scroll": "Volné posouvání",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Registrér kalenderinvitationer i e-mail-vedhæftninger og vis kalenderhandlinger",
      "show_time_in_month_view": "Vis tid i månedsvisning",
      "show_time_in_month_view_desc": "Vis begivenhedstider i månedskalendervisningen",
+      "tinted_events": "Lyse begivenhedsfarver",
+      "tinted_events_desc": "Vis begivenheder i en lys nuance af kalenderens farve med en farvet bjælke i starten, som i Outlook og på udskrifter, i stedet for udfyldte blokke.",
      "show_week_numbers": "Vis ugenumre",
      "show_week_numbers_desc": "Vis ugenumre i minikalenderen",
      "calendar_free_scroll": "Fri rulning",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Kalendereinladungen in E-Mail-Anhängen erkennen und Kalenderaktionen anzeigen",
      "show_time_in_month_view": "Zeit in Monatsansicht anzeigen",
      "show_time_in_month_view_desc": "Ereigniszeiten in der Monatskalenderansicht anzeigen",
+      "tinted_events": "Helle Terminfarben",
+      "tinted_events_desc": "Termine als helle Tönung ihrer Kalenderfarbe mit farbigem Balken am Anfang anzeigen, wie in Outlook und im Ausdruck, statt als volle Farbflächen.",
      "show_week_numbers": "Kalenderwochen anzeigen",
      "show_week_numbers_desc": "Kalenderwochen im Minikalender anzeigen",
      "calendar_free_scroll": "Freies Scrollen",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Detect calendar invitations in email attachments and show calendar actions",
      "show_time_in_month_view": "Show time in month view",
      "show_time_in_month_view_desc": "Display event times in the month calendar view. On small screens this shows full event entries instead of dots.",
+      "tinted_events": "Light event colors",
+      "tinted_events_desc": "Show events as a light tint of their calendar color with a colored bar at the start, as in Outlook and on printouts, instead of solid blocks.",
      "show_week_numbers": "Show week numbers",
      "show_week_numbers_desc": "Display week numbers in the mini-calendar",
      "calendar_free_scroll": "Free scrolling",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Detectar invitaciones de calendario en archivos adjuntos del correo y mostrar acciones del calendario",
      "show_time_in_month_view": "Mostrar hora en vista mensual",
      "show_time_in_month_view_desc": "Mostrar las horas de los eventos en la vista mensual del calendario",
+      "tinted_events": "Colores de evento claros",
+      "tinted_events_desc": "Mostrar los eventos con un tono claro del color de su calendario y una barra de color al inicio, como en Outlook y al imprimir, en lugar de bloques sólidos.",
      "show_week_numbers": "Mostrar números de semana",
      "show_week_numbers_desc": "Mostrar los números de semana en el minicalendario",
      "calendar_free_scroll": "Desplazamiento libre",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Tuvasta kalendrikutsed e-kirjade manustes ja kuva kalenditoimingud",
      "show_time_in_month_view": "Kuva kellaaeg kuuvaates",
      "show_time_in_month_view_desc": "Kuva sündmuste kellaajad kuu kalendrivaates. Väikestel ekraanidel kuvatakse punktide asemel täielikud sündmuste kirjed.",
+      "tinted_events": "Heledad sündmuste värvid",
+      "tinted_events_desc": "Näita sündmusi kalendri värvi heleda tooniga ja värvilise ribaga alguses, nagu Outlookis ja väljatrükil, mitte täisvärviliste plokkidena.",
      "show_week_numbers": "Kuva nädalanumbrid",
      "show_week_numbers_desc": "Kuva nädalanumbrid minikalendris",
      "calendar_free_scroll": "Vaba kerimine",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "تشخیص دعوت‌نامه‌های تقویم در پیوست ایمیل",
      "show_time_in_month_view": "نمایش زمان در نمای ماه",
      "show_time_in_month_view_desc": "نمایش زمان رویدادها در نمای ماه تقویم",
+      "tinted_events": "رنگ‌های روشن رویداد",
+      "tinted_events_desc": "نمایش رویدادها با ته‌رنگ روشنی از رنگ تقویم و نواری رنگی در ابتدا، مانند Outlook و نسخهٔ چاپی، به‌جای بلوک‌های تمام‌رنگ.",
      "show_week_numbers": "نمایش شماره هفته",
      "show_week_numbers_desc": "نمایش شماره هفته در تقویم کوچک",
      "calendar_free_scroll": "پیمایش آزاد",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Détecter les invitations de calendrier dans les pièces jointes des e-mails et afficher les actions du calendrier",
      "show_time_in_month_view": "Afficher l'heure dans la vue mensuelle",
      "show_time_in_month_view_desc": "Afficher les heures des événements dans la vue mensuelle du calendrier",
+      "tinted_events": "Couleurs d'événement claires",
+      "tinted_events_desc": "Afficher les événements dans une teinte claire de la couleur de leur agenda avec une barre colorée au début, comme dans Outlook et à l'impression, plutôt qu'en blocs pleins.",
      "show_week_numbers": "Afficher les numéros de semaine",
      "show_week_numbers_desc": "Afficher les numéros de semaine dans le mini-calendrier",
      "calendar_free_scroll": "Défilement libre",
@@ -3899,6 +3899,8 @@
      "invitation_parsing_desc": "זיהוי הזמנות ליומן בקבצים מצורפים לאימייל והצג פעולות ביומן",
      "show_time_in_month_view": "הצג זמן בתצוגת חודש",
      "show_time_in_month_view_desc": "הצג זמני אירועים בתצוגת לוח השנה של החודש",
+      "tinted_events": "צבעי אירועים בהירים",
+      "tinted_events_desc": "הצגת אירועים בגוון בהיר של צבע היומן עם פס צבעוני בהתחלה, כמו ב-Outlook ובהדפסה, במקום בלוקים מלאים.",
      "show_week_numbers": "הצג מספרי שבוע",
      "show_week_numbers_desc": "הצג מספרי שבוע במיני-לוח שנה",
      "calendar_free_scroll": "גלילה חופשית",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Naptármeghívók észlelése az e-mail csatolmányokban és naptár műveletek megjelenítése",
      "show_time_in_month_view": "Idő mutatása a hónap nézetben",
      "show_time_in_month_view_desc": "Események időpontjának mutatása a havi naptár nézetben",
+      "tinted_events": "Világos eseményszínek",
+      "tinted_events_desc": "Az események a naptár színének világos árnyalatával és az elején színes sávval jelennek meg, mint az Outlookban és nyomtatásban, teli blokkok helyett.",
      "show_week_numbers": "Hétszámok mutatása",
      "show_week_numbers_desc": "Hétszámok mutatása a mini naptárban",
      "calendar_free_scroll": "Szabad görgetés",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Rileva gli inviti del calendario negli allegati email e mostra le azioni del calendario",
      "show_time_in_month_view": "Mostra orario nella vista mensile",
      "show_time_in_month_view_desc": "Visualizza gli orari degli eventi nella vista mensile del calendario",
+      "tinted_events": "Colori evento chiari",
+      "tinted_events_desc": "Mostra gli eventi con una tinta chiara del colore del calendario e una barra colorata all'inizio, come in Outlook e nella stampa, invece che come blocchi pieni.",
      "show_week_numbers": "Mostra numeri di settimana",
      "show_week_numbers_desc": "Mostra i numeri di settimana nel mini-calendario",
      "calendar_free_scroll": "Scorrimento libero",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "メール添付のカレンダー招待を検出してカレンダー操作を表示する",
      "show_time_in_month_view": "月表示で時刻を表示",
      "show_time_in_month_view_desc": "月カレンダー表示でイベントの時刻を表示する",
+      "tinted_events": "淡いイベントカラー",
+      "tinted_events_desc": "予定を塗りつぶしではなく、Outlook や印刷時と同じように、カレンダーの色の淡い色合いと先頭の色付きバーで表示します。",
      "show_week_numbers": "週番号を表示",
      "show_week_numbers_desc": "ミニカレンダーに週番号を表示する",
      "calendar_free_scroll": "自由スクロール",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "이메일 첨부파일에서 캘린더 초대장을 감지하고 보여줘요",
      "show_time_in_month_view": "월간 보기에 시간 표시",
      "show_time_in_month_view_desc": "월간 캘린더에서도 일정 시간을 표시해요",
+      "tinted_events": "연한 일정 색상",
+      "tinted_events_desc": "일정을 꽉 찬 블록 대신 Outlook이나 인쇄본처럼 캘린더 색상의 연한 색조와 앞쪽의 색상 막대로 표시합니다.",
      "show_week_numbers": "주 차 번호 표시",
      "show_week_numbers_desc": "미니 캘린더에 1년 중 몇 주 차인지 표시해요",
      "calendar_free_scroll": "자유 스크롤",
@@ -3980,6 +3980,8 @@
      "invitation_parsing_desc": "Meklēt kalendāra uzaicinājumus e-pasta pielikumos",
      "show_time_in_month_view": "Rādīt laiku mēneša skatā",
      "show_time_in_month_view_desc": "Rādīt pasākuma laiku mēneša kalendārā",
+      "tinted_events": "Gaišas notikumu krāsas",
+      "tinted_events_desc": "Rādīt notikumus kalendāra krāsas gaišā tonī ar krāsainu joslu sākumā, kā Outlook un izdrukās, nevis kā pilnus blokus.",
      "show_week_numbers": "Rādīt nedēļu numurus",
      "show_week_numbers_desc": "Rādīt nedēļu numurus mini kalendārā",
      "calendar_free_scroll": "Brīva ritināšana",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Имэйл хавсралтаас хуанлийн урилгыг илрүүлж, календарийн үйлдлийг харуулах",
      "show_time_in_month_view": "Хугацааг сараар харуулах",
      "show_time_in_month_view_desc": "Сарын хуанлийн харагдац дээр үйл явдлын цагийг харуулах. Жижиг дэлгэц дээр энэ нь цэгийн оронд үйл явдлын бүрэн оруулгуудыг харуулдаг.",
+      "tinted_events": "Цайвар үйл явдлын өнгө",
+      "tinted_events_desc": "Үйл явдлыг бүтэн өнгөт блокийн оронд Outlook болон хэвлэсэн хувилбартай адил хуанлийн өнгөний цайвар өнгө, эхэндээ өнгөт зураастай харуулна.",
      "show_week_numbers": "Долоо хоногийн дугаарыг харуулах",
      "show_week_numbers_desc": "Ми-календарт долоо хоногийн тоог харуулах",
      "calendar_free_scroll": "Чөлөөт гүйлгэлт",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Finn kalenderinvitasjoner i e-postvedlegg og vis tilgjengelige kalenderhandlinger",
      "show_time_in_month_view": "Vis klokkeslett i månedsvisning",
      "show_time_in_month_view_desc": "Vis klokkeslettet for hendelser i månedsvisningen. På små skjermer vises hele hendelsesoppføringen i stedet for en prikk.",
+      "tinted_events": "Lyse hendelsesfarger",
+      "tinted_events_desc": "Vis hendelser i en lys nyanse av kalenderens farge med en farget stolpe i starten, som i Outlook og på utskrifter, i stedet for fylte blokker.",
      "show_week_numbers": "Vis ukenummer",
      "show_week_numbers_desc": "Vis ukenummer i minikalenderen",
      "calendar_free_scroll": "Fri rulling",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Kalenderuitnodigingen in e-mailbijlagen detecteren en kalenderacties tonen",
      "show_time_in_month_view": "Tijd weergeven in maandweergave",
      "show_time_in_month_view_desc": "Evenementtijden weergeven in de maandkalenderweergave",
+      "tinted_events": "Lichte afspraakkleuren",
+      "tinted_events_desc": "Toon afspraken als een lichte tint van hun agendakleur met een gekleurde balk aan het begin, zoals in Outlook en op afdrukken, in plaats van volle blokken.",
      "show_week_numbers": "Weeknummers weergeven",
      "show_week_numbers_desc": "Weeknummers weergeven in de minikalender",
      "calendar_free_scroll": "Vrij scrollen",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Wykrywaj zaproszenia kalendarza w załącznikach e-mail i pokazuj działania kalendarza",
      "show_time_in_month_view": "Pokaż godzinę w widoku miesiąca",
      "show_time_in_month_view_desc": "Wyświetlaj godziny wydarzeń w miesięcznym widoku kalendarza",
+      "tinted_events": "Jasne kolory wydarzeń",
+      "tinted_events_desc": "Pokazuj wydarzenia w jasnym odcieniu koloru kalendarza z kolorowym paskiem na początku, jak w Outlooku i na wydruku, zamiast pełnych bloków.",
      "show_week_numbers": "Pokaż numery tygodni",
      "show_week_numbers_desc": "Wyświetlaj numery tygodni w mini-kalendarzu",
      "calendar_free_scroll": "Swobodne przewijanie",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Detectar convites de calendário em anexos de e-mail e mostrar ações do calendário",
      "show_time_in_month_view": "Mostrar horário na visualização mensal",
      "show_time_in_month_view_desc": "Exibir horários dos eventos na visualização mensal do calendário",
+      "tinted_events": "Cores de evento claras",
+      "tinted_events_desc": "Mostrar os eventos com um tom claro da cor do calendário e uma barra colorida no início, como no Outlook e na impressão, em vez de blocos sólidos.",
      "show_week_numbers": "Mostrar números da semana",
      "show_week_numbers_desc": "Exibir números da semana no minicalendário",
      "calendar_free_scroll": "Deslocamento livre",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Detectați invitațiile din calendar din atașamentele de e-mail și afișați acțiunile din calendar",
      "show_time_in_month_view": "Afișați ora în vizualizarea lunară",
      "show_time_in_month_view_desc": "Afișați orele evenimentelor în vizualizarea calendarului lunar",
+      "tinted_events": "Culori deschise pentru evenimente",
+      "tinted_events_desc": "Afișează evenimentele într-o nuanță deschisă a culorii calendarului, cu o bară colorată la început, ca în Outlook și la tipărire, în loc de blocuri pline.",
      "show_week_numbers": "Afișați numerele săptămânilor",
      "show_week_numbers_desc": "Afișați numerele săptămânilor în mini-calendar",
      "calendar_free_scroll": "Derulare liberă",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Определять приглашения календаря во вложениях email и показывать действия",
      "show_time_in_month_view": "Показывать время в виде месяца",
      "show_time_in_month_view_desc": "Отображать время события в виде месячного календаря",
+      "tinted_events": "Светлые цвета событий",
+      "tinted_events_desc": "Показывать события светлым оттенком цвета календаря с цветной полосой в начале, как в Outlook и при печати, а не сплошными блоками.",
      "show_week_numbers": "Показывать номера недель",
      "show_week_numbers_desc": "Отображать номера недель в мини-календаре",
      "calendar_free_scroll": "Свободная прокрутка",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Rozpoznávať pozvánky kalendára v prílohách e-mailov a zobrazovať akcie kalendára",
      "show_time_in_month_view": "Zobraziť čas v mesačnom zobrazení",
      "show_time_in_month_view_desc": "Zobrazovať časy udalostí v mesačnom zobrazení kalendára",
+      "tinted_events": "Svetlé farby udalostí",
+      "tinted_events_desc": "Zobrazovať udalosti vo svetlom odtieni farby kalendára s farebným pruhom na začiatku, ako v Outlooku a pri tlači, namiesto plných blokov.",
      "show_week_numbers": "Zobraziť čísla týždňov",
      "show_week_numbers_desc": "Zobrazovať čísla týždňov v minikalendári",
      "calendar_free_scroll": "Voľné posúvanie",
@@ -3226,6 +3226,8 @@
      "invitation_parsing_desc": "ตรวจหาคำเชิญเข้าร่วมกิจกรรมในไฟล์แนบอีเมลและแสดงปุ่มการดำเนินการในปฏิทิน",
      "show_time_in_month_view": "แสดงเวลาในมุมมองรายเดือน",
      "show_time_in_month_view_desc": "แสดงเวลากิจกรรมในมุมมองปฏิทินรายเดือน บนหน้าจอขนาดเล็กจะแสดงรายการกิจกรรมเต็มแทนการแสดงจุด",
+      "tinted_events": "สีกิจกรรมแบบอ่อน",
+      "tinted_events_desc": "แสดงกิจกรรมเป็นสีอ่อนของสีปฏิทินพร้อมแถบสีที่ด้านต้น เหมือนใน Outlook และฉบับพิมพ์ แทนที่จะเป็นบล็อกสีทึบ",
      "show_week_numbers": "แสดงหมายเลขสัปดาห์",
      "show_week_numbers_desc": "แสดงหมายเลขสัปดาห์ในปฏิทินขนาดเล็ก",
      "calendar_free_scroll": "การเลื่อนอย่างอิสระ",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "E-posta eklerindeki takvim davetlerini algıla ve takvim işlemlerini göster",
      "show_time_in_month_view": "Ay görünümünde saati göster",
      "show_time_in_month_view_desc": "Aylık takvim görünümünde etkinlik saatlerini görüntüle",
+      "tinted_events": "Açık etkinlik renkleri",
+      "tinted_events_desc": "Etkinlikleri düz bloklar yerine, Outlook'ta ve çıktılarda olduğu gibi takvim renginin açık bir tonu ve başta renkli bir çubukla göster.",
      "show_week_numbers": "Hafta numaralarını göster",
      "show_week_numbers_desc": "Mini takvimde hafta numaralarını görüntüle",
      "calendar_free_scroll": "Serbest kaydırma",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "Виявляти запрошення календаря у вкладеннях електронної пошти та показувати дії календаря",
      "show_time_in_month_view": "Показати час у режимі перегляду місяця",
      "show_time_in_month_view_desc": "Відображення часу подій у місячному календарі",
+      "tinted_events": "Світлі кольори подій",
+      "tinted_events_desc": "Показувати події світлим відтінком кольору календаря з кольоровою смугою на початку, як в Outlook і під час друку, замість суцільних блоків.",
      "show_week_numbers": "Показати номери тижнів",
      "show_week_numbers_desc": "Відображення номерів тижнів у міні-календарі",
      "calendar_free_scroll": "Вільне прокручування",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "偵測郵件附件中的行事曆邀請，並顯示行事曆動作",
      "show_time_in_month_view": "在月檢視中顯示時間",
      "show_time_in_month_view_desc": "在月檢視中顯示活動時間。小螢幕會顯示完整活動項目，而不只是圓點。",
+      "tinted_events": "淺色活動顏色",
+      "tinted_events_desc": "像 Outlook 和列印版本一樣，以行事曆顏色的淺色調加開頭的彩色直條顯示活動，而非實心色塊。",
      "show_week_numbers": "顯示週數",
      "show_week_numbers_desc": "在迷你行事曆中顯示週數",
      "calendar_free_scroll": "自由捲動",
@@ -3981,6 +3981,8 @@
      "invitation_parsing_desc": "检测邮件附件中的日历邀请并显示日历操作",
      "show_time_in_month_view": "在月视图中显示时间",
      "show_time_in_month_view_desc": "在月历视图中显示事件时间",
+      "tinted_events": "浅色日程颜色",
+      "tinted_events_desc": "像 Outlook 和打印件那样，用日历颜色的浅色调加开头的彩色竖条显示日程，而不是实心色块。",
      "show_week_numbers": "显示周数",
      "show_week_numbers_desc": "在迷你日历中显示周数",
      "calendar_free_scroll": "自由滚动",
@@ -585,6 +585,8 @@ interface SettingsState {

  // Calendar
  showTimeInMonthView: boolean;
+  /** Events as a light tint of their colour with a bar at the start (the Outlook look), not solid blocks. */
+  calendarTintedEvents: boolean;
  showWeekNumbers: boolean;
  /** Scroll continuously through months/weeks/days (#759) instead of one period at a time. */
  calendarFreeScroll: boolean;
@@ -898,6 +900,7 @@ const DEFAULT_SETTINGS = {

  // Calendar
  showTimeInMonthView: false,
+  calendarTintedEvents: false,
  showWeekNumbers: false,
  calendarFreeScroll: true,
  calendarHoverPreview: 'delay-500ms' as CalendarHoverPreview,
@@ -1316,6 +1319,7 @@ export const useSettingsStore = create<SettingsState>()(
          filesSettings: state.filesSettings,
          expandedFilterView: state.expandedFilterView,
          showTimeInMonthView: state.showTimeInMonthView,
+          calendarTintedEvents: state.calendarTintedEvents,
          showWeekNumbers: state.showWeekNumbers,
          calendarFreeScroll: state.calendarFreeScroll,
          calendarHoverPreview: state.calendarHoverPreview,