updates

frontend/www/app.js

@@ -1,5 +1,5 @@
 const API_BASE =
-    "http://localhost:8000";
+    "/api";
 
 
 
@@ -491,12 +491,14 @@ async function handleJoinRoom(event){
 // ---------- calendar (week view) ----------
 
 
-const CALENDAR_HOUR_HEIGHT = 48;
+const CALENDAR_SLOT_HOURS = 2;
+const CALENDAR_SLOT_HEIGHT = 48;
 
 const CALENDAR_START_HOUR = 0;
 
 const CALENDAR_END_HOUR = 24;
-
+const PIXELS_PER_MINUTE =
+    CALENDAR_SLOT_HEIGHT / (CALENDAR_SLOT_HOURS * 60);
 
 function isEventCancelled(event){
 
@@ -620,25 +622,31 @@ function buildWeekCalendarHtml(events, offset){
         (CALENDAR_END_HOUR - CALENDAR_START_HOUR) * 60;
 
     let trackHeight =
-        (CALENDAR_END_HOUR - CALENDAR_START_HOUR) * CALENDAR_HOUR_HEIGHT;
-
+        ((CALENDAR_END_HOUR - CALENDAR_START_HOUR) / CALENDAR_SLOT_HOURS)
+        * CALENDAR_SLOT_HEIGHT;
 
     // time gutter
 
     let hourRows = "";
 
 
-    for(let h = CALENDAR_START_HOUR; h < CALENDAR_END_HOUR; h++){
+    for(
+        let h = CALENDAR_START_HOUR;
+        h < CALENDAR_END_HOUR;
+        h += CALENDAR_SLOT_HOURS
+    ){
 
         hourRows += `
-            <div class="calendar-hour-label" style="height:${CALENDAR_HOUR_HEIGHT}px">
+            <div 
+                class="calendar-hour-label"
+                style="height:${CALENDAR_SLOT_HEIGHT}px"
+            >
                 ${String(h).padStart(2, "0")}:00
             </div>
         `;
 
     }
 
-
     // day columns
 
     let dayColumns =
@@ -673,13 +681,23 @@ function buildWeekCalendarHtml(events, offset){
 
             let placed =
                 dayEvents.map(event => {
+                    function parseLocalDate(dateString){
+                        let parts = dateString.split(/[- :]/);
 
-                    let start =
-                        new Date(event.start_time);
+                        return new Date(
+                            parts[0],
+                            parts[1] - 1,
+                            parts[2],
+                            parts[3],
+                            parts[4]
+                        );
+                    }
+
+                    let start = parseLocalDate(event.start_time);
 
                     let end =
                         event.end_time
-                        ? new Date(event.end_time)
+                        ? parseLocalDate(event.end_time)
                         : new Date(start.getTime() + 30 * 60000);
 
                     let startMinutes =
@@ -715,8 +733,14 @@ function buildWeekCalendarHtml(events, offset){
             let blocksHtml =
                 placed.map(p => {
 
-                    let topPct =
-                        (p.startMinutes / totalMinutes) * 100;
+                let topPx =
+                    (p.startMinutes - CALENDAR_START_HOUR * 60)
+                    * PIXELS_PER_MINUTE;
+
+
+                let heightPx =
+                    (p.endMinutes - p.startMinutes)
+                    * PIXELS_PER_MINUTE;
 
                     let heightPct =
                         ((p.endMinutes - p.startMinutes) / totalMinutes) * 100;
@@ -732,15 +756,25 @@ function buildWeekCalendarHtml(events, offset){
 
                     let timeLabel =
                         new Date(p.event.start_time)
-                            .toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit" });
-
-
+                            .toLocaleTimeString("nl-NL", {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                hour12: false
+                            });
+    
+                    console.log({
+                        title: p.event.title,
+                        startMinutes: p.startMinutes,
+                        endMinutes: p.endMinutes,
+                        topPx,
+                        heightPx
+                    });
                     return `
                         <div
                             class="calendar-event ${colorClass}"
                             style="
-                                top:${topPct}%;
-                                height:${heightPct}%;
+                                top:${topPx}px;
+                                height:${heightPx}px;
                                 left:${leftPct}%;
                                 width:${widthPct}%;
                                 z-index:${p.layer + 1};