1 files changed, 68 insertions, 9 deletions
diff --git a/src/client/views/nodes/calendarBox/CalendarBox.tsx b/src/client/views/nodes/calendarBox/CalendarBox.tsx
index 92b3224e9..a4183a11a 100644
--- a/src/client/views/nodes/calendarBox/CalendarBox.tsx
+++ b/src/client/views/nodes/calendarBox/CalendarBox.tsx
@@ -298,15 +298,74 @@ export class CalendarBox extends CollectionSubView() {
                         ev.preventDefault();
                     });
                 }}
+
+                // for dragging and dropping (mirror)
+
+                eventDragStart={(arg) => {
+                    const mirror = arg.el.cloneNode(true) as HTMLElement;
+                    const rect = arg.el.getBoundingClientRect();
+
+                    mirror.style.position = 'fixed';
+                    mirror.style.pointerEvents = 'none';
+                    mirror.style.opacity = '0.8';
+                    mirror.style.zIndex = '10000';
+                    mirror.classList.add('custom-drag-mirror');
+                    mirror.style.width = `${rect.width}px`;
+                    mirror.style.height = `${rect.height}px`;
+                  
+                    document.body.appendChild(mirror);
+                  
+                    const moveListener = (ev: MouseEvent) => {
+                      mirror.style.left = `${ev.clientX}px`;
+                      mirror.style.top = `${ev.clientY}px`;
+                    };
+                  
+                    window.addEventListener('mousemove', moveListener);
+
+                    // hide the actual box
+                    arg.el.style.visibility = 'hidden';
+                    arg.el.style.opacity = '0';
+                  
+                    (arg.el as any)._mirrorElement = mirror;
+                    (arg.el as any)._moveListener = moveListener;
+                }}
+                
+                eventDragStop={(arg) => {
+                    const el = arg.el as any;
+                    const mirror = el._mirrorElement;
+                    const moveListener = el._moveListener;
+
+                    // show the actual box
+                    el.style.visibility = 'visible';
+                    el.style.opacity = '1';
+                    
+                    if (mirror) document.body.removeChild(mirror);
+                    if (moveListener) window.removeEventListener('mousemove', moveListener);
+                }}
+                  
             />
         );
     }
 
     render() {
+        const scale = this._props.ScreenToLocalTransform().Scale;
+        const scaledWidth = this._props.PanelWidth();
+        const scaledHeight = this._props.PanelHeight();
+
         return (
             <div
                 key={this.calendarViewType}
                 className={`calendarBox${this._props.isContentActive() ? '-interactive' : ''}`}
+                style={{
+                    width: scaledWidth,
+                    height: scaledHeight,
+                    overflow: 'hidden',
+                    position: 'relative',
+                  }}
+                ref={r => {
+                    this.createDashEventsTarget(r);
+                    this.fixWheelEvents(r, this._props.isContentActive);
+                }}
                 onPointerDown={e => {
                     setTimeout(
                         action(() => {
@@ -317,17 +376,17 @@ export class CalendarBox extends CollectionSubView() {
                             if (cname.includes('timeGridDay')) this.dataDoc[this.calTypeFieldKey] = 'timeGridDay';
                         })
                     );
-                }}
-                style={{
-                    width: this._props.PanelWidth() / this._props.ScreenToLocalTransform().Scale,
-                    height: this._props.PanelHeight() / this._props.ScreenToLocalTransform().Scale,
-                    transform: `scale(${this._props.ScreenToLocalTransform().Scale})`,
-                }}
-                ref={r => {
-                    this.createDashEventsTarget(r);
-                    this.fixWheelEvents(r, this._props.isContentActive);
                 }}>
+                <div
+                    style={{
+                        transform: `scale(${scale})`,
+                        transformOrigin: 'top left',
+                        width: scaledWidth / scale,
+                        height: scaledHeight / scale,
+                    }}
+                >
                 {this.renderCalendar}
+                </div>
             </div>
         );
     }