From dd7e12abe06d02f8eb019b51c438af9dffcf488f Mon Sep 17 00:00:00 2001
From: Nathan <nathan@brotherscreative.net>
Date: Thu, 3 Oct 2024 14:54:17 -0400
Subject: [PATCH] feat: add support for custom date/time format

---
 src/components/Calendar/Header/Header.tsx               | 7 ++++---
 src/components/Scheduler/Scheduler.tsx                  | 2 ++
 src/types/global.ts                                     | 2 ++
 src/utils/drawHeader/drawHeader.ts                      | 8 +++++---
 src/utils/drawHeader/drawRows/drawZoom2DaysInMiddle.ts  | 5 +++--
 src/utils/drawHeader/drawRows/drawZoom2HoursOnBottom.ts | 5 +++--
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/Calendar/Header/Header.tsx b/src/components/Calendar/Header/Header.tsx
index 4e4b5c70..2502f705 100644
--- a/src/components/Calendar/Header/Header.tsx
+++ b/src/components/Calendar/Header/Header.tsx
@@ -12,7 +12,8 @@ import Topbar from "./Topbar";
 
 const Header: FC<HeaderProps> = ({ zoom, topBarWidth, showThemeToggle, toggleTheme }) => {
   const { week } = useLanguage();
-  const { date, cols, dayOfYear, startDate } = useCalendar();
+  const { date, cols, dayOfYear, startDate, config } = useCalendar();
+  const { dateFormat, timeFormat } = config;
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const theme = useTheme();
@@ -24,9 +25,9 @@ const Header: FC<HeaderProps> = ({ zoom, topBarWidth, showThemeToggle, toggleThe
       const height = currentHeaderHeight + 1;
       resizeCanvas(ctx, width, height);
 
-      drawHeader(ctx, zoom, cols, startDate, week, dayOfYear, theme);
+      drawHeader(ctx, zoom, cols, startDate, week, dayOfYear, theme, dateFormat, timeFormat);
     },
-    [cols, dayOfYear, startDate, week, zoom, theme]
+    [cols, dayOfYear, startDate, week, zoom, theme, dateFormat, timeFormat]
   );
 
   useEffect(() => {
diff --git a/src/components/Scheduler/Scheduler.tsx b/src/components/Scheduler/Scheduler.tsx
index 1f4fc9c9..4eab72ff 100644
--- a/src/components/Scheduler/Scheduler.tsx
+++ b/src/components/Scheduler/Scheduler.tsx
@@ -28,6 +28,8 @@ const Scheduler = ({
       includeTakenHoursOnWeekendsInDayView: false,
       showTooltip: true,
       translations: undefined,
+      dateFormat: "dddd DD.MM.YYYY",
+      timeFormat: "HH:00",
       ...config
     }),
     [config]
diff --git a/src/types/global.ts b/src/types/global.ts
index fd94bf5f..cd5e507f 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -51,6 +51,8 @@ export type Config = {
    */
   defaultTheme?: "light" | "dark";
   theme?: Theme;
+  dateFormat?: string;
+  timeFormat?: string;
 };
 
 export type Theme = {
diff --git a/src/utils/drawHeader/drawHeader.ts b/src/utils/drawHeader/drawHeader.ts
index c7aa0bef..67a8a55e 100644
--- a/src/utils/drawHeader/drawHeader.ts
+++ b/src/utils/drawHeader/drawHeader.ts
@@ -17,7 +17,9 @@ export const drawHeader = (
   startDate: Day,
   weekLabel: string,
   dayOfYear: number,
-  theme: Theme
+  theme: Theme,
+  dateFormat = "dddd DD.MM.YYYY",
+  timeFormat = "HH:00"
 ) => {
   switch (zoom) {
     case 0:
@@ -32,8 +34,8 @@ export const drawHeader = (
       break;
     case 2:
       drawZoom2MonthsOnTop(ctx, cols, startDate, theme);
-      drawZoom2DaysInMiddle(ctx, cols, startDate, theme);
-      drawZoom2HoursOnBottom(ctx, cols, startDate, theme);
+      drawZoom2DaysInMiddle(ctx, cols, startDate, theme, dateFormat);
+      drawZoom2HoursOnBottom(ctx, cols, startDate, theme, timeFormat);
       break;
   }
 };
diff --git a/src/utils/drawHeader/drawRows/drawZoom2DaysInMiddle.ts b/src/utils/drawHeader/drawRows/drawZoom2DaysInMiddle.ts
index 4a3f309f..36547f45 100644
--- a/src/utils/drawHeader/drawRows/drawZoom2DaysInMiddle.ts
+++ b/src/utils/drawHeader/drawRows/drawZoom2DaysInMiddle.ts
@@ -14,7 +14,8 @@ export const drawZoom2DaysInMiddle = (
   ctx: CanvasRenderingContext2D,
   cols: number,
   startDate: Day,
-  theme: Theme
+  theme: Theme,
+  dateFormat: string
 ) => {
   const daysInRange = Math.floor(cols / hoursInDay) + 2;
 
@@ -30,7 +31,7 @@ export const drawZoom2DaysInMiddle = (
   for (let i = 0; i < daysInRange; i++) {
     const dayLabel = dayjs(`${startDate.year}-${startDate.month + 1}-${startDate.dayOfMonth}`)
       .add(i, "day")
-      .format("dddd DD.MM.YYYY")
+      .format(dateFormat)
       .toUpperCase();
 
     drawRow(
diff --git a/src/utils/drawHeader/drawRows/drawZoom2HoursOnBottom.ts b/src/utils/drawHeader/drawRows/drawZoom2HoursOnBottom.ts
index 6cf62032..d0a3fa0a 100644
--- a/src/utils/drawHeader/drawRows/drawZoom2HoursOnBottom.ts
+++ b/src/utils/drawHeader/drawRows/drawZoom2HoursOnBottom.ts
@@ -14,7 +14,8 @@ export const drawZoom2HoursOnBottom = (
   ctx: CanvasRenderingContext2D,
   cols: number,
   startDate: Day,
-  theme: Theme
+  theme: Theme,
+  timeFormat: string
 ) => {
   let xPos = 0;
   const yPos = zoom2HeaderTopRowHeight + zoom2HeaderMiddleRowHeight;
@@ -25,7 +26,7 @@ export const drawZoom2HoursOnBottom = (
   const width = zoom2ColumnWidth;
 
   for (let i = 0; i < cols; i++) {
-    const hourLabel = startDateHour.add(i, "hours").format("HH:00").toUpperCase();
+    const hourLabel = startDateHour.add(i, "hours").format(timeFormat).toUpperCase();
 
     drawRow(
       {