@luckydye/calendar 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luckydye/calendar",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Tim Havlicek",
   "contributors": [],
   "description": "",

package/src/CalDAVConfig.ts

@@ -39,6 +39,7 @@ interface InhouseSource extends CalendarSource {
     sessionCookie: string;
     employeeId: string;
     unitId?: string;
+    startHour?: 9 | 10;
   };
   locked?: boolean;
 }
@@ -562,6 +563,7 @@ export class CalDAVConfigElement extends LitElement {
           sessionCookie: this.formData.credentials.sessionCookie,
           employeeId: this.formData.credentials.employeeId,
           unitId: this.formData.credentials.unitId,
+          startHour: this.formData.credentials.startHour,
         },
         color: this.formData.color || "#FF6E68",
         enabled: this.formData.enabled ?? true,
@@ -597,10 +599,10 @@ export class CalDAVConfigElement extends LitElement {
     this.requestUpdate();
   }
 
-  updateForm(field: string, value: string | boolean) {
+  updateForm(field: string, value: string | boolean | number) {
     if (field === "serverUrl" || field === "username" || field === "password" || field === "url" ||
         field === "accessToken" || field === "refreshToken" || field === "tokenExpiry" || field === "calendarId" ||
-        field === "sessionCookie" || field === "employeeId" || field === "unitId") {
+        field === "sessionCookie" || field === "employeeId" || field === "unitId" || field === "startHour") {
       this.formData = {
         ...this.formData,
         credentials: {
@@ -985,6 +987,19 @@ export class CalDAVConfigElement extends LitElement {
                         this.updateForm("unitId", (e.target as HTMLInputElement).value)}
                     />
                   </div>
+
+                  <div class="form-group">
+                    <label class="form-label">Bookings Start At</label>
+                    <select
+                      class="form-input"
+                      .value=${String(this.formData.credentials?.startHour ?? 9)}
+                      @change=${(e: Event) =>
+                        this.updateForm("startHour", Number((e.target as HTMLSelectElement).value))}
+                    >
+                      <option value="9" ?selected=${(this.formData.credentials?.startHour ?? 9) === 9}>9:00 AM</option>
+                      <option value="10" ?selected=${this.formData.credentials?.startHour === 10}>10:00 AM</option>
+                    </select>
+                  </div>
                 `
               : null}
 

package/src/CalendarView.ts

@@ -395,6 +395,7 @@ export class CalendarViewElement extends LitElement {
       display: flex;
       flex-direction: column;
       gap: 16px;
+      background: var(--bg-secondary, rgba(36, 36, 38, 0.5));
     }
 
     .event-detail-section {
@@ -3367,7 +3368,7 @@ export class CalendarViewElement extends LitElement {
 				const deltaMs = dropDate.getTime() - originDate.getTime();
 				const snap15 = (d: Date) => {
 					const m = d.getMinutes();
-					d.setMinutes(Math.floor(m / 15) * 15, 0, 0);
+					d.setMinutes(Math.round(m / 15) * 15, 0, 0);
 					return d;
 				};
 				const newStart = snap15(
@@ -4183,8 +4184,12 @@ export class CalendarViewElement extends LitElement {
 		);
 		const newEnd = snap15(new Date(this.movingEvent.end.getTime() + deltaMs));
 
+		// The grab point (originDate) relative to the event's midpoint tells us
+		// which half the user grabbed — this is stable for the whole drag.
+		const eventMidMs = (this.movingEvent.start.getTime() + this.movingEvent.end.getTime()) / 2;
+		const useStartEdge = originDate.getTime() <= eventMidMs;
+
 		if (this.movingEventDuplicateMode) {
-			// Duplicate mode: use accent color to indicate new event creation
 			const accent =
 				getComputedStyle(this).getPropertyValue("--accent-primary").trim() ||
 				"rgb(100, 150, 255)";
@@ -4196,10 +4201,9 @@ export class CalendarViewElement extends LitElement {
 					stroke: accent.replace("rgb", "rgba").replace(")", ", 0.8)"),
 					text: "white",
 				},
-				this.movingEventEnd.y,
+				useStartEdge,
 			);
 		} else {
-			// Normal move: use event color
 			const rgb = hexToRgb(this.movingEvent.color || "#888888");
 			this.renderVirtualEvent(
 				newStart,
@@ -4209,7 +4213,7 @@ export class CalendarViewElement extends LitElement {
 					stroke: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)`,
 					text: "rgba(255, 255, 255, 0.5)",
 				},
-				this.movingEventEnd.y,
+				useStartEdge,
 			);
 		}
 	}
@@ -4269,23 +4273,20 @@ export class CalendarViewElement extends LitElement {
 			fill = accent.replace("rgb", "rgba").replace(")", ", 0.3)");
 			stroke = accent.replace("rgb", "rgba").replace(")", ", 0.8)");
 		}
-		this.renderVirtualEvent(
-			earlier,
-			later,
-			{
-				fill,
-				stroke,
-				text: "white",
-			},
-			this.eventCreationEnd.y,
-		);
+		// In shift mode the cursor tracks the end; otherwise it tracks whichever
+		// edge is away from the fixed anchor (eventCreationStart).
+		const useStartEdge = this.eventCreationShiftPressed
+			? false
+			: this.eventCreationEnd.y <= this.eventCreationStart.y;
+
+		this.renderVirtualEvent(earlier, later, { fill, stroke, text: "white" }, useStartEdge);
 	}
 
 	renderVirtualEvent(
 		start: Date,
 		end: Date,
 		color: { fill: string; stroke: string; text: string },
-		cursorY?: number,
+		useStartEdge = true,
 	): void {
 		if (!this.overlayCanvas || !this.overlayCtx || !this.scrollContainer)
 			return;
@@ -4405,15 +4406,6 @@ export class CalendarViewElement extends LitElement {
 			ctx.fillStyle = color.text;
 			ctx.textAlign = "left";
 
-			// Calculate which edge is closer to cursor
-			let useStartEdge = true;
-			if (cursorY !== undefined) {
-				const cursorYViewport = cursorY - this.scrollTop;
-				const distanceToStart = Math.abs(cursorYViewport - startY);
-				const distanceToEnd = Math.abs(cursorYViewport - endY);
-				useStartEdge = distanceToStart < distanceToEnd;
-			}
-
 			// Use appropriate column based on which edge is closer
 			const labelColX = useStartEdge ? firstColX : lastColX;
 

package/src/InhouseBookingSource.ts

@@ -17,6 +17,10 @@ export interface InhouseCredentials extends CalendarCredentials {
    * Unit ID (optional, for filtering by unit/location)
    */
   unitId?: string;
+  /**
+   * Hour at which bookings start (9 or 10, defaults to 9)
+   */
+  startHour?: 9 | 10;
 }
 
 /**
@@ -191,7 +195,7 @@ export class InhouseBookingSource implements CalendarSource {
       }
 
       const LUNCH_MS = 60 * 60 * 1000;
-      let currentTime = new Date(year, month - 1, day, 9, 0);
+      let currentTime = new Date(year, month - 1, day, this.credentials.startHour ?? 9, 0);
 
       for (let i = 0; i < dateBookings.length; i++) {
         // Insert 1-hour lunch break between morning and afternoon sessions

package/src/app.ts

@@ -364,6 +364,7 @@ function createInhouseCalendar(source: CalendarSource): Calendar {
 			sessionCookie: source.credentials.sessionCookie,
 			employeeId: source.credentials.employeeId,
 			unitId: source.credentials.unitId,
+			startHour: source.credentials.startHour,
 		},
 		source.enabled
 	);