Calendar: Popup from calendar widget to be resized #580

Calendar: Improve event layout and positioning
1CRM · Jan 31, 2025 · 2e66b44 · 2e66b44
1 parent 1dd1995
commit 2e66b44
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
   }