[UI] Adjust calendar view color (#12080)

- Match custom status colors

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -30,7 +30,7 @@ import {
   ProjectCodeFilter,
   ResponsibleFilter
 } from '../../tables/Filter';
-import { StatusRenderer } from '../render/StatusRenderer';
+import { StatusRenderer, getStatusColor } from '../render/StatusRenderer';
 import Calendar from './Calendar';
 
 /**
@@ -107,6 +107,8 @@ export default function OrderCalendar({
           order.start_date || order.issue_date || order.creation_date || today;
         const end: string = order.target_date || start;
 
+        const statusColor = getStatusColor(model, order.status);
+
         return {
           order: order,
           id: order.pk,
@@ -115,7 +117,9 @@ export default function OrderCalendar({
           start: start,
           end: end,
           startEditable: canEdit,
-          durationEditable: canEdit
+          durationEditable: canEdit,
+          backgroundColor: statusColor,
+          borderColor: statusColor
         };
       }) ?? []
     );

src/frontend/src/components/render/StatusRenderer.tsx

@@ -202,6 +202,31 @@ export const StatusRenderer = ({
   return renderStatusLabel(status, statusCodes, options, fallbackStatus);
 };
 
+/*
+ * Return a CSS color string (Mantine CSS variable) for a given status code.
+ * Used to set event background colors in calendar views.
+ */
+export function getStatusColor(
+  type: ModelType | string,
+  status: string | number
+): string {
+  const statusCodes = getStatusCodes(type);
+  const fallback = `var(--mantine-color-${statusColorMap['default']}-6)`;
+
+  if (!statusCodes) return fallback;
+
+  for (const name in statusCodes.values) {
+    const entry: StatusCodeInterface = statusCodes.values[name];
+    if (entry?.key == status) {
+      const mantineColor =
+        statusColorMap[entry.color] ?? statusColorMap['default'];
+      return `var(--mantine-color-${mantineColor}-6)`;
+    }
+  }
+
+  return fallback;
+}
+
 /*
  * Render the status badge in a table
  */