funda-ui 4.4.15 → 4.5.12

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -11,7 +11,7 @@ import {
 } from 'funda-utils/dist/cjs/getElementProperty';
 import { getTodayDate, getCalendarDate, isValidDate, padZero, getDateDetails, getMonthDates, getWeekDatesFromMon  } from 'funda-utils/dist/cjs/date';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
+import getOs from 'funda-utils//dist/cjs/os';
 
 
 
@@ -108,8 +108,10 @@ export type EventCalendarTimelineProps = {
     onCellMouseLeave?: (el: any) => void;
     onCellMouseUp?: (el: any, selectedCellsData: any[]) => void;
     onCellClick?: (el: any, cellData: any) => void;
+    onCellDoubleClick?: (el: any, cellData: any) => void;
     onKeyPressed?: (el: any, selectedCellsData: any[]) => void;
-    
+    onKeyCopy?: (el: any, selectedCellsData: any[]) => void;
+    onKeyPaste?: (el: any, selectedCellsData: any[]) => void;
 
     // table
     tableListSectionTitle?: string | React.ReactNode;
@@ -194,7 +196,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         onCellMouseLeave,
         onCellMouseUp,
         onCellClick,
+        onCellDoubleClick,
         onKeyPressed,
+        onKeyCopy,
+        onKeyPaste,
 
         //
         tableListSectionTitle,
@@ -229,13 +234,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         const day = date.getDate();
         return month + ' ' + day;
     };
+    const START_WEEK_ON = 1; // represents "Monday/1" in JavaScript
 
     // orginal data
-    const [val, setVal] = useState<TimelineRowListConfig[]>([]);
+    const [orginalData, setOrginalData] = useState<TimelineRowListConfig[]>([]);
 
     //
     const FILL_BLANK_DATE_DISABLD = typeof forwardAndBackFillDisabled === 'undefined' ? true : forwardAndBackFillDisabled;
 
+    // root
+    const rootRef = useRef<any>(null);
+    const rootWidth = useRef<number>(0);
+
     //
     const now = useMemo(() => new Date(), []);
     const [date, setDate] = useState<Date>(now);
@@ -256,6 +266,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const [winMonth, setWinMonth] = useState<boolean>(false);
 
     // modal dialog
+    const modalEditHandleRef = useRef<any>();
+    const modalDeleteHandleRef = useRef<any>();
     const EVENTS_ENABLED = typeof modalContent !== 'undefined';
     const EVENTS_DELETE_ENABLED = typeof modalDeleteContent !== 'undefined';
     const [showEdit, setShowEdit] = useState<boolean>(false);
@@ -272,6 +284,11 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const scrollBodyRef = useRef(null);
     const scrollListRef = useRef(null);
 
+    // Temporary date
+    const [tempDate, setTempDate] = useState<string>('');
+
+
+
     // Open temporary storage for pop-ups
     const [tableRowNum, setTableRowNum] = useState<number>(-1);
     const [tableCellId, setTableCellId] = useState<number>(-1);
@@ -288,6 +305,22 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const [appearanceMode, setAppearanceMode] = useState<string>(appearance);
 
 
+    const findMondayAndTruncate = (dates: string[]) => {
+        const _res = dates.map((s: string) => new Date(s));
+        // Find the first Monday in the sequence
+        for (let i = 0; i < _res.length; i++) {
+            const date = _res[i];
+            if (date.getDay() === START_WEEK_ON) {
+                // Return dates starting from Monday onwards
+                return dates.slice(i);
+            }
+        }
+
+        return [];  // Return empty array if no Monday found
+    }
+
+
+
     // exposes the following methods
     useImperativeHandle(
         contentRef,
@@ -304,12 +337,17 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             resetSelectedCells: () => {
                 // reset selection area
                 setSelectedCells([]);
+                setCopiedCells(null);
+            },
+            closeModal: () => {
+                if (modalEditHandleRef.current) modalEditHandleRef.current.close();
+                if (modalDeleteHandleRef.current) modalDeleteHandleRef.current.close();
             }
         }),
         [contentRef],
     );
 
-    
+
 
     //================================================================
     // Monthly calendar
@@ -342,10 +380,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const [isSelecting, setIsSelecting] = useState<boolean>(false);
     const [selectedCells, setSelectedCells] = useState<any[]>([]);
     const [startCell, setStartCell] = useState<any>(null);
-    function handleTableMainMouseUp(e: React.MouseEvent) {
-        setIsSelecting(false);
-    }
-
 
     // Determine whether it is a selected cell
     const isCellSelected = (row: number, col: number) => {
@@ -353,10 +387,50 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     };
 
 
-    // Selecting now
-    function handleTableMainCellMouseEnter(e: React.MouseEvent, row: number, col: number) {
+    // Start selecting
+    const handleTableMainCellMouseDown = (e: React.MouseEvent, row: number, col: number, colsOffset: number) => {
+        const isMultiSelect = e.ctrlKey || e.metaKey; // Check whether the Ctrl or Command key is pressed
+
+        setIsSelecting(true);
+        setStartCell({ row, col });
+
         const _el: any = e.currentTarget;
 
+        setIsSelecting(true);
+        setStartCell({ row, col });
+
+        setSelectedCells((prevSelectedCells: any[]) => {
+            if (isMultiSelect) {
+                // Multi-select mode: Add or remove cells
+                //++++++++++
+                const cellExists = prevSelectedCells.some(({ row: r, col: c }) => r === row && c === col);
+                if (cellExists) {
+                    return prevSelectedCells.filter(({ row: r, col: c }) => !(r === row && c === col));
+                } else {
+                    return [...prevSelectedCells, {
+                        rowData: JSON.parse(_el.dataset.rowinfo),
+                        date: _el.dataset.date,
+                        row: row,
+                        col: col
+                    }];
+                }
+            } else {
+                // Radio Mode: Clear the previous selection, select only the current cell
+                //++++++++++
+                return [{
+                    rowData: JSON.parse(_el.dataset.rowinfo),
+                    date: _el.dataset.date,
+                    row: row,
+                    col: col
+                }];
+            }
+        });
+
+    };
+
+    // Selecting now
+    const handleTableMainCellMouseEnter = (e: React.MouseEvent, row: number, col: number, colsOffset: number) => {
+
         if (isSelecting && startCell) {
 
             //########## MODE: WEEK #############
@@ -377,14 +451,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             const [minRow, maxRow] = [startCell.row, row].sort((a, b) => a - b);
             const [minCol, maxCol] = [startCell.col, col].sort((a, b) => a - b);
 
+
             for (let r = minRow; r <= maxRow; r++) {
                 for (let c = minCol; c <= maxCol; c++) {
 
                     // query date and row data
-                    const curRowData: any = val[r];
+                    const curRowData: any = orginalData[r];
                     newSelectedCells.push({
                         rowData: curRowData?.listSection,
-                        date: curDateList[c],
+                        date: curDateList[c - colsOffset],
                         row: r,
                         col: c
                     });
@@ -392,24 +467,133 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             }
             setSelectedCells(newSelectedCells);
         }
-    }
+    };
 
     // Stop selecting
-    function handleTableMainCellMouseDown(e: React.MouseEvent, row: number, col: number) {
-        const _el: any = e.currentTarget;
+    const handleTableMainMouseUp = (e: React.MouseEvent) => {
+        setIsSelecting(false);
+    };
+
+    //================================================================
+    // Copy & Paste
+    //================================================================    
+    const [copiedCells, setCopiedCells] = useState<{
+        structure: {
+            rows: number,
+            cols: number
+        },
+        offset: { row: number, col: number },
+        cells: any[]
+    } | null>(null);
+
+    const handleWrapperKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const isMac = getOs().isOSX;
+
+        //########## MODE: WEEK #############
+        let curDateList: any[] = [];
+        if (appearanceMode === 'week') {
+            curDateList = weekDates.map((v: Date) => getCalendarDate(v));
+        }
+        //########## /MODE: WEEK #############
+
+        //########## MODE: MONTH #############
+        if (appearanceMode === 'month') {
+            curDateList = getMonthDates(year, month + 1);
+        }
+        //########## /MODE: MONTH #############
+
+
+        // Listen for copy
+        if ((isMac && e.metaKey && e.key === 'c') || (!isMac && e.ctrlKey && e.key === 'c')) {
+
+            if (selectedCells.length > 0) {
+                // Gets the structure of the selected area
+                const _selectedCellsCoordinates = selectedCells.map(({ row: r, col: c }) => {
+                    return [r, c];
+                });
+
+                const [minRow, maxRow] = _selectedCellsCoordinates.reduce(
+                    ([min, max], [r]) => [Math.min(min, r), Math.max(max, r)],
+                    [Infinity, -Infinity]
+                );
+                const [minCol, maxCol] = _selectedCellsCoordinates.reduce(
+                    ([min, max], [_, c]) => [Math.min(min, c), Math.max(max, c)],
+                    [Infinity, -Infinity]
+                );
+
+                /*
+                [Be equal to:]
+
+                // Suppose _selectedCellsCoordinates is an array of selected cells, each of which is in the form of [row, col].
+                let minRow = Infinity;
+                let maxRow = -Infinity;
+                let minCol = Infinity;
+                let maxCol = -Infinity;
+
+                for (const [row, col] of _selectedCellsCoordinates) {
+                    if (row < minRow) minRow = row;
+                    if (row > maxRow) maxRow = row;
+                    if (col < minCol) minCol = col;
+                    if (col > maxCol) maxCol = col;
+                }
+                */
+
+                // Calculate the offset and adjust the cell coordinates
+                const adjustedCells = _selectedCellsCoordinates.map(([r, c]) => [r - minRow, c - minCol]);
+
+                // The copy result is independent of the data
+                setCopiedCells({
+                    structure: {
+                        rows: maxRow - minRow + 1,
+                        cols: maxCol - minCol + 1
+                    },
+                    offset: { row: minRow, col: minCol },
+                    cells: adjustedCells
+                });
+
+
+                //
+                onKeyCopy?.(e, selectedCells);
+
+            }
+
+        }
+
+        // Listen for paste
+        if ((isMac && e.metaKey && e.key === 'v') || (!isMac && e.ctrlKey && e.key === 'v')) {
+
+
+            if (copiedCells && selectedCells.length > 0) {
+                const { rowsTotal, colsTotal, forwardFillTotal } = getCells();
+                const { row: targetRow, col: targetCol } = selectedCells[0]; // the first position
+                const newSelectedCellsCoordinates = copiedCells.cells.map(([r, c]) => [
+                    targetRow + r,
+                    targetCol + c
+                ]).filter(([r, c]) => r < rowsTotal && c < colsTotal); // Make sure you don't go beyond the scope of the table
+
+                // query date and row data
+                const newSelectedCells: any[] = [];
+                newSelectedCellsCoordinates.forEach((item: any[]) => {
+                    const [r, c] = item;
+                    const curRowData: any = orginalData[r];
+                    newSelectedCells.push({
+                        rowData: curRowData?.listSection,
+                        date: curDateList[c - forwardFillTotal],
+                        row: r,
+                        col: c
+                    });
+                });
+
+
+                setSelectedCells(newSelectedCells);
+
+                //
+                onKeyPaste?.(e, newSelectedCells);
+            }
+        }
+    };
 
-        setIsSelecting(true);
-        setStartCell({ row, col });
-        setSelectedCells([{
-            rowData: JSON.parse(_el.dataset.rowinfo),
-            date: _el.dataset.date,
-            row: row,
-            col: col
-        }]);
-    }
-    
 
-    
 
     //================================================================
     // Other
@@ -426,9 +610,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         {cellAddBtnLabel || ''}
     </>;
 
-
-
-
     // click outside
     useClickOutside({
         enabled: isShowTableTooltip && tableGridRef.current,
@@ -448,7 +629,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     // cell
     const getCells = (type: 'none' | 'forward' | 'back' = 'none') => {
-        
+
 
         //########## MODE: WEEK #############
         if (appearanceMode === 'week') {
@@ -456,14 +637,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             weekDates.forEach((date: Date, dayIndex: number) => {
                 const _dayOfWeek = new Date(date).getDay();
                 //                     ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
-                const _daysIndicator = [7, 1, 2, 3, 4, 5, 6]; 
+                const _daysIndicator = [7, 1, 2, 3, 4, 5, 6];
                 const _detail = getDateDetails(date);
                 const {
                     year: _temp_year,
                     month: _temp_month,
                     day: _temp_day
                 } = _detail;
-    
+
                 curWeek.push({
                     month: Number(_temp_month) - 1,
                     startDay: _daysIndicator[_dayOfWeek],
@@ -480,54 +661,59 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                         }
                     ],
                     weekDisplay: [
-                        WEEK[_daysIndicator[_dayOfWeek]-1]
+                        WEEK[_daysIndicator[_dayOfWeek] - 1]
                     ],
                     week: [
-                        _daysIndicator[_dayOfWeek]-1
+                        _daysIndicator[_dayOfWeek] - 1
                     ]
                 });
-                
+
             });
 
-            return curWeek;
-      
+            return {
+                rowsTotal: orginalData.length,
+                colsTotal: curWeek.length,
+                forwardFillTotal: 0,
+                list: curWeek
+            };
+
         }
         //########## /MODE: WEEK #############
 
-    
+
 
         //########## MODE: MONTH #############
         if (appearanceMode === 'month') {
             let currentMonth: any = month;
             let currentStartDay: any = startDay;
-    
+
             // previous month
             if (type === 'forward') {
                 const _date = new Date(year, currentMonth - 1, day);
                 currentMonth = _date.getMonth();
                 currentStartDay = getStartDayOfMonth(_date);
             }
-    
+
             // next month
             if (type === 'back') {
                 const _date = new Date(year, currentMonth + 1, day);
                 currentMonth = _date.getMonth();
                 currentStartDay = getStartDayOfMonth(_date);
             }
-    
-    
+
+
             //
             const allDays = Array(days[currentMonth] + (currentStartDay - 1)).fill(null).map((_: any, i: number) => i); // [0,1,..,30,31]
             const rows = Math.ceil(allDays.length / 7); // 5
-    
+
             //
             const _tempCells: any[] = Array.from({ length: rows }).fill(null);
-    
+
             const _getForwardFill = (_year: number, _month: number) => {
                 // Get the last day of the previous month
                 const lastDayOfLastMonth = new Date(_year, _month - 1, 0);
                 const last7Days: Date[] = [];
-    
+
                 // Rewind 7 days forward from the last day
                 for (let i = 0; i < 7; i++) {
                     last7Days.unshift(new Date(lastDayOfLastMonth));
@@ -535,118 +721,137 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                 }
                 return last7Days.map((v: Date) => getCalendarDate(v));
             };
-    
+
             const _getBackFill = (_year: number, _month: number) => {
                 // Get the first day of the next month
                 const firstDayOfNextMonth = new Date(_year, _month, 1);
                 const first7Days: Date[] = [];
-    
+
                 // Rewind 7 days forward from the first day of the next month
                 for (let i = 0; i < 7; i++) {
                     first7Days.push(new Date(firstDayOfNextMonth));
                     firstDayOfNextMonth.setDate(firstDayOfNextMonth.getDate() + 1);
                 }
-    
+
                 return first7Days.map((v: Date) => getCalendarDate(v));
             };
-        
-    
-            return _tempCells.map((_: any, j: number) => {
-                const _col = allDays.slice(j * 7, (j + 1) * 7);
-    
-                // back fill
-                const backFillArr: null[] = [];
-                for (let k = 0; k < 7 - _col.length; k++) {
-                    backFillArr.push(null);
-                }
-                _col.splice(_col.length, 0, ...backFillArr as any);
-    
-    
-                //
-                const isFirstGroup = j === 0;
-                const isLastGroup = j === _tempCells.length - 1;
-     
-    
-                // forward fill
-                const __forwardFillDate: string[] = _getForwardFill(year, month+1);
-    
-                // back fill
-                const __backFillDate: string[] = _getBackFill(year, month+1);
-    
-    
-                const _getDateShow = (_dayIndex: number, _m: number, _startDay: number, _month: number) => {
-                    const currentDay = typeof _dayIndex === 'number' ? _dayIndex - (_startDay - 2) : 0; // ..., -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, ...
-    
-                    // date
-                    let _dateShow: any = currentDay > 0 ? `${year}-${_month + 1}-${currentDay}` : '';
-    
-                    // forward & back
-                    if (isFirstGroup &&  _dateShow === '') {
-                        _dateShow = __forwardFillDate.at(currentDay-1);
+
+
+
+            // The remaining date of the previous month
+            // If the number is 7, the calendar does not include the date of the previous month
+            const remainPrevDate = findMondayAndTruncate(_getForwardFill(year, month + 1));
+            const remainPrevDateTotal = remainPrevDate.length === 7 ? 0 : remainPrevDate.length;
+
+
+            return {
+                rowsTotal: orginalData.length,
+                colsTotal: allDays.length,
+                forwardFillTotal: remainPrevDateTotal,
+                list: _tempCells.map((_: any, j: number) => {
+                    const _col = allDays.slice(j * 7, (j + 1) * 7);
+
+                    // back fill
+                    const backFillArr: null[] = [];
+                    for (let k = 0; k < 7 - _col.length; k++) {
+                        backFillArr.push(null);
                     }
-    
-                    if (isLastGroup && _dateShow === '') {
-                        _dateShow = __backFillDate.at(_m);
+                    _col.splice(_col.length, 0, ...backFillArr as any);
+
+
+                    //
+                    const isFirstGroup = j === 0;
+                    const isLastGroup = j === _tempCells.length - 1;
+
+
+                    // forward fill
+                    const __forwardFillDate: string[] = _getForwardFill(year, month + 1);
+
+                    // back fill
+                    const __backFillDate: string[] = _getBackFill(year, month + 1);
+
+
+                    const _getDateShow = (_dayIndex: number, _m: number, _startDay: number, _month: number) => {
+                        const currentDay = typeof _dayIndex === 'number' ? _dayIndex - (_startDay - 2) : 0; // ..., -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, ...
+
+                        // date
+                        let _dateShow: any = currentDay > 0 ? `${year}-${_month + 1}-${currentDay}` : '';
+
+                        // forward & back
+                        if (isFirstGroup && _dateShow === '') {
+                            _dateShow = __forwardFillDate.at(currentDay - 1);
+                        }
+
+                        if (isLastGroup && _dateShow === '') {
+                            _dateShow = __backFillDate.at(_m);
+                        }
+
+
+                        return {
+                            date: getCalendarDate(_dateShow),
+                            firstGroup: isFirstGroup,
+                            lastGroup: isLastGroup,
+                            validDisplayDate: currentDay > 0 && currentDay <= days[month]
+                        };
+
                     }
-    
-    
+
+                    //
                     return {
-                        date: getCalendarDate(_dateShow),
-                        firstGroup: isFirstGroup,
-                        lastGroup: isLastGroup,
-                        validDisplayDate: currentDay > 0 && currentDay <= days[month]
-                    };
-    
-                }
-    
-                //
-                return {
-                    month: currentMonth,
-                    startDay: currentStartDay,
-                    row: j,
-                    col: _col,
-                    dateInfo: _col.map((k: number, m: number) => {
-                        const _lastWeekDays: number = _col.filter(Boolean).length;
-                        return _getDateShow(k, m - _lastWeekDays, currentStartDay, currentMonth);
-                    }),
-                    weekDisplay: _col.map((k: number, m: number) => {
-                        return WEEK[m]
-                    }),
-                    week: _col.map((k: number, m: number) => {
-                        return m
-                    }),
-                    
-                }
-            });
+                        month: currentMonth,
+                        startDay: currentStartDay,
+                        row: j,
+                        col: _col,
+                        dateInfo: _col.map((k: number, m: number) => {
+                            const _lastWeekDays: number = _col.filter(Boolean).length;
+                            return _getDateShow(k, m - _lastWeekDays, currentStartDay, currentMonth);
+                        }),
+                        weekDisplay: _col.map((k: number, m: number) => {
+                            return WEEK[m]
+                        }),
+                        week: _col.map((k: number, m: number) => {
+                            return m
+                        }),
+
+                    }
+                })
+            };
+
+
         }
         //########## /MODE: MONTH #############
 
 
-        return [];
+        return {
+            rowsTotal: 0,
+            colsTotal: 0,
+            forwardFillTotal: 0,
+            list: []
+        };
 
 
     };
 
     const queryItemObj = () => {
-        const curRowData: any = val[tableRowNum];
+        const curRowData: any = orginalData[tableRowNum];
+        const curDate: string = tempDate !== '' ? tempDate : `${year}-${month + 1}-${day}`;
 
-   
         if (curRowData) {
             const eventSourcesData = curRowData.eventSources;
 
-            const _rowData = eventSourcesData.filter((item: any) => getCalendarDate(item.date as string) === getCalendarDate(`${year}-${month + 1}-${day}`));
+            const _rowData = eventSourcesData.filter((item: any) => getCalendarDate(item.date as string) === getCalendarDate(curDate));
 
             let _currentData: any = undefined;
             if (_rowData[0]) {
                 const _items = _rowData[0].list;
 
-                
+
                 if (tableCellId === -1) {
                     // add new
                     _currentData = {
                         rowData: curRowData.listSection,
                         id: 0,
-                        date: getCalendarDate(`${year}-${month + 1}-${day}`)
+                        date: getCalendarDate(curDate)
                     };
                 } else {
                     // edit or delete
@@ -655,10 +860,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
             }
 
-            return _rowData[0] ? _currentData: {
+            return _rowData[0] ? _currentData : {
                 rowData: curRowData.listSection,
                 id: 0,
-                date: getCalendarDate(`${year}-${month + 1}-${day}`)
+                date: getCalendarDate(curDate)
             };
         }
     };
@@ -743,7 +948,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
             // Determine whether it exceeds the far right or left side of the screen
-            const _modalContent = _tableTooltipModalRef.querySelector('.e-cal-timeline-table__cell-tooltipcontent');
+            const _modalContent = _tableTooltipModalRef.querySelector('.custom-event-tl-table__cell-tooltipcontent');
             const _modalBox = _modalContent.getBoundingClientRect();
             if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
 
@@ -858,7 +1063,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
         }
         //########## /MODE: MONTH #############
-                
+
 
     }
 
@@ -899,8 +1104,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             });
         }
         //########## /MODE: MONTH #############
-                
-        
+
+
     }
     function handleDayChange(e: React.MouseEvent, currentDay: number) {
         setDate(new Date(year, month, currentDay));
@@ -975,7 +1180,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         onChangeAppearanceMode?.(_mode);
     }
 
-    
+
 
 
     function handleShowWinYear() {
@@ -992,12 +1197,12 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     // ================================================================
 
     function generateListSectionUi() {
-        return val.map((item: any, i: number) => {
+        return orginalData.map((item: any, i: number) => {
 
             return (
                 <tr key={i} role="row" data-index={i}>
-                    <td role="gridcell" data-resource-index={i} className="e-cal-timeline-table__datagrid-cell">
-                        <div className="e-cal-timeline-table__cell-cushion e-cal-timeline-table__cell-cushion-title" dangerouslySetInnerHTML={{
+                    <td role="gridcell" data-resource-index={i} className="custom-event-tl-table__datagrid-cell">
+                        <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-title" dangerouslySetInnerHTML={{
                             __html: item.listSection.title
                         }} />
                     </td>
@@ -1013,10 +1218,11 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // colIndex
         let colIndex = 0;
 
-        return getCells().map((item: any, j: number) => {
+        const { forwardFillTotal, list: cellsList } = getCells();
+        return cellsList.map((item: any, j: number) => {
+
 
 
-           
             return item.col.map((dayIndex: number, i: number) => {
 
                 colIndex++;
@@ -1035,12 +1241,12 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                 // helper
                 const d = parseFloat(_dateDayShow);
                 const _currentData = eventSourcesData.filter((item: any) => getCalendarDate(item.date as string) === _dateShow);
-                const isLastCol = colIndex === 7 * getCells().length;
+                const isLastCol = colIndex === 7 * cellsList.length;
                 const isInteractive = item.dateInfo[i].validDisplayDate;  // The date on which the user interaction can occur, e.g. click, modify
                 const isForward = item.dateInfo[i].firstGroup && !isInteractive;
                 const isBack = item.dateInfo[i].lastGroup && !isInteractive;
-                
-                
+
+
                 // days
                 //------
                 if (!showEvents) {
@@ -1049,7 +1255,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                         return <th
                             className={combinedCls(
-                                'e-cal-timeline-table__cell-cushion-headercontent__container',
+                                'custom-event-tl-table__cell-cushion-headercontent__container',
                                 {
                                     'empty': !isInteractive,
                                     'today': d === now.getDate(),
@@ -1081,6 +1287,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                                 // reset selection area
                                 setSelectedCells([]);
+                                setCopiedCells(null);
 
 
                                 //
@@ -1099,6 +1306,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                             id: 0,
                                             date: _dateShow
                                         } : _currentData[0], () => setShowEdit(true), 'normal');
+
+                                        // set temporary date
+                                        setTempDate(_dateShow);
                                     }
                                 }
 
@@ -1111,11 +1321,11 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             }}
                         >
 
-                            
+
                             {/* forward fill & day & back fill */}
-                            <div 
+                            <div
                                 className={combinedCls(
-                                    'e-cal-timeline-table__cell-cushion e-cal-timeline-table__cell-cushion-headercontent',
+                                    'custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headercontent',
                                     {
                                         'disabled': !isInteractive
                                     }
@@ -1163,7 +1373,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                             const _eventContentTooltip = typeof cellItem.dataTooltip === 'undefined' ? '' : <>
                                 <div
-                                    className="e-cal-timeline__day__event-tooltipcontent"
+                                    className="custom-event-tl__day__event-tooltipcontent"
                                     dangerouslySetInnerHTML={{
                                         __html: cellItem.dataTooltip
                                     }}
@@ -1172,14 +1382,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                             return <div
                                 className={combinedCls(
-                                    `e-cal-timeline-table__cell-cushion-content__item e-cal-timeline-table__cell-cushion-content__item-${cellItemIndex}`,
+                                    `custom-event-tl-table__cell-cushion-content__item custom-event-tl-table__cell-cushion-content__item-${cellItemIndex}`,
                                     {
                                         'first': cellItemIndex === 0,
-                                        'last': cellItemIndex === _items.length-1
+                                        'last': cellItemIndex === _items.length - 1
                                     }
                                 )}
                                 key={`cell-item-${rowIndex}-${cellItemIndex}}`}
-                                data-overlay-id={`e-cal-timeline-table__cell-tooltipwrapper-${idRes}`}
+                                data-overlay-id={`custom-event-tl-table__cell-tooltipwrapper-${idRes}`}
                                 data-cell-item-index={cellItemIndex}
                                 data-date={_dateShow}
                                 data-day={_dateDayShow}
@@ -1230,6 +1440,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                                         if (EVENTS_ENABLED) {
                                             onModalEditOpen?.(cellItem, () => setShowEdit(true), 'normal');
+
+                                            // set temporary date
+                                            setTempDate(_dateShow);
                                         }
                                     }
                                 }}
@@ -1239,7 +1452,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                                 {/* ITEM */}
                                 <div
-                                    className="e-cal-timeline__day__event"
+                                    className="custom-event-tl__day__event"
                                     style={typeof cellItem !== 'undefined' && (cellItem as any).eventStyles !== 'undefined' ? cellItem.eventStyles : {}}
                                     dangerouslySetInnerHTML={typeof cellItem.data === 'string' ? {
                                         __html: cellItem.data
@@ -1251,12 +1464,12 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                                 {/* DELETE BUTTON */}
                                 <div
-                                    className={`e-cal-timeline__day__eventdel ${cellCloseBtnClassName || ''}`}
+                                    className={`custom-event-tl__day__eventdel ${cellCloseBtnClassName || ''}`}
                                 >
-                                    <a 
-                                        href="#" 
-                                        tabIndex={-1} 
-                                        className="align-middle" 
+                                    <a
+                                        href="#"
+                                        tabIndex={-1}
+                                        className="align-middle"
                                         data-date={_dateShow}
                                         data-day={_dateDayShow}
                                         data-week={weekDay}
@@ -1289,11 +1502,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                                                 if (EVENTS_DELETE_ENABLED) {
                                                     onModalDeleteOpen?.(_existsContent, () => setShowDelete(true));
+
+                                                    // set temporary date
+                                                    setTempDate(_dateShow);
                                                 }
                                             }
 
 
-                                            
+
                                         }}
                                     >
                                         {_delBtn()}
@@ -1305,13 +1521,13 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                         });
                     };
 
-                    
+
 
                     const _tdContent = () => {
 
                         return <td
                             className={combinedCls(
-                                'e-cal-timeline-table__cell-cushion-content__container e-cal-timeline-table__cell-tooltiptrigger',
+                                'custom-event-tl-table__cell-cushion-content__container custom-event-tl-table__cell-tooltiptrigger',
                                 {
                                     'has-event': eventSourcesData && _currentData.length > 0,
                                     'empty': !isInteractive,
@@ -1323,7 +1539,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             key={"col" + i}
                             data-index={colIndex - 1}
                             colSpan={1}
-                            data-rowinfo={JSON.stringify(val[rowIndex]?.listSection)}
+                            data-rowinfo={JSON.stringify(orginalData[rowIndex]?.listSection)}
                             data-date={_dateShow}
                             data-day={_dateDayShow}
                             data-week={weekDay}
@@ -1332,12 +1548,12 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                 onCellMouseEnter?.(e);
 
                                 //
-                                if (multipleCells) handleTableMainCellMouseEnter(e, rowIndex, dayIndex);
+                                if (multipleCells) handleTableMainCellMouseEnter(e, rowIndex, dayIndex, forwardFillTotal);
                             }}
                             onMouseDown={(e: React.MouseEvent) => {
                                 //
                                 onCellClick?.(e, {
-                                    rowData: val[rowIndex]?.listSection,
+                                    rowData: orginalData[rowIndex]?.listSection,
                                     date: _dateShow,
                                     row: rowIndex,
                                     col: dayIndex
@@ -1348,7 +1564,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                     onChangeDate?.(e, null);
                                 }
 
-                                if (multipleCells) handleTableMainCellMouseDown(e, rowIndex, dayIndex);
+
+                                if (multipleCells) handleTableMainCellMouseDown(e, rowIndex, dayIndex, forwardFillTotal);
+                            }}
+
+                            onDoubleClick={(e: React.MouseEvent) => {
+                                //
+                                onCellDoubleClick?.(e, {
+                                    rowData: orginalData[rowIndex]?.listSection,
+                                    date: _dateShow,
+                                    row: rowIndex,
+                                    col: dayIndex
+                                });
                             }}
                             onMouseLeave={(e: React.MouseEvent) => {
                                 onCellMouseLeave?.(e);
@@ -1360,29 +1587,29 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                             {/* forward fill & day & back fill */}
-                            <div 
+                            <div
                                 className={combinedCls(
-                                    'e-cal-timeline-table__cell-cushion e-cal-timeline-table__cell-cushion-content',
+                                    'custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-content',
                                     {
                                         'disabled': !isInteractive
                                     }
                                 )}
                                 style={{ width: (CELL_MIN_W - 1) + 'px' }}
                             >
-                        
+
                                 {/*++++++++++++++++ EVENT ++++++++++++++++*/}
-                                {_eventContent() || <><i style={{userSelect: 'none'}}>&nbsp;</i></>}
+                                {_eventContent() || <><i style={{ userSelect: 'none' }}>&nbsp;</i></>}
                                 {/*++++++++++++++++ /EVENT ++++++++++++++++*/}
 
                                 {/* ADD BUTTON */}
                                 {isForward || isBack ? null : <>
                                     <div
-                                        className={`e-cal-timeline__day__eventadd ${cellAddBtnClassName || ''}`}
+                                        className={`custom-event-tl__day__eventadd ${cellAddBtnClassName || ''}`}
                                     >
-                                        <a 
-                                            href="#" 
-                                            tabIndex={-1} 
-                                            className="align-middle" 
+                                        <a
+                                            href="#"
+                                            tabIndex={-1}
+                                            className="align-middle"
                                             data-date={_dateShow}
                                             data-day={_dateDayShow}
                                             data-week={weekDay}
@@ -1413,6 +1640,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                                             id: 0,
                                                             date: _dateShow
                                                         }, () => setShowEdit(true), 'new');
+
+                                                        // set temporary date
+                                                        setTempDate(_dateShow);
+
                                                     }
                                                 }
                                             }}
@@ -1424,7 +1655,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                 </>}
                                 {/* /ADD BUTTON */}
                             </div>
-                            
+
 
                         </td>;
                     };
@@ -1448,7 +1679,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     function generateColUi() {
 
-        {/* //########## MODE: WEEK ############# */}
+        {/* //########## MODE: WEEK ############# */ }
         if (appearanceMode === 'week') {
             return Array.from({ length: 7 }).fill(0).map((item: any, i: number) => {
                 return (
@@ -1463,10 +1694,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             })
         }
 
-        {/* //########## /MODE: WEEK ############# */}
+        {/* //########## /MODE: WEEK ############# */ }
 
 
-        {/* //########## MODE: MONTH ############# */}
+        {/* //########## MODE: MONTH ############# */ }
         if (appearanceMode === 'month') {
             if (FILL_BLANK_DATE_DISABLD) {
                 return Array.from({ length: days[month] }).fill(0).map((item: any, i: number) => {
@@ -1485,14 +1716,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                 // colIndex
                 let colIndex = 0;
 
-                return getCells().map((item: any, j: number) => {
+                const { forwardFillTotal, list: cellsList } = getCells();
+                return cellsList.map((item: any, j: number) => {
                     return item.col.map((dayIndex: number | null, i: number) => {
 
                         colIndex++;
 
                         // helper
                         const isInteractive = item.dateInfo[i].validDisplayDate;  // The date on which the user interaction can occur, e.g. click, modify
-                
+
                         return (
                             <col
                                 className={combinedCls(
@@ -1512,9 +1744,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                 })
-            } 
+            }
         }
-        {/* //########## /MODE: MONTH ############# */}
+        {/* //########## /MODE: MONTH ############# */ }
 
 
 
@@ -1574,10 +1806,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         if (tableGridRef.current === null) return;
 
         const tableGridEl: any = tableGridRef.current;
-       
+
         // initialize cell height
-        const headerTitleTrElements = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__title tbody').getElementsByTagName('tr');
-        const trElements = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__content tbody').getElementsByTagName('tr');
+        const headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
+        const trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
 
         for (let i = 0; i < headerTitleTrElements.length; i++) {
 
@@ -1589,22 +1821,34 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         }
 
     }
+   
+
+    function outerWrapperInit() {
+        if (rootRef.current === null) return;
+
+        // calculate wrapper width 
+        const wrapperWidth = rootRef.current.parentElement?.offsetWidth || 0;
+        if (rootRef.current && wrapperWidth > 0 && rootWidth.current === 0) {
+            rootWidth.current = wrapperWidth;
+            rootRef.current.style.width = wrapperWidth + 'px';
+        }
+    }
+
 
-    
     function tableGridInit() {
 
         //
         if (tableGridRef.current === null) return;
 
+        const { forwardFillTotal, list: cellsList } = getCells();
         const tableGridEl: any = tableGridRef.current;
         let _curCellMinWidth: number = CELL_MIN_W;
-        let _curColCount: number = FILL_BLANK_DATE_DISABLD ? days[month] : 7 * getCells().length;
+        let _curColCount: number = FILL_BLANK_DATE_DISABLD ? days[month] : 7 * cellsList.length;
 
 
         if (appearanceMode === 'week') {
             _curColCount = 7;
         }
-        
 
         //****************
         // STEP 1-1: 
@@ -1613,23 +1857,23 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         //--------------
         if (appearanceMode === 'week') {
             const tableMaxWidth = tableGridEl.clientWidth;
-            const tableHeaderTitleWidth = tableGridEl.querySelector('.e-cal-timeline-table__cell-cushion-headertitle').clientWidth;
-            const tableDividerWidth = tableGridEl.querySelector('.e-cal-timeline-table__timeline-divider').clientWidth;
+            const tableHeaderTitleWidth = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle').clientWidth;
+            const tableDividerWidth = tableGridEl.querySelector('.custom-event-tl-table__timeline-divider').clientWidth;
             const tableBorderWidth = 4;
             const scrollMaxWidth = tableMaxWidth - tableHeaderTitleWidth - tableDividerWidth - tableBorderWidth;
 
-            _curCellMinWidth = scrollMaxWidth/7;
+            _curCellMinWidth = scrollMaxWidth / 7;
             _curColCount = 7;
 
             // header
-            tableGridEl.querySelectorAll('.e-cal-timeline-table__cell-cushion-headercontent__container, .e-cal-timeline-table__cell-cushion-content').forEach((node: HTMLDivElement) => {
+            tableGridEl.querySelectorAll('.custom-event-tl-table__cell-cushion-headercontent__container, .custom-event-tl-table__cell-cushion-content').forEach((node: HTMLDivElement) => {
                 node.style.width = _curCellMinWidth + 'px';
             });
 
-            
+
         }
-        
-        
+
+
 
         //****************
         // STEP 1-2: 
@@ -1646,46 +1890,46 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         //****************
         // initialize "header & main" cells
         //--------------
-        const headerThContentContainers: any = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-header__content tbody').getElementsByTagName('th');
+        const headerThContentContainers: any = tableGridEl.querySelector('.custom-event-tl-table__datagrid-header__content tbody').getElementsByTagName('th');
         for (let i = 0; i < headerThContentContainers.length; i++) {
-            const curHeaderThContent = headerThContentContainers[i].querySelector('.e-cal-timeline-table__cell-cushion-headercontent');
+            const curHeaderThContent = headerThContentContainers[i].querySelector('.custom-event-tl-table__cell-cushion-headercontent');
             if (curHeaderThContent !== null) curHeaderThContent.style.width = _curCellMinWidth + 'px';
         }
 
-        
-        const mainTdContentContainers: any = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__content tbody').getElementsByTagName('td');
+
+        const mainTdContentContainers: any = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('td');
         for (let i = 0; i < mainTdContentContainers.length; i++) {
-            const curHeaderThContent = mainTdContentContainers[i].querySelector('.e-cal-timeline-table__cell-cushion-content');
+            const curHeaderThContent = mainTdContentContainers[i].querySelector('.custom-event-tl-table__cell-cushion-content');
             if (curHeaderThContent !== null) curHeaderThContent.style.width = _curCellMinWidth + 'px';
         }
-        
-        const mainTdContentCols: any = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__content colgroup').getElementsByTagName('col')
+
+        const mainTdContentCols: any = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content colgroup').getElementsByTagName('col')
         for (let i = 0; i < mainTdContentCols.length; i++) {
             mainTdContentCols[i].style.minWidth = _curCellMinWidth + 'px';
         }
-   
+
 
         //****************
         // STEP 2: 
         //****************    
         // initialize scrollable wrapper (width)
         //--------------
-        const _scrollableWrapper: HTMLElement[] = tableGridEl.querySelectorAll('.e-cal-timeline-table__scroller-harness');
+        const _scrollableWrapper: HTMLElement[] = tableGridEl.querySelectorAll('.custom-event-tl-table__scroller-harness');
         [].slice.call(_scrollableWrapper).forEach((el: any) => {
             const scrollType = el.dataset.scroll;
 
             if (appearanceMode === 'week') {
-                el.classList.add('e-cal-timeline-table__scroller-harness--hideX');
+                el.classList.add('custom-event-tl-table__scroller-harness--hideX');
             }
             if (appearanceMode === 'month') {
-                el.classList.remove('e-cal-timeline-table__scroller-harness--hideX');
+                el.classList.remove('custom-event-tl-table__scroller-harness--hideX');
             }
 
             if (scrollType !== 'list') {
-                const _content = el.querySelector('.e-cal-timeline-table__scroller');
+                const _content = el.querySelector('.custom-event-tl-table__scroller');
                 const tableMaxWidth = tableGridEl.clientWidth;
-                const tableHeaderTitleWidth = tableGridEl.querySelector('.e-cal-timeline-table__cell-cushion-headertitle').clientWidth;
-                const tableDividerWidth = tableGridEl.querySelector('.e-cal-timeline-table__timeline-divider').clientWidth;
+                const tableHeaderTitleWidth = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle').clientWidth;
+                const tableDividerWidth = tableGridEl.querySelector('.custom-event-tl-table__timeline-divider').clientWidth;
                 const tableBorderWidth = 4;
                 const scrollMaxWidth = tableMaxWidth - tableHeaderTitleWidth - tableDividerWidth - tableBorderWidth;
 
@@ -1695,21 +1939,21 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
             }
         });
-    
+
 
         //****************
         // STEP 3: 
         //****************
         // initialize cell width
         //--------------
-        const tdElementMaxWidth: number = typeof mainTdContentContainers[0] === 'undefined' ? 0 : parseFloat(window.getComputedStyle(mainTdContentContainers[0].querySelector('.e-cal-timeline-table__cell-cushion-content')).maxWidth);
+        const tdElementMaxWidth: number = typeof mainTdContentContainers[0] === 'undefined' ? 0 : parseFloat(window.getComputedStyle(mainTdContentContainers[0].querySelector('.custom-event-tl-table__cell-cushion-content')).maxWidth);
 
 
         if (Array.isArray(eventsValue) && eventsValue.length > 0) {
 
             for (let i = 0; i < headerThContentContainers.length; i++) {
 
-                const curHeaderThContent = headerThContentContainers[i].querySelector('.e-cal-timeline-table__cell-cushion-headercontent');
+                const curHeaderThContent = headerThContentContainers[i].querySelector('.custom-event-tl-table__cell-cushion-headercontent');
                 const curHeaderThContentMaxWidth = parseFloat(window.getComputedStyle(curHeaderThContent).width);
                 const targetElement = headerThContentContainers[i].offsetWidth > mainTdContentContainers[i].offsetWidth ? headerThContentContainers[i] : mainTdContentContainers[i];
                 let tdOwidth = parseFloat(window.getComputedStyle(targetElement).width);
@@ -1729,7 +1973,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                 tdOwidth = tdOwidth - 1;
 
 
-                headerThContentContainers[i].querySelector('.e-cal-timeline-table__cell-cushion-headercontent').style.width = tdOwidth + 'px';
+                headerThContentContainers[i].querySelector('.custom-event-tl-table__cell-cushion-headercontent').style.width = tdOwidth + 'px';
                 mainTdContentCols[i].style.minWidth = tdOwidth + 'px';
 
 
@@ -1743,7 +1987,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // initialize max width of table content
         //--------------
         if (scrollBodyRef.current !== null && scrollHeaderRef.current !== null) {
-            const tableContentWidth = window.getComputedStyle(tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__content')).width;
+            const tableContentWidth = window.getComputedStyle(tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content')).width;
             const scrollBodyEl: any = scrollBodyRef.current;
             const scrollHeaderEl: any = scrollHeaderRef.current;
 
@@ -1755,7 +1999,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             //
             const tableWrapperMaxWidthLatest = tableGridEl.clientWidth;
             if (tableWrapperMaxWidthLatest > parseFloat(tableContentWidth)) {
-                tableGridEl.querySelector('.e-cal-timeline-table__timeline-table').style.width = tableContentWidth;
+                tableGridEl.querySelector('.custom-event-tl-table__timeline-table').style.width = tableContentWidth;
             }
 
 
@@ -1787,7 +2031,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             }
 
         });
-      
+
 
 
         //****************
@@ -1804,21 +2048,21 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         //--------------
         if (appearanceMode === 'week') {
             const tableMaxWidth = tableGridEl.clientWidth;
-            const tableHeaderTitleWidth = tableGridEl.querySelector('.e-cal-timeline-table__cell-cushion-headertitle').clientWidth;
-            const tableDividerWidth = tableGridEl.querySelector('.e-cal-timeline-table__timeline-divider').clientWidth;
+            const tableHeaderTitleWidth = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle').clientWidth;
+            const tableDividerWidth = tableGridEl.querySelector('.custom-event-tl-table__timeline-divider').clientWidth;
             const tableBorderWidth = 4;
             const scrollMaxWidth = tableMaxWidth - tableHeaderTitleWidth - tableDividerWidth - tableBorderWidth;
 
-            _curCellMinWidth = scrollMaxWidth/7;
+            _curCellMinWidth = scrollMaxWidth / 7;
             _curColCount = 7;
 
             // header content
-            tableGridEl.querySelectorAll('.e-cal-timeline-table__cell-cushion-headercontent__container, .e-cal-timeline-table__cell-cushion-headercontent').forEach((node: HTMLDivElement) => {
+            tableGridEl.querySelectorAll('.custom-event-tl-table__cell-cushion-headercontent__container, .custom-event-tl-table__cell-cushion-headercontent').forEach((node: HTMLDivElement) => {
                 node.style.width = _curCellMinWidth + 'px';
             });
 
             // main content
-            tableGridEl.querySelectorAll('.e-cal-timeline-table__cell-cushion-content').forEach((node: HTMLDivElement) => {
+            tableGridEl.querySelectorAll('.custom-event-tl-table__cell-cushion-content').forEach((node: HTMLDivElement) => {
                 node.style.width = _curCellMinWidth + 'px';
             });
 
@@ -1835,20 +2079,20 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
         // initialize scrollable wrapper (width & height)
         //--------------
-        const _scrollableWrapper = tableGridEl.querySelectorAll('.e-cal-timeline-table__scroller-harness');
+        const _scrollableWrapper = tableGridEl.querySelectorAll('.custom-event-tl-table__scroller-harness');
         [].slice.call(_scrollableWrapper).forEach((el: any) => {
-            
-            const _content = el.querySelector('.e-cal-timeline-table__scroller');
+
+            const _content = el.querySelector('.custom-event-tl-table__scroller');
             el.removeAttribute('data-width');
             el.removeAttribute('style');
             _content.removeAttribute('style');
         });
-    
+
 
         // initialize cell height
         //--------------
-        const headerTitleTrElements = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__title tbody').getElementsByTagName('tr');
-        const trElements = tableGridEl.querySelector('.e-cal-timeline-table__datagrid-body__content tbody').getElementsByTagName('tr');
+        const headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
+        const trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
 
         for (let i = 0; i < headerTitleTrElements.length; i++) {
             headerTitleTrElements[i].removeAttribute('style');
@@ -1891,10 +2135,12 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     useEffect(() => {
+
+        const { forwardFillTotal, list: cellsList } = getCells();
         if (typeof appearanceWeekTmpl === 'function') {
-            setDisplayWeekForHeader([getCells().at(0).dateInfo[0].date, getCells().at(-1).dateInfo[0].date]);
+            setDisplayWeekForHeader([cellsList.at(0).dateInfo[0].date, cellsList.at(-1).dateInfo[0].date]);
         } else {
-            setDisplayWeekForHeader([formatToEnglishMonthDay(getCells().at(0).dateInfo[0].date), formatToEnglishMonthDay(getCells().at(-1).dateInfo[0].date)]);
+            setDisplayWeekForHeader([formatToEnglishMonthDay(cellsList.at(0).dateInfo[0].date), formatToEnglishMonthDay(cellsList.at(-1).dateInfo[0].date)]);
         }
 
     }, [weekOffset]);
@@ -1902,7 +2148,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     useEffect(() => {
 
         // update events value
-        if (Array.isArray(eventsValue) && eventsValue.length > 0) setVal(eventsValue);
+        if (Array.isArray(eventsValue) && eventsValue.length > 0) setOrginalData(eventsValue);
 
         // update current today
         if (typeof customTodayDate !== 'undefined' && isValidDate(customTodayDate)) {
@@ -1913,369 +2159,391 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // Call a function when the list has been rendered completely
         onListRenderComplete?.();
 
+    }, [eventsValue, customTodayDate, appearanceMode]);
+
+
+
+    useEffect(() => {
+
 
+        // calculate wrapper width (!!!FIRST!!!)
+        //--------------
+        outerWrapperInit();
+
+        // !!!Please do not use dependencies
+        //--------------
         return () => {
 
             // reset table grid
             tableGridReset();
-        }
-
-    }, [eventsValue, customTodayDate, appearanceMode]);
-
 
+            // reset selection area
+            setSelectedCells([]);
+            setCopiedCells(null);
+        }
 
+    }, []);
     return (
         <>
 
-            {/*/////////////////////////////////////////////////// */}
-            {/*//////////////////// Calendar //////////////////// */}
-            {/*////////////////////////////////////////////////// */}
+            <div
+                ref={rootRef}
+                className="custom-event-tl__outerwrapper"
+            >
+
+                {/*/////////////////////////////////////////////////// */}
+                {/*//////////////////// Calendar //////////////////// */}
+                {/*////////////////////////////////////////////////// */}
+
+                <div className={combinedCls(
+                    `custom-event-tl__wrapper custom-event-tl__wrapper--${appearanceMode}`,
+                    calendarWrapperClassName
+                )}>
+
+                    {/*++++++++++++++++ MAIN ++++++++++++++++*/}
+                    <div className="custom-event-tl__header bg-body-tertiary">
+                        <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--prev" onClick={handlePrevChange}>
+                            <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
+                                <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
+                            </svg>
+                        </button>
 
-            <div className={combinedCls(
-                `e-cal-timeline__wrapper e-cal-timeline__wrapper--${appearanceMode}`,
-                calendarWrapperClassName
-            )}>
-
-                {/*++++++++++++++++ MAIN ++++++++++++++++*/}
-                <div className="e-cal-timeline__header bg-body-tertiary">
-                    <button tabIndex={-1} type="button" className="e-cal-timeline__btn e-cal-timeline__btn--prev" onClick={handlePrevChange}>
-                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
-                            <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
-                        </svg>
-                    </button>
-
-                    {/* //########## MODE: WEEK ############# */}
-                    {appearanceMode === 'week' ? <>
-                        <div className="e-cal-timeline__header__info">
-                            {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
-                        </div>
-                    </> : null}
-                    {/* //########## /MODE: WEEK ############# */}
+                        {/* //########## MODE: WEEK ############# */}
+                        {appearanceMode === 'week' ? <>
+                            <div className="custom-event-tl__header__info">
+                                {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
+                            </div>
+                        </> : null}
+                        {/* //########## /MODE: WEEK ############# */}
+
+
+                        {/* //########## MODE: MONTH ############# */}
+                        {appearanceMode === 'month' ? <>
+                            <div className="custom-event-tl__header__btns">
+                                <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
+                                    {MONTHS[month]}
+                                    <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
+                                </button>
+                                <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
+                                    {year}
+                                    <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
+                                </button>
+                            </div>
+                        </> : null}
+                        {/* //########## /MODE: MONTH ############# */}
 
 
-                    {/* //########## MODE: MONTH ############# */}
-                    {appearanceMode === 'month' ? <>
-                        <div className="e-cal-timeline__header__btns">
-                            <button tabIndex={-1} type="button" className={`e-cal-timeline__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
-                                {MONTHS[month]}
-                                <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
-                            </button>
-                            <button tabIndex={-1} type="button" className={`e-cal-timeline__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
-                                {year}
-                                <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
-                            </button>
-                        </div>
-                    </> : null}
-                    {/* //########## /MODE: MONTH ############# */}
 
+                        <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--next" onClick={handleNextChange}>
+                            <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
+                                <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
+                            </svg>
+                        </button>
+                    </div>
 
-                    
-                    <button tabIndex={-1} type="button" className="e-cal-timeline__btn e-cal-timeline__btn--next" onClick={handleNextChange}>
-                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
-                            <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
-                        </svg>
-                    </button>
-                </div>
 
 
+                    <div className="custom-event-tl__body">
 
-                <div className="e-cal-timeline__body">
 
+                        <div className="custom-event-tl__row">
+                            {/* day */}
 
-                    <div className="e-cal-timeline__row">
-                        {/* day */}
+                            {/* /day */}
+                        </div>
 
-                        {/* /day */}
                     </div>
-
-                </div>
-                {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
-
-
-                {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
-                <div className={`e-cal-timeline__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
-                    <div className="e-cal-timeline__month-container">
-                        {MONTHS_FULL.map((month, index) => {
-                            return <div
-                                data-month={padZero(index + 1)}
-                                className={`e-cal-timeline__month ${selectedMonth === index ? ' selected' : ''}`}
-                                key={month + index}
-                                onClick={() => { handleMonthChange(index) }}
-                            >{month}</div>
-                        })}
+                    {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
+
+
+                    {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
+                    <div className={`custom-event-tl__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
+                        <div className="custom-event-tl__month-container">
+                            {MONTHS_FULL.map((month, index) => {
+                                return <div
+                                    data-month={padZero(index + 1)}
+                                    className={`custom-event-tl__month ${selectedMonth === index ? ' selected' : ''}`}
+                                    key={month + index}
+                                    onClick={() => { handleMonthChange(index) }}
+                                >{month}</div>
+                            })}
+                        </div>
                     </div>
-                </div>
-                {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
+                    {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
+
+                    {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
+                    <div className={`custom-event-tl__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
+                        <div className="custom-event-tl__year-container bg-body-tertiary">
+                            {yearsArray.map((year, index) => {
+                                return <div
+                                    data-year={year}
+                                    className={`custom-event-tl__year ${selectedYear === year ? ' selected' : ''}`}
+                                    key={year + index}
+                                    onClick={() => { handleYearChange(year) }}
+                                >{year}</div>
+                            })}
+                        </div>
 
-                {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
-                <div className={`e-cal-timeline__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
-                    <div className="e-cal-timeline__year-container bg-body-tertiary">
-                        {yearsArray.map((year, index) => {
-                            return <div
-                                data-year={year}
-                                className={`e-cal-timeline__year ${selectedYear === year ? ' selected' : ''}`}
-                                key={year + index}
-                                onClick={() => { handleYearChange(year) }}
-                            >{year}</div>
-                        })}
                     </div>
-
-                </div>
-                {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
+                    {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
 
 
 
-                {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
-                <div className="e-cal-timeline__today-wrapper p-2">
-                    <button 
-                        tabIndex={-1} 
-                        type="button" 
-                        className="e-cal-timeline__btn e-cal-timeline__btn--today" 
-                        onClick={handleTodayChange}
-                    >
-                        {langToday || 'Today'}
-                    </button>
-
-                    {appearanceToggle ? <>
-                        <button 
-                            tabIndex={-1} 
-                            type="button" 
-                            className={`e-cal-timeline__btn e-cal-timeline__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
-                            data-mode="month" 
-                            onClick={handleAppearanceChange}
-                        >
-                            {langAppearanceLabelMonth || 'Month'}
-                        </button>
-                        <button 
-                            tabIndex={-1} 
-                            type="button" 
-                            className={`e-cal-timeline__btn e-cal-timeline__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
-                            data-mode="week" 
-                            onClick={handleAppearanceChange}
+                    {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
+                    <div className="custom-event-tl__today-wrapper p-2">
+                        <button
+                            tabIndex={-1}
+                            type="button"
+                            className="custom-event-tl__btn custom-event-tl__btn--today"
+                            onClick={handleTodayChange}
                         >
-                            {langAppearanceLabelWeek || 'Week'}
+                            {langToday || 'Today'}
                         </button>
-                    </> : null}
-                    
-                </div>
-                {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
+
+                        {appearanceToggle ? <>
+                            <button
+                                tabIndex={-1}
+                                type="button"
+                                className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
+                                data-mode="month"
+                                onClick={handleAppearanceChange}
+                            >
+                                {langAppearanceLabelMonth || 'Month'}
+                            </button>
+                            <button
+                                tabIndex={-1}
+                                type="button"
+                                className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
+                                data-mode="week"
+                                onClick={handleAppearanceChange}
+                            >
+                                {langAppearanceLabelWeek || 'Week'}
+                            </button>
+                        </> : null}
+
+                    </div>
+                    {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
 
 
-            </div>{/* /.e-cal-timeline__wrapper */}
+                </div>{/* /.custom-event-tl__wrapper */}
 
 
 
-            {/*/////////////////////////////////////////////////// */}
-            {/*//////////////////// Table Grid //////////////////// */}
-            {/*////////////////////////////////////////////////// */}
-            {val.length === 0 ? null : <>
-                <div 
-                    ref={tableGridRef} 
-                    className={combinedCls(
-                        `e-cal-timeline-table__timeline-table__wrapper e-cal-timeline-table__timeline-table__wrapper--${appearanceMode} invisible`,
-                        tableWrapperClassName
-                    )}
-                    onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-                        onKeyPressed?.(e, selectedCells);
-                    }}
-                    tabIndex={-1} // require "tabIndex" attribute
-                >
-                    <table role="grid" className={combinedCls(
-                        "e-cal-timeline-table__timeline-table",
-                        tableClassName
-                    )}>
-                        <colgroup>
-                            <col className="e-cal-timeline-table__datagrid-header" />
-                            <col />
-                            <col />
-                        </colgroup>
-                        
-                        <thead className={combinedCls(
-                            tableHeadClassName
+                {/*/////////////////////////////////////////////////// */}
+                {/*//////////////////// Table Grid //////////////////// */}
+                {/*////////////////////////////////////////////////// */}
+                {orginalData.length === 0 ? null : <>
+                    <div
+                        ref={tableGridRef}
+                        className={combinedCls(
+                            `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
+                            tableWrapperClassName
                         )}
-                            ref={tableGridHeaderRef}
-                            role="rowgroup"
-                        >
-                            <tr role="presentation">
-                                <th role="presentation">
-                                    {/*<!--///// HEADER LEFT //////-->*/}
-                                    <div className="e-cal-timeline-table__timeline-header e-cal-timeline-table__timeline-headertitle">
-
-                                        <table role="presentation" className="e-cal-timeline-table__datagrid-header__title">
-                                            <colgroup>
-                                                <col />
-                                            </colgroup>
-                                            <thead role="presentation">
-                                                <tr role="row">
-                                                    <th role="columnheader">
-                                                        <div className="e-cal-timeline-table__cell-cushion e-cal-timeline-table__cell-cushion-headertitle">
-                                                            {tableListSectionTitle || ''}
-                                                        </div>
-                                                    </th>
-                                                </tr>
-                                            </thead>
-                                        </table>
+                        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+                            onKeyPressed?.(e, selectedCells);
 
-                                    </div>
-                                    {/*<!--///// /HEADER LEFT //////-->*/}
+                            // Copy & Paste
+                            handleWrapperKeyDown(e);
+                        }}
+                        tabIndex={-1} // require "tabIndex" attribute
+                    >
+                        <table role="grid" className={combinedCls(
+                            "custom-event-tl-table__timeline-table",
+                            tableClassName
+                        )}>
+                            <colgroup>
+                                <col className="custom-event-tl-table__datagrid-header" />
+                                <col />
+                                <col />
+                            </colgroup>
+
+                            <thead className={combinedCls(
+                                tableHeadClassName
+                            )}
+                                ref={tableGridHeaderRef}
+                                role="rowgroup"
+                            >
+                                <tr role="presentation">
+                                    <th role="presentation">
+                                        {/*<!--///// HEADER LEFT //////-->*/}
+                                        <div className="custom-event-tl-table__timeline-header custom-event-tl-table__timeline-headertitle">
 
+                                            <table role="presentation" className="custom-event-tl-table__datagrid-header__title">
+                                                <colgroup>
+                                                    <col />
+                                                </colgroup>
+                                                <thead role="presentation">
+                                                    <tr role="row">
+                                                        <th role="columnheader">
+                                                            <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
+                                                                {tableListSectionTitle || ''}
+                                                            </div>
+                                                        </th>
+                                                    </tr>
+                                                </thead>
+                                            </table>
 
+                                        </div>
+                                        {/*<!--///// /HEADER LEFT //////-->*/}
 
-                                </th>
-                                <th role="presentation" className="e-cal-timeline-table__timeline-divider"><div></div></th>
-                                <th role="presentation">
-                                    <div 
-                                        ref={scrollHeaderRef} 
-                                        className="e-cal-timeline-table__scroller-harness e-cal-timeline-table__scroller-harness--hide" 
-                                        data-scroll="header" 
-                                        onScroll={syncTableScrollHeader}
-                                    >
-                                        <div className="e-cal-timeline-table__scroller">
 
-                                            {/*<!--///// HEADER RIGHT //////-->*/}
-                                            <div className="e-cal-timeline-table__timeline-header">
 
-                                                <table className="e-cal-timeline-table__datagrid-header__content e-cal-timeline-table__scrollgrid-sync-table" >
-                                                    <tbody>
-                                                        <tr>
-                                                            {generateDaysUi()}
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
+                                    </th>
+                                    <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
+                                    <th role="presentation">
+                                        <div
+                                            ref={scrollHeaderRef}
+                                            className="custom-event-tl-table__scroller-harness custom-event-tl-table__scroller-harness--hide"
+                                            data-scroll="header"
+                                            onScroll={syncTableScrollHeader}
+                                        >
+                                            <div className="custom-event-tl-table__scroller">
+
+                                                {/*<!--///// HEADER RIGHT //////-->*/}
+                                                <div className="custom-event-tl-table__timeline-header">
+
+                                                    <table className="custom-event-tl-table__datagrid-header__content custom-event-tl-table__scrollgrid-sync-table" >
+                                                        <tbody>
+                                                            <tr>
+                                                                {generateDaysUi()}
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                                {/*<!--///// /HEADER RIGHT //////-->*/}
                                             </div>
-                                            {/*<!--///// /HEADER RIGHT //////-->*/}
                                         </div>
-                                    </div>
-                                </th>
-                            </tr>
-                        </thead>
+                                    </th>
+                                </tr>
+                            </thead>
 
 
 
-                        <tbody className={combinedCls(
-                            tableBodyClassName
-                        )}
-                            role="rowgroup"
-                        >
-                            <tr role="presentation" className="e-cal-timeline-table__list-section">
-                                <td
-                                    role="presentation"
-                                    className={combinedCls(
-                                        tableListStartClassName
-                                    )}
-
-                                >
-
-                                    <div 
-                                        ref={scrollListRef} 
+                            <tbody className={combinedCls(
+                                tableBodyClassName
+                            )}
+                                role="rowgroup"
+                            >
+                                <tr role="presentation" className="custom-event-tl-table__list-section">
+                                    <td
+                                        role="presentation"
                                         className={combinedCls(
-                                            'e-cal-timeline-table__scroller-harness',
-                                            {
-                                                'autoscroll': AUTO_SCROLL
-                                            }
+                                            tableListStartClassName
                                         )}
-                                        data-scroll="list" 
-                                        onScroll={syncTableScrollList}
-                                    >
-                                        <div className="e-cal-timeline-table__scroller">
 
-                                            {/*<!--///// RESOURCE LEFT //////-->*/}
-                                            <table role="presentation" className="e-cal-timeline-table__datagrid-body__title e-cal-timeline-table__scrollgrid-sync-table">
-                                                <colgroup>
-                                                    <col />
-                                                </colgroup>
-                                                <tbody role="presentation">
+                                    >
 
-                                                    {/*<!-- per row -->*/}
-                                                    {generateListSectionUi()}
-                                                    {/*<!-- /per row -->*/}
+                                        <div
+                                            ref={scrollListRef}
+                                            className={combinedCls(
+                                                'custom-event-tl-table__scroller-harness',
+                                                {
+                                                    'autoscroll': AUTO_SCROLL
+                                                }
+                                            )}
+                                            data-scroll="list"
+                                            onScroll={syncTableScrollList}
+                                        >
+                                            <div className="custom-event-tl-table__scroller">
 
-                                                </tbody>
-                                            </table>
-                                            {/*<!--///// /RESOURCE LEFT //////-->*/}
-                                        </div>
-                                    </div>
+                                                {/*<!--///// RESOURCE LEFT //////-->*/}
+                                                <table role="presentation" className="custom-event-tl-table__datagrid-body__title custom-event-tl-table__scrollgrid-sync-table">
+                                                    <colgroup>
+                                                        <col />
+                                                    </colgroup>
+                                                    <tbody role="presentation">
 
+                                                        {/*<!-- per row -->*/}
+                                                        {generateListSectionUi()}
+                                                        {/*<!-- /per row -->*/}
 
-                                </td>
-                                <td
-                                    role="presentation"
-                                    className={combinedCls(
-                                        'e-cal-timeline-table__timeline-divider',
-                                        tableListDividerClassName
-                                    )}
-                                >
-                                    <div></div>
-                                </td>
-                                <td
-                                    role="presentation"
-                                    className={combinedCls(
-                                        tableListEndClassName
-                                    )}
-                                >
+                                                    </tbody>
+                                                </table>
+                                                {/*<!--///// /RESOURCE LEFT //////-->*/}
+                                            </div>
+                                        </div>
 
 
-                                    <div 
-                                        ref={scrollBodyRef} 
+                                    </td>
+                                    <td
+                                        role="presentation"
                                         className={combinedCls(
-                                            'e-cal-timeline-table__scroller-harness',
-                                            {
-                                                'autoscroll': AUTO_SCROLL
-                                            }
+                                            'custom-event-tl-table__timeline-divider',
+                                            tableListDividerClassName
+                                        )}
+                                    >
+                                        <div></div>
+                                    </td>
+                                    <td
+                                        role="presentation"
+                                        className={combinedCls(
+                                            tableListEndClassName
                                         )}
-                                        data-scroll="body" 
-                                        onScroll={syncTableScrollBody} 
-                                        onMouseMove={BODY_DRAG ? handleTableMove : () => { }} 
-                                        onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }} 
-                                        onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }} 
-                                        onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
                                     >
-                                        <div className="e-cal-timeline-table__scroller">
-                                            {/*<!--///// RESOURCE RIGHT //////-->*/}
-                                            <div className="e-cal-timeline-table__timeline-body">
-                                                <table 
-                                                    className="e-cal-timeline-table__datagrid-body__content e-cal-timeline-table__scrollgrid-sync-table"
-                                                    /* Drag to activate the selection area */
-                                                    onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
-                                                    onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
-
-                                                    
-                                                >
-                                                    <colgroup>
-                                                        {generateColUi()}
-                                                    </colgroup>
-                                                    <tbody>
-                                                        {/*<!-- per row -->*/}
-                                                        {val.map((item: any, i: number) => {
 
-                                                            return (
-                                                                <tr key={i}>
-                                                                    {generateDaysUi(item.eventSources, item.listSection, i, true)}
-                                                                </tr>
-                                                            )
 
-                                                        })}
+                                        <div
+                                            ref={scrollBodyRef}
+                                            className={combinedCls(
+                                                'custom-event-tl-table__scroller-harness',
+                                                {
+                                                    'autoscroll': AUTO_SCROLL
+                                                }
+                                            )}
+                                            data-scroll="body"
+                                            onScroll={syncTableScrollBody}
+                                            onMouseMove={BODY_DRAG ? handleTableMove : () => { }}
+                                            onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }}
+                                            onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }}
+                                            onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
+                                        >
+                                            <div className="custom-event-tl-table__scroller">
+                                                {/*<!--///// RESOURCE RIGHT //////-->*/}
+                                                <div className="custom-event-tl-table__timeline-body">
+                                                    <table
+                                                        className="custom-event-tl-table__datagrid-body__content custom-event-tl-table__scrollgrid-sync-table"
+                                                        /* Drag to activate the selection area */
+                                                        onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
+                                                        onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
+
+                                                    >
+                                                        <colgroup>
+                                                            {generateColUi()}
+                                                        </colgroup>
+                                                        <tbody>
+                                                            {/*<!-- per row -->*/}
+                                                            {orginalData.map((item: any, i: number) => {
+
+                                                                return (
+                                                                    <tr key={i}>
+                                                                        {generateDaysUi(item.eventSources, item.listSection, i, true)}
+                                                                    </tr>
+                                                                )
+
+                                                            })}
+
+                                                        </tbody>
+                                                    </table>
+
+                                                </div>
+                                                {/*<!--///// /RESOURCE RIGHT //////-->*/}
 
-                                                    </tbody>
-                                                </table>
 
                                             </div>
-                                            {/*<!--///// /RESOURCE RIGHT //////-->*/}
-
-
                                         </div>
-                                    </div>
 
 
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                    </div>{/* /.custom-event-tl-table__timeline-table__wrapper */}
 
-                </div>{/* /.e-cal-timeline-table__timeline-table__wrapper */}
 
+                </>}
+            </div>
 
-            </>}
 
 
             {/*/////////////////////////////////////////////////// */}
@@ -2287,6 +2555,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                 {/*<!-- DELETE -->*/}
                 <ModalDialog
+                    ref={modalDeleteHandleRef}
                     show={showDelete}
                     maskOpacity={modalMaskOpacity}
                     triggerClassName=""
@@ -2300,6 +2569,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                         setTimeout(() => {
                             setShowDelete(false);
                             onModalDeleteClose?.(queryItemObj());
+                            // set temporary date
+                            setTempDate('');
                         }, 350);
                     }}
                     onSubmit={async (e: any, closewin: Function, data: any) => {
@@ -2320,6 +2591,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                 {/*<!-- EDIT -->*/}
                 <ModalDialog
+                    ref={modalEditHandleRef}
                     show={showEdit}
                     maskOpacity={modalMaskOpacity}
                     heading={modalHeading}
@@ -2336,6 +2608,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                         setTimeout(() => {
                             setShowEdit(false);
                             onModalEditClose?.(queryItemObj());
+                            // set temporary date
+                            setTempDate('');
                         }, 350);
                     }}
                     onSubmit={async (e: any, closewin: Function, data: any) => {
@@ -2367,14 +2641,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             <RootPortal show={true} containerClassName="EventCalendarTimeline-TooltipModal">
                 <div
                     ref={tableTooltipModalRef}
-                    id={`e-cal-timeline-table__cell-tooltipwrapper-${idRes}`}
-                    className={`e-cal-timeline-table__cell-tooltipwrapper d-inline-block ${isShowTableTooltip ? 'active' : ''}`}
+                    id={`custom-event-tl-table__cell-tooltipwrapper-${idRes}`}
+                    className={`custom-event-tl-table__cell-tooltipwrapper d-inline-block ${isShowTableTooltip ? 'active' : ''}`}
                     role="tooltip"
                     data-microtip-position={tableTooltipDirection || 'bottom'}
                     data-microtip-size={tableTooltipSize || 'auto'}
                     style={{ display: 'none' }}
                 >
-                    <div className="e-cal-timeline-table__cell-tooltipcontent">
+                    <div className="custom-event-tl-table__cell-tooltipcontent">
                         {tableTooltipContent}
                     </div>
                 </div>