fix: miscalculation when dragging event with hourStart option (fix #1228)

apps/calendar/playwright/playwright-env.d.ts

@@ -1,4 +1,4 @@
-import type Calendar from '@src/factory/calendar';
+import type Calendar from '../src/factory/calendar';
 
 declare global {
   interface Window {

apps/calendar/playwright/week/hourStartOption.e2e.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+import { WEEK_VIEW_PAGE_URL } from '../configs';
+import { dragAndDrop, getBoundingBox, getTimeGridLineSelector } from '../utils';
+
+// Regression test for #1228
+test.describe('Moving events with week.hourStart option', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(WEEK_VIEW_PAGE_URL);
+  });
+
+  test('it should be able to move an event when the week.hourStart option is set', async ({
+    page,
+  }) => {
+    // Given
+    await page.evaluate(() => {
+      window.$cal.setOptions({
+        week: {
+          hourStart: 4,
+        },
+      });
+    });
+    const targetHourTextToMove = '08:00';
+    const targetEventLocator = page.locator('text=/short time event/');
+    const targetRowLocator = page.locator(getTimeGridLineSelector(targetHourTextToMove));
+    const { y: rowY } = await getBoundingBox(targetRowLocator);
+    const { x: eventX } = await getBoundingBox(targetEventLocator);
+
+    // When
+    await dragAndDrop({
+      page,
+      sourceLocator: targetEventLocator,
+      targetLocator: targetRowLocator,
+      options: {
+        targetPosition: {
+          x: eventX + 10,
+          y: 10,
+        },
+      },
+    });
+
+    // Then
+    const eventBoundingBoxAfterMoving = await getBoundingBox(targetEventLocator);
+    expect(eventBoundingBoxAfterMoving.y).toBeCloseTo(rowY, -1);
+
+    const parentText = await targetEventLocator.evaluate((el) => el?.parentElement?.textContent);
+    expect(parentText).toContain(targetHourTextToMove);
+  });
+});

apps/calendar/src/hooks/timeGrid/useTimeGridEventMove.ts

@@ -15,8 +15,8 @@ import type { CalendarState } from '@t/store';
 
 const THIRTY_MINUTES = 30;
 
-function getCurrentIndexByTime(time: TZDate) {
-  const hour = time.getHours();
+function getCurrentIndexByTime(time: TZDate, hourStart: number) {
+  const hour = time.getHours() - hourStart;
   const minutes = time.getMinutes();
 
   return hour * 2 + Math.floor(minutes / THIRTY_MINUTES);
@@ -38,14 +38,15 @@ function getMovingEventPosition({
   const rowHeight = timeGridDataRows[0].height;
   const maxHeight = rowHeight * timeGridDataRows.length;
   const millisecondsDiff = rowDiff * MS_PER_THIRTY_MINUTES + columnDiff * MS_PER_DAY;
+  const hourStart = Number(timeGridDataRows[0].startTime.split(':')[0]);
 
   const { goingDuration = 0, comingDuration = 0 } = draggingEvent.model;
   const goingStart = addMinutes(draggingEvent.getStarts(), -goingDuration);
   const comingEnd = addMinutes(draggingEvent.getEnds(), comingDuration);
   const nextStart = addMilliseconds(goingStart, millisecondsDiff);
   const nextEnd = addMilliseconds(comingEnd, millisecondsDiff);
-  const startIndex = getCurrentIndexByTime(nextStart);
-  const endIndex = getCurrentIndexByTime(nextEnd);
+  const startIndex = Math.max(getCurrentIndexByTime(nextStart, hourStart), 0);
+  const endIndex = Math.min(getCurrentIndexByTime(nextEnd, hourStart), timeGridDataRows.length - 1);
 
   const isStartAtPrevDate = nextStart.getDate() < currentDate.getDate();
   const isEndAtNextDate = nextEnd.getDate() > currentDate.getDate();

apps/calendar/stories/e2e/week.stories.tsx

@@ -46,6 +46,18 @@ ReadOnly.args = {
   },
 };
 
+export const HourStartOption = Template.bind({});
+HourStartOption.args = {
+  ...Template.args,
+  options: {
+    ...Template.args.options,
+    week: {
+      hourStart: 4,
+      showNowIndicator: false,
+    },
+  },
+};
+
 export const DifferentPrimaryTimezone = Template.bind({});
 DifferentPrimaryTimezone.args = {
   ...Template.args,