From 2e66b4441fd453f378ed464dc8caa50f4ad16b25 Mon Sep 17 00:00:00 2001
From: ivan-b <ivan.bibik@gmail.com>
Date: Fri, 31 Jan 2025 20:02:39 +0300
Subject: [PATCH] Calendar: Popup from calendar widget to be resized #580

Calendar: Improve event layout and positioning
---
 .../src/components/Calendar/daycolumn.ts      | 34 ++++++++++++++++---
 packages/oceanfront/src/lib/calendar/index.ts |  2 ++
 .../src/lib/calendar/layout/columns.ts        |  3 ++
 .../src/lib/calendar/layout/stack.ts          |  3 ++
 packages/oceanfront/src/scss/_calendar.scss   |  2 +-
 5 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/oceanfront/src/components/Calendar/daycolumn.ts b/packages/oceanfront/src/components/Calendar/daycolumn.ts
index 58540b30..12e33455 100644
--- a/packages/oceanfront/src/components/Calendar/daycolumn.ts
+++ b/packages/oceanfront/src/components/Calendar/daycolumn.ts
@@ -94,6 +94,8 @@ export default defineComponent({
       selectionStart: 0,
       selectionEnd: 0,
       selectionCategory: '',
+      dayEl: undefined as HTMLElement | undefined,
+      eventMaxWidth: 250,
       allDayPopups: {
         active: {},
         closeTimerId: {},
@@ -203,6 +205,9 @@ export default defineComponent({
       return [start, end]
     }
   },
+  mounted: function () {
+    this.$data.dayEl = this.$refs.dayEl as HTMLElement | undefined
+  },
   methods: {
     intervals() {
       const [start, end] = this.hoursInterval
@@ -309,7 +314,8 @@ export default defineComponent({
             style: {
               'background-color': finalColor,
               width: 'calc(' + (e.daysSpan || 1) * 100 + '% - 4px)',
-              top: '' + e.top * eventHeight + 'px'
+              top: '' + e.top * eventHeight + 'px',
+              'max-width': this.$data.eventMaxWidth + 'px'
             },
             tabindex: '0',
             onClick: (event: any) => {
@@ -660,6 +666,24 @@ export default defineComponent({
           this.$props.eventClass?.(e.event) ??
           (e.event.class ? { [e.event.class]: true } : {})
         const finalEvent = { ...e.event, color: finalColor }
+
+        const eventsGap = 3
+        const dayWidth =
+          this.$data.dayEl?.getBoundingClientRect().width ??
+          this.$data.eventMaxWidth
+        const columnsNum = 1 / e.width
+        const maxWidth = columnsNum * this.$data.eventMaxWidth < dayWidth
+        const left = maxWidth
+          ? this.$data.eventMaxWidth * e.columnNum +
+            e.columnNum * eventsGap +
+            'px'
+          : this.$props.layout === 'stack'
+            ? e.left * 100 + '%'
+            : 'calc(' + e.left * 100 + '% + ' + eventsGap + 'px)'
+        const width = maxWidth
+          ? this.$data.eventMaxWidth - eventsGap + 'px'
+          : 'calc(' + (e.width * 100 + '% - ' + eventsGap) + 'px)'
+
         return h(
           'div',
           {
@@ -670,10 +694,11 @@ export default defineComponent({
               'two-lines': brk
             },
             style: {
+              'max-width': this.$data.eventMaxWidth + 'px',
               'background-color': finalColor,
               'z-index': e.zIndex,
-              left: e.left * 100 + '%',
-              width: 'calc(' + e.width * 100 + '% - 4px)',
+              left,
+              width,
               top: 'calc(' + e.top + '% + 1px)',
               height: 'calc(' + e.height + '% - 3px)',
               'min-height': 'calc(' + e.height + '% - 3px)'
@@ -738,7 +763,8 @@ export default defineComponent({
         'div',
         {
           class: ['of-calendar-day', weekDayCls],
-          ...this.intervalSelectionHandlers(cat)
+          ...this.intervalSelectionHandlers(cat),
+          ref: 'dayEl'
         },
         [...intervals, ...events]
       )
diff --git a/packages/oceanfront/src/lib/calendar/index.ts b/packages/oceanfront/src/lib/calendar/index.ts
index 93d332cf..43384db5 100644
--- a/packages/oceanfront/src/lib/calendar/index.ts
+++ b/packages/oceanfront/src/lib/calendar/index.ts
@@ -234,6 +234,7 @@ export function getGroups(
     width: 0,
     left: 0,
     columns: 1,
+    columnNum: 0,
     offset: 0,
     zIndex: 0,
     columnAdjust: 0,
@@ -388,6 +389,7 @@ export type CalendarEventPlacement = {
   left: number
   columns: number
   columnAdjust: number
+  columnNum: number
   offset: number
   zIndex: number
   conflict: boolean
diff --git a/packages/oceanfront/src/lib/calendar/layout/columns.ts b/packages/oceanfront/src/lib/calendar/layout/columns.ts
index 869c9fb7..65584ba4 100644
--- a/packages/oceanfront/src/lib/calendar/layout/columns.ts
+++ b/packages/oceanfront/src/lib/calendar/layout/columns.ts
@@ -44,11 +44,14 @@ export default function layout(
   })
   const colWidth = 1.0 / columns.length
   let left = 0
+  let i = 0
   for (const c of columns) {
     for (const p of c.placements) {
       p.left = left
       p.width = colWidth * p.columns
+      p.columnNum = i
     }
     left += colWidth
+    i++
   }
 }
diff --git a/packages/oceanfront/src/lib/calendar/layout/stack.ts b/packages/oceanfront/src/lib/calendar/layout/stack.ts
index f04823d6..b897a0c1 100644
--- a/packages/oceanfront/src/lib/calendar/layout/stack.ts
+++ b/packages/oceanfront/src/lib/calendar/layout/stack.ts
@@ -105,13 +105,16 @@ export default function layout(
 
   const colWidth = 1.0 / columns.length
   let left = 0
+  let i = 0
   for (const c of columns) {
     for (const p of c.placements) {
       const offset = 0.05 * p.offset
       const nColumns = p.columns + p.columnAdjust
       p.left = left - p.columnAdjust * colWidth + offset
       p.width = colWidth * nColumns - offset
+      p.columnNum = i
     }
     left += colWidth
+    i++
   }
 }
diff --git a/packages/oceanfront/src/scss/_calendar.scss b/packages/oceanfront/src/scss/_calendar.scss
index 946f5fc7..c0fb7cd1 100644
--- a/packages/oceanfront/src/scss/_calendar.scss
+++ b/packages/oceanfront/src/scss/_calendar.scss
@@ -341,7 +341,7 @@ div.of-date-picker-cur-year {
   box-sizing: border-box;
   padding-left: 2px;
   padding-right: 2px;
-  max-width: 250px;
+  min-width: 30px;
   &.conflict {
     border-left: solid 2px var(--of-calendar-conflict-color, red);
   }