feat: Show midnight-spanning events in the following day column (#271)

Author: vicdotexe

.github/workflows/build-and-test.yml

@@ -38,7 +38,7 @@ jobs:
       contents: write
 
     steps:
-      - uses: fastify/github-action-merge-dependabot@v3.10.1
+      - uses: fastify/github-action-merge-dependabot@v3.11.0
 
   dry-release:
     if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' && (github.event_name == 'pull_request' || github.event_name == 'merge_group')

dev/App.vue

@@ -110,7 +110,7 @@ const events = ref<CalendarEvent[]>(
       endDate,
       description: randomText(),
       color: randomColor(),
-      readonly: true,
+      readonly: false,
     };
   })
 );

package-lock.json

@@ -7,12 +7,12 @@
   ],
   "main": "./dist/time-blocks-vue.umd.cjs",
   "module": "./dist/time-blocks-vue.js",
+  "styles": "./dist/time-blocks-vue.css",
   "exports": {
-    ".": {
-      "import": "./dist/time-blocks-vue.js",
-      "require": "./dist/time-blocks-vue.umd.cjs"
-    },
-    "./style.css": "./dist/style.css"
+    ".": "./dist/time-blocks-vue.js",
+    "./*": "./dist/*",
+    "./styles": "./dist/time-blocks-vue.css",
+    "./styles.css": "./dist/time-blocks-vue.css"
   },
   "types": "./dist/src/index.d.ts",
   "scripts": {
@@ -29,17 +29,17 @@
     "vue": "^3.3.12"
   },
   "devDependencies": {
-    "@types/node": "^22.5.0",
-    "@vitejs/plugin-vue": "5.1.2",
+    "@types/node": "^22.10.3",
+    "@vitejs/plugin-vue": "5.2.1",
     "@vue/eslint-config-typescript": "13.0.0",
-    "eslint": "8.57.0",
-    "sass": "^1.77.8",
-    "eslint-plugin-vue": "9.27.0",
-    "semantic-release": "^24.1.0",
+    "eslint": "8.57.1",
+    "sass": "^1.83.0",
+    "eslint-plugin-vue": "9.32.0",
+    "semantic-release": "^24.2.0",
     "typescript": "^5.4.5",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.2",
-    "vitepress": "^1.3.4",
-    "vue-tsc": "^2.0.29"
+    "unplugin-vue-components": "^0.27.5",
+    "vite": "^6.0.6",
+    "vitepress": "^1.5.0",
+    "vue-tsc": "^2.1.10"
   }
 }

package.json

@@ -29,6 +29,7 @@
       :intervalHeight="intervalHeight"
       :intervalMinutes="intervalMinutes"
       :concurrencyMode="concurrencyMode"
+      :column-date="date"
       @event-mousedown="(h: 'top' | 'bottom' | 'body') => emits('event-mousedown', event, h)"
       @event-mouseup="emits('event-mouseup')"
       @event-clicked="emits('event-clicked', event)"
@@ -51,7 +52,7 @@
 import DayEvent from "./DayEvent.vue";
 import { $CalendarEvent } from "../types/interfaces";
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { isSameDay, isToday } from "date-fns";
+import { isSameDay, isAfter } from "date-fns";
 import {
   calculatePositions,
   processConcurrency,
@@ -89,7 +90,11 @@ onUnmounted(() => {
 const isDateToday = computed(() => isSameDay(now.value, props.date));
 
 const filteredEvents = computed(() => {
-  let filtered = props.events.filter((e) => isSameDay(e.startDate, props.date));
+  let filtered = props.events.filter(
+    (e) =>
+      isSameDay(e.startDate, props.date) ||
+      (isSameDay(e.endDate, props.date) && isAfter(e.endDate, props.date))
+  );
   return props.concurrencyMode == "stack"
     ? processConcurrency(filtered)
     : calculatePositions(filtered);

src/components/Day.vue

@@ -54,7 +54,7 @@
     </div>
 
     <div
-      v-if="!event.readonly"
+      v-if="!event.readonly && !restrictStart"
       style="
         top: 0px;
         position: absolute;
@@ -67,7 +67,7 @@
       @mousedown.stop="onMouseDown('top')"
     />
     <div
-      v-if="!event.readonly"
+      v-if="!event.readonly && !restrictEnd"
       style="
         bottom: 0px;
         position: absolute;
@@ -118,7 +118,14 @@
 </template>
 
 <script setup lang="ts">
-import { format, differenceInMinutes } from "date-fns";
+import {
+  format,
+  differenceInMinutes,
+  isSameDay,
+  endOfDay,
+  startOfDay,
+  addMinutes,
+} from "date-fns";
 import { $CalendarEvent } from "../types/interfaces";
 import {
   computed,
@@ -154,6 +161,7 @@ const emits = defineEmits<{
 
 const props = defineProps<{
   event: $CalendarEvent;
+  columnDate: Date;
 }>();
 
 watch(hovering, (v) => {
@@ -176,19 +184,47 @@ onUnmounted(() => {
   removeEventListener("wheel", onMouseWheel);
 });
 
+const minutesPastMidnight = computed(() =>
+  differenceInMinutes(props.event.endDate, endOfDay(props.columnDate))
+);
+
+const spansMidnight = computed(
+  () => !isSameDay(props.event.startDate, props.event.endDate)
+);
+
+const restrictStart = computed(
+  () => spansMidnight.value && isSameDay(props.event.endDate, props.columnDate)
+);
+
+const restrictEnd = computed(
+  () => minutesPastMidnight.value > config.value.hoursPastMidnight * 60
+);
+
 const zIndex = computed(() => (bringToFront.value ? 99 : props.event.zIndex));
 
 const top = computed(() => {
   return Math.round(
-    (props.event.startDate.getHours() * 60 +
-      props.event.startDate.getMinutes()) *
-      (config.value.intervalHeight / config.value.intervalMinutes)
+    restrictStart.value
+      ? 0
+      : (props.event.startDate.getHours() * 60 +
+          props.event.startDate.getMinutes()) *
+          (config.value.intervalHeight / config.value.intervalMinutes)
   );
 });
 
 const height = computed(() => {
-  let h =
-    differenceInMinutes(props.event.endDate, props.event.startDate) *
+  const start = restrictStart.value
+    ? startOfDay(props.event.endDate)
+    : props.event.startDate;
+  const end = restrictEnd.value
+    ? addMinutes(
+        endOfDay(props.event.startDate),
+        Math.min(minutesPastMidnight.value, config.value.hoursPastMidnight * 60)
+      )
+    : props.event.endDate;
+
+  const h =
+    differenceInMinutes(end, start) *
     (config.value.intervalHeight / config.value.intervalMinutes);
   return Math.max(h, config.value.intervalHeight * 0.5);
 });
@@ -234,9 +270,6 @@ function onMouseMove(e: MouseEvent) {
 
 function onMouseDown(handle: "top" | "bottom" | "body") {
   showTooltip.value = false;
-  if (props.event.readonly === true) {
-    return;
-  }
   document.addEventListener("mouseup", onMouseUp);
   emits("event-mousedown", handle);
 }
@@ -303,6 +336,7 @@ const tooltipOffset = ref(0);
 .event-card:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.15);
 }
+
 .event-card-root > * {
   box-sizing: border-box;
   width: 100%;