@visactor/vtable-calendar 1.7.6

package/es/month-calendar.js

@@ -0,0 +1,181 @@
+import { ListTable, EventTarget } from "@visactor/vtable";
+
+import { defaultDayTitles, getRecords, getStartAndEndDate } from "./date-util";
+
+import { add, differenceInDays, previousSunday, startOfDay } from "date-fns";
+
+import { getMonthCustomStyleRange } from "./style";
+
+import { createTableOption } from "./table/table-option";
+
+import { CustomEventHandler } from "./custom/custom-handler";
+
+import { CALENDAR_EVENT_TYPE } from "./event/type";
+
+import { isArray } from "@visactor/vutils";
+
+export class Calendar extends EventTarget {
+    constructor(container, options) {
+        super(), this.minCol = 0, this.container = container, this.options = null != options ? options : {};
+        const {startDate: startDate, endDate: endDate, currentDate: currentDate, rangeDays: rangeDays} = this.options;
+        if (this.currentDate = null != currentDate ? currentDate : new Date, this.rangeDays = null != rangeDays ? rangeDays : 90, 
+        startDate && endDate) this.startDate = startDate, this.endDate = endDate; else {
+            const {startDate: computedStartDate, endDate: computedEndDate} = getStartAndEndDate(this.currentDate, this.rangeDays);
+            this.startDate = null != startDate ? startDate : computedStartDate, this.endDate = null != endDate ? endDate : computedEndDate;
+        }
+        this.tableStartDate = 0 === this.startDate.getDay() ? this.startDate : previousSunday(this.startDate), 
+        this.customHandler = new CustomEventHandler(this, null == options ? void 0 : options.customEventOptions), 
+        this._createTable(), this._bindEvent(), this.options.customEvents && this.addCustomEvents(this.options.customEvents);
+    }
+    _createTable() {
+        const {dayTitles: dayTitles} = this.options, records = getRecords(this.startDate, this.endDate);
+        this.records = records;
+        const week = null != dayTitles ? dayTitles : defaultDayTitles;
+        this.maxCol = week.length - 1;
+        const option = createTableOption(week, this.currentDate, {
+            tableOptions: this.options.tableOptions,
+            containerWidth: this.container.clientWidth,
+            containerHeight: this.container.clientHeight
+        });
+        option.records = records, option.container = this.container, option._calendar = this;
+        const tableInstance = new ListTable(option);
+        this.table = tableInstance, tableInstance.addEventListener("scroll", (() => {
+            const record = this.getYearAndMonth();
+            if (!record.Sun) return void this._updateMonthCustomStyle(this.startDate.getFullYear(), this.startDate.getMonth());
+            const firstDateInWeek = new Date(record.year, record.month, record.Sun), lastDateInNextWeek = add(firstDateInWeek, {
+                days: 13
+            });
+            this._updateMonthCustomStyle(lastDateInNextWeek.getFullYear(), lastDateInNextWeek.getMonth());
+        })), tableInstance.addEventListener("scroll_vertical_end", (() => {
+            this._updateMonthCustomStyle(this.endDate.getFullYear(), this.endDate.getMonth());
+        })), this.jumpToCurrentMonth();
+    }
+    getYearAndMonth() {
+        const x = this.table.tableX + 10, y = this.table.tableY + this.table.getFrozenRowsHeight() + 10, topRow = this.table.getCellAtRelativePosition(x, y), {row: row} = topRow;
+        return this.table.getCellRawRecord(0, row);
+    }
+    jumpToDate(date, animation) {
+        date = startOfDay(date);
+        const dataIndex = Math.floor((differenceInDays(date, this.tableStartDate) + 1) / 7);
+        this.table.scrollToCell({
+            col: 0,
+            row: dataIndex + 1
+        }, animation), this._updateMonthCustomStyle(date.getFullYear(), date.getMonth());
+    }
+    jumpToCurrentMonth(animation) {
+        const topDate = new Date(this.currentDate.getTime());
+        topDate.setDate(1), this.jumpToDate(topDate, animation);
+    }
+    _updateMonthCustomStyle(year, month) {
+        var _a;
+        this.currentMonth === month && this.currentYear === year || (null === (_a = this.currentMonthCellRanges) || void 0 === _a || _a.forEach((range => {
+            this.table.arrangeCustomCellStyle(range, null);
+        })), this.currentMonth = month, this.currentYear = year, this.currentMonthCellRanges = getMonthCustomStyleRange(year, month, this.tableStartDate, this.records), 
+        this.currentMonthCellRanges.forEach((range => {
+            this.table.arrangeCustomCellStyle(range, "current-month");
+        })));
+    }
+    fireListeners(type, event) {
+        return super.fireListeners(type, event);
+    }
+    on(type, listener) {
+        return super.on(type, listener);
+    }
+    _bindEvent() {
+        const titleComponent = this.table.internalProps.title.getComponentGraphic();
+        titleComponent.setAttributes({
+            cursor: "pointer",
+            childrenPickable: !1
+        }), this.titleClickHandler = (() => {
+            this.jumpToCurrentMonth({
+                duration: 500
+            });
+        }).bind(this), titleComponent.addEventListener("click", this.titleClickHandler), 
+        this.table.on("click_cell", (e => {
+            const {target: target} = e;
+            "calendar-custom-event" === target._role ? this.fireListeners(CALENDAR_EVENT_TYPE.CALENDAR_CUSTOM_EVENT_CLICK, {
+                tableEvent: e,
+                date: this.getCellDate(e.col, e.row),
+                customEvent: target._customEvent
+            }) : this.table.isHeader(e.col, e.row) || this.fireListeners(CALENDAR_EVENT_TYPE.CALENDAR_DATE_CLICK, {
+                tableEvent: e,
+                date: this.getCellDate(e.col, e.row)
+            });
+        })), this.table.on("selected_cell", (e => {
+            this.table.isHeader(e.col, e.row) || this.fireListeners(CALENDAR_EVENT_TYPE.SELECTED_DATE, {
+                tableEvent: e,
+                date: this.getCellDate(e.col, e.row)
+            });
+        })), this.table.on("selected_clear", (() => {
+            this.fireListeners(CALENDAR_EVENT_TYPE.SELECTED_DATE_CLEAR, void 0);
+        })), this.table.on("drag_select_end", (e => {
+            const {cells: cells} = e, dates = [];
+            cells.map((row => {
+                row.map((cell => {
+                    this.table.isHeader(cell.col, cell.row) || dates.push(this.getCellDate(cell.col, cell.row));
+                }));
+            })), this.fireListeners(CALENDAR_EVENT_TYPE.DRAG_SELECT_DATE_END, {
+                tableEvent: e,
+                dates: dates
+            });
+        }));
+    }
+    release() {
+        this.table.release();
+    }
+    getCellLocation(date) {
+        date = startOfDay(date);
+        return {
+            row: Math.floor((differenceInDays(date, this.tableStartDate) + 1) / 7) + 1,
+            col: date.getDay()
+        };
+    }
+    getCellDate(col, row) {
+        return add(this.tableStartDate, {
+            days: 7 * (row - 1) + col
+        });
+    }
+    get selectedDate() {
+        const cells = this.table.getSelectedCellInfos();
+        if (!isArray(cells) || 0 === cells.length) return [];
+        const dates = [];
+        return cells.map((row => {
+            row.map((cell => {
+                this.table.isHeader(cell.col, cell.row) || dates.push({
+                    date: this.getCellDate(cell.col, cell.row),
+                    col: cell.col,
+                    row: cell.row
+                });
+            }));
+        })), dates;
+    }
+    addCustomEvent(event) {
+        this.customHandler.addEvent(event), this.table.scenegraph.updateNextFrame();
+    }
+    removeCustomEvent(id) {
+        this.customHandler.removeEvents([ id ]), this.table.scenegraph.updateNextFrame();
+    }
+    updateCustomEvent(event) {
+        this.customHandler.updateEvents([ event ]), this.table.scenegraph.updateNextFrame();
+    }
+    addCustomEvents(events) {
+        this.customHandler.addEvents(events), this.table.scenegraph.updateNextFrame();
+    }
+    removeCustomEvents(ids) {
+        this.customHandler.removeEvents(ids), this.table.scenegraph.updateNextFrame();
+    }
+    updateCustomEvents(events) {
+        this.customHandler.updateEvents(events), this.table.scenegraph.updateNextFrame();
+    }
+    getCellCustomEventByDate(date) {
+        const location = this.getCellLocation(date);
+        return this.getCellCustomEventByLocation(location.col, location.row);
+    }
+    getCellCustomEventByLocation(col, row) {
+        const cellEvent = this.customHandler.getCellCustomEvent(col, row), events = [];
+        return null == cellEvent || cellEvent.keys.forEach((key => {
+            events.push(cellEvent.values[key]);
+        })), events;
+    }
+}
+//# sourceMappingURL=month-calendar.js.map

package/es/month-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["month-calendar.ts"],"names":[],"mappings":"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","file":"month-calendar.js","sourcesContent":["import { ListTable, EventTarget } from '@visactor/vtable';\nimport type { DateRecord, DateRecordKeys } from './date-util';\nimport { defaultDayTitles, getRecords, getStartAndEndDate } from './date-util';\nimport { bindDebugTool } from '../../vtable/src/scenegraph/debug-tool';\nimport { add, differenceInDays, previousSunday, startOfDay } from 'date-fns';\nimport { getMonthCustomStyleRange } from './style';\nimport type { TYPES, ListTableConstructorOptions } from '@visactor/vtable';\nimport { createTableOption } from './table/table-option';\nimport type { ICustomEvent, ICustomEventOptions, IEventData } from './custom/custom-handler';\nimport { CustomEventHandler } from './custom/custom-handler';\nimport type {\n  CalendarEventHandlersEventArgumentMap,\n  CalendarEventHandlersReturnMap,\n  CalendarEventListener\n} from './event/type';\nimport { CALENDAR_EVENT_TYPE } from './event/type';\nimport type { EventListenerId } from '@visactor/vtable/src/ts-types';\nimport { isArray } from '@visactor/vutils';\n\nexport interface CalendarConstructorOptions {\n  startDate?: Date;\n  endDate?: Date;\n  currentDate?: Date;\n  rangeDays?: number;\n\n  dayTitles?: [string, string, string, string, string, string, string];\n\n  tableOptions?: ListTableConstructorOptions;\n\n  customEvents?: ICustomEvent[];\n  customEventOptions?: ICustomEventOptions;\n}\n\nexport class Calendar extends EventTarget {\n  container: HTMLElement;\n  options: CalendarConstructorOptions;\n  table: ListTable;\n  startDate: Date;\n  endDate: Date;\n  currentDate: Date;\n  rangeDays: number;\n  tableStartDate: Date;\n  records: DateRecord[];\n  currentMonthCellRanges: { range: TYPES.CellRange }[];\n  currentMonth: number;\n  currentYear: number;\n\n  titleClickHandler: () => void;\n\n  maxCol: number;\n  minCol: number = 0;\n  customHandler: CustomEventHandler;\n\n  constructor(container: HTMLElement, options?: CalendarConstructorOptions) {\n    super();\n    this.container = container;\n    this.options = options ?? {};\n    const { startDate, endDate, currentDate, rangeDays } = this.options;\n\n    this.currentDate = currentDate ?? new Date();\n    this.rangeDays = rangeDays ?? 90;\n    if (startDate && endDate) {\n      this.startDate = startDate;\n      this.endDate = endDate;\n    } else {\n      const { startDate: computedStartDate, endDate: computedEndDate } = getStartAndEndDate(\n        this.currentDate,\n        this.rangeDays\n      );\n      this.startDate = startDate ?? computedStartDate;\n      this.endDate = endDate ?? computedEndDate;\n    }\n    this.tableStartDate = this.startDate.getDay() === 0 ? this.startDate : previousSunday(this.startDate);\n\n    this.customHandler = new CustomEventHandler(this, options?.customEventOptions);\n\n    this._createTable();\n\n    this._bindEvent();\n\n    if (this.options.customEvents) {\n      this.addCustomEvents(this.options.customEvents);\n    }\n  }\n\n  _createTable() {\n    const { dayTitles } = this.options;\n\n    const records = getRecords(this.startDate, this.endDate);\n    this.records = records;\n\n    const week = (dayTitles ?? defaultDayTitles) as DateRecordKeys[];\n    this.maxCol = week.length - 1;\n    const option = createTableOption(week, this.currentDate, {\n      tableOptions: this.options.tableOptions,\n      containerWidth: this.container.clientWidth,\n      containerHeight: this.container.clientHeight\n    });\n    option.records = records;\n    option.container = this.container;\n    (option as any)._calendar = this;\n\n    const tableInstance = new ListTable(option);\n    this.table = tableInstance;\n\n    tableInstance.addEventListener('scroll', () => {\n      const record: DateRecord = this.getYearAndMonth();\n      if (!record.Sun) {\n        // top\n        this._updateMonthCustomStyle(this.startDate.getFullYear(), this.startDate.getMonth());\n        return;\n      }\n      const firstDateInWeek = new Date(record.year, record.month, record.Sun);\n      const lastDateInNextWeek = add(firstDateInWeek, {\n        days: 13\n      });\n      this._updateMonthCustomStyle(lastDateInNextWeek.getFullYear(), lastDateInNextWeek.getMonth());\n    });\n\n    tableInstance.addEventListener('scroll_vertical_end', () => {\n      this._updateMonthCustomStyle(this.endDate.getFullYear(), this.endDate.getMonth());\n    });\n\n    this.jumpToCurrentMonth();\n\n    // bindDebugTool(tableInstance.scenegraph.stage as any, {\n    //   customGrapicKeys: ['col', 'row']\n    // });\n  }\n\n  getYearAndMonth() {\n    const x = this.table.tableX + 10; // buffer\n    const y = this.table.tableY + this.table.getFrozenRowsHeight() + 10; // buffer\n    const topRow = this.table.getCellAtRelativePosition(x, y);\n    const { row } = topRow;\n    const record = this.table.getCellRawRecord(0, row);\n    return record;\n  }\n\n  jumpToDate(date: Date, animation?: boolean | TYPES.ITableAnimationOption) {\n    date = startOfDay(date);\n    const dataIndex = Math.floor((differenceInDays(date, this.tableStartDate) + 1) / 7);\n    this.table.scrollToCell(\n      {\n        col: 0,\n        row: dataIndex + 1\n      },\n      animation\n    );\n\n    this._updateMonthCustomStyle(date.getFullYear(), date.getMonth());\n  }\n\n  jumpToCurrentMonth(animation?: boolean | TYPES.ITableAnimationOption) {\n    // scroll to current month\n    const topDate = new Date(this.currentDate.getTime());\n    topDate.setDate(1);\n    this.jumpToDate(topDate, animation);\n  }\n\n  _updateMonthCustomStyle(year: number, month: number) {\n    if (this.currentMonth === month && this.currentYear === year) {\n      return;\n    }\n\n    // clear current\n    this.currentMonthCellRanges?.forEach(range => {\n      this.table.arrangeCustomCellStyle(range, null);\n    });\n\n    this.currentMonth = month;\n    this.currentYear = year;\n    this.currentMonthCellRanges = getMonthCustomStyleRange(year, month, this.tableStartDate, this.records);\n    this.currentMonthCellRanges.forEach(range => {\n      this.table.arrangeCustomCellStyle(range, 'current-month');\n    });\n  }\n\n  // @ts-ignore\n  fireListeners<TYPE extends keyof CalendarEventHandlersEventArgumentMap>(\n    type: TYPE,\n    event: CalendarEventHandlersEventArgumentMap[TYPE]\n  ): CalendarEventHandlersReturnMap[TYPE][] {\n    // 调用父类的方法\n    return super.fireListeners(type as any, event as any);\n  }\n\n  // @ts-ignore\n  on<TYPE extends keyof CalendarEventHandlersEventArgumentMap>(\n    type: TYPE,\n    listener: CalendarEventListener<TYPE>\n  ): EventListenerId {\n    // 调用父类的方法\n    return super.on(type as any, listener as any);\n  }\n\n  _bindEvent() {\n    // click title jump to current month\n    const titleComponent = this.table.internalProps.title.getComponentGraphic();\n    titleComponent.setAttributes({\n      cursor: 'pointer',\n      // hack for cursor\n      childrenPickable: false\n    });\n    this.titleClickHandler = (() => {\n      this.jumpToCurrentMonth({\n        duration: 500\n      });\n    }).bind(this);\n    titleComponent.addEventListener('click', this.titleClickHandler);\n\n    this.table.on('click_cell', e => {\n      const { target } = e;\n      if ((target as any)._role === 'calendar-custom-event') {\n        this.fireListeners(CALENDAR_EVENT_TYPE.CALENDAR_CUSTOM_EVENT_CLICK, {\n          tableEvent: e,\n          date: this.getCellDate(e.col, e.row),\n          customEvent: (target as any)._customEvent\n        });\n      } else if (!this.table.isHeader(e.col, e.row)) {\n        this.fireListeners(CALENDAR_EVENT_TYPE.CALENDAR_DATE_CLICK, {\n          tableEvent: e,\n          date: this.getCellDate(e.col, e.row)\n        });\n      }\n    });\n\n    this.table.on('selected_cell', e => {\n      if (!this.table.isHeader(e.col, e.row)) {\n        this.fireListeners(CALENDAR_EVENT_TYPE.SELECTED_DATE, {\n          tableEvent: e,\n          date: this.getCellDate(e.col, e.row)\n        });\n      }\n    });\n\n    this.table.on('selected_clear', () => {\n      this.fireListeners(CALENDAR_EVENT_TYPE.SELECTED_DATE_CLEAR, undefined);\n    });\n\n    this.table.on('drag_select_end', e => {\n      const { cells } = e;\n      const dates: Date[] = [];\n      cells.map(row => {\n        row.map(cell => {\n          if (!this.table.isHeader(cell.col, cell.row)) {\n            dates.push(this.getCellDate(cell.col, cell.row));\n          }\n        });\n      });\n      this.fireListeners(CALENDAR_EVENT_TYPE.DRAG_SELECT_DATE_END, {\n        tableEvent: e,\n        dates\n      });\n    });\n  }\n\n  release() {\n    this.table.release();\n  }\n\n  getCellLocation(date: Date) {\n    date = startOfDay(date);\n    const dataIndex = Math.floor((differenceInDays(date, this.tableStartDate) + 1) / 7);\n    const row = dataIndex + 1;\n    const col = date.getDay();\n\n    return {\n      row,\n      col\n    };\n  }\n\n  getCellDate(col: number, row: number) {\n    const startDate = add(this.tableStartDate, {\n      days: (row - 1) * 7 + col\n    });\n    return startDate;\n  }\n\n  get selectedDate(): { date: Date; col: number; row: number }[] {\n    const cells = this.table.getSelectedCellInfos();\n    if (!isArray(cells) || cells.length === 0) {\n      return [];\n    }\n    const dates: { date: Date; col: number; row: number }[] = [];\n    cells.map(row => {\n      row.map(cell => {\n        if (!this.table.isHeader(cell.col, cell.row)) {\n          dates.push({\n            date: this.getCellDate(cell.col, cell.row),\n            col: cell.col,\n            row: cell.row\n          });\n        }\n      });\n    });\n\n    return dates;\n  }\n\n  addCustomEvent(event: ICustomEvent) {\n    this.customHandler.addEvent(event);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  removeCustomEvent(id: string) {\n    this.customHandler.removeEvents([id]);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  updateCustomEvent(event: ICustomEvent) {\n    this.customHandler.updateEvents([event]);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  addCustomEvents(events: ICustomEvent[]) {\n    this.customHandler.addEvents(events);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  removeCustomEvents(ids: string[]) {\n    this.customHandler.removeEvents(ids);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  updateCustomEvents(events: ICustomEvent[]) {\n    this.customHandler.updateEvents(events);\n    this.table.scenegraph.updateNextFrame();\n  }\n\n  getCellCustomEventByDate(date: Date) {\n    const location = this.getCellLocation(date);\n    return this.getCellCustomEventByLocation(location.col, location.row);\n  }\n\n  getCellCustomEventByLocation(col: number, row: number) {\n    const cellEvent = this.customHandler.getCellCustomEvent(col, row);\n    const events: IEventData[] = [];\n    cellEvent?.keys.forEach(key => {\n      events.push(cellEvent.values[key]);\n    });\n    return events;\n  }\n}\n"]}

package/es/style.d.ts

@@ -0,0 +1,13 @@
+import type { DateRecord } from './date-util';
+export declare function getMonthCustomStyleRange(year: number, month: number, tableStartDate: Date, records: DateRecord[]): {
+    range: {
+        start: {
+            col: number;
+            row: number;
+        };
+        end: {
+            col: number;
+            row: number;
+        };
+    };
+}[];

package/es/style.js

@@ -0,0 +1,45 @@
+import { differenceInDays, lastDayOfMonth } from "date-fns";
+
+export function getMonthCustomStyleRange(year, month, tableStartDate, records) {
+    const startDate = new Date(year, month, 1), startDataIndex = Math.floor((differenceInDays(startDate, tableStartDate) + 1) / 7), startRecord = records[startDataIndex], endDate = lastDayOfMonth(startDate), endDataIndex = Math.floor((differenceInDays(endDate, tableStartDate) + 1) / 7), endRecord = records[endDataIndex], customCellRanges = [ {
+        range: {
+            start: {
+                col: 0,
+                row: startDataIndex + 1 + 1
+            },
+            end: {
+                col: 6,
+                row: endDataIndex
+            }
+        }
+    } ];
+    let startIndex, endIndex;
+    1 === startRecord.Sun ? startIndex = 0 : 1 === startRecord.Mon ? startIndex = 1 : 1 === startRecord.Tue ? startIndex = 2 : 1 === startRecord.Wed ? startIndex = 3 : 1 === startRecord.Thu ? startIndex = 4 : 1 === startRecord.Fri ? startIndex = 5 : 1 === startRecord.Sat && (startIndex = 6), 
+    customCellRanges.push({
+        range: {
+            start: {
+                col: startIndex,
+                row: startDataIndex + 1
+            },
+            end: {
+                col: 6,
+                row: startDataIndex + 1
+            }
+        }
+    });
+    const monthEndDate = endDate.getDate();
+    return endRecord.Sun === monthEndDate ? endIndex = 0 : endRecord.Mon === monthEndDate ? endIndex = 1 : endRecord.Tue === monthEndDate ? endIndex = 2 : endRecord.Wed === monthEndDate ? endIndex = 3 : endRecord.Thu === monthEndDate ? endIndex = 4 : endRecord.Fri === monthEndDate ? endIndex = 5 : endRecord.Sat === monthEndDate && (endIndex = 6), 
+    customCellRanges.push({
+        range: {
+            start: {
+                col: 0,
+                row: endDataIndex + 1
+            },
+            end: {
+                col: endIndex,
+                row: endDataIndex + 1
+            }
+        }
+    }), customCellRanges;
+}
+//# sourceMappingURL=style.js.map

package/es/style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["style.ts"],"names":[],"mappings":"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","file":"style.js","sourcesContent":["import { differenceInDays, lastDayOfMonth } from 'date-fns';\nimport type { DateRecord } from './date-util';\n\nexport function getMonthCustomStyleRange(year: number, month: number, tableStartDate: Date, records: DateRecord[]) {\n  const startDate = new Date(year, month, 1);\n  const startDataIndex = Math.floor((differenceInDays(startDate, tableStartDate) + 1) / 7);\n  const startRecord = records[startDataIndex];\n\n  const endDate = lastDayOfMonth(startDate);\n  const endDataIndex = Math.floor((differenceInDays(endDate, tableStartDate) + 1) / 7);\n  const endRecord = records[endDataIndex];\n\n  const customCellRanges = [\n    {\n      range: {\n        start: {\n          col: 0,\n          row: startDataIndex + 1 + 1\n        },\n        end: {\n          col: 6,\n          row: endDataIndex\n        }\n      }\n    }\n  ];\n\n  let startIndex;\n  if (startRecord.Sun === 1) {\n    startIndex = 0;\n  } else if (startRecord.Mon === 1) {\n    startIndex = 1;\n  } else if (startRecord.Tue === 1) {\n    startIndex = 2;\n  } else if (startRecord.Wed === 1) {\n    startIndex = 3;\n  } else if (startRecord.Thu === 1) {\n    startIndex = 4;\n  } else if (startRecord.Fri === 1) {\n    startIndex = 5;\n  } else if (startRecord.Sat === 1) {\n    startIndex = 6;\n  }\n  customCellRanges.push({\n    range: {\n      start: {\n        col: startIndex,\n        row: startDataIndex + 1\n      },\n      end: {\n        col: 6,\n        row: startDataIndex + 1\n      }\n    }\n  });\n\n  let endIndex;\n  const monthEndDate = endDate.getDate();\n  if (endRecord.Sun === monthEndDate) {\n    endIndex = 0;\n  } else if (endRecord.Mon === monthEndDate) {\n    endIndex = 1;\n  } else if (endRecord.Tue === monthEndDate) {\n    endIndex = 2;\n  } else if (endRecord.Wed === monthEndDate) {\n    endIndex = 3;\n  } else if (endRecord.Thu === monthEndDate) {\n    endIndex = 4;\n  } else if (endRecord.Fri === monthEndDate) {\n    endIndex = 5;\n  } else if (endRecord.Sat === monthEndDate) {\n    endIndex = 6;\n  }\n\n  customCellRanges.push({\n    range: {\n      start: {\n        col: 0,\n        row: endDataIndex + 1\n      },\n      end: {\n        col: endIndex,\n        row: endDataIndex + 1\n      }\n    }\n  });\n\n  return customCellRanges;\n}\n"]}

package/es/table/table-option.d.ts

@@ -0,0 +1,7 @@
+import type { ListTableConstructorOptions } from '@visactor/vtable';
+import type { DateRecordKeys } from '../date-util';
+export declare function createTableOption(week: DateRecordKeys[], currentDate: Date, config: {
+    tableOptions?: ListTableConstructorOptions;
+    containerWidth: number;
+    containerHeight: number;
+}): ListTableConstructorOptions;

package/es/table/table-option.js

@@ -0,0 +1,58 @@
+import { themes } from "@visactor/vtable";
+
+import { defaultDayTitles, getMonthString, getWeekdayString } from "../date-util";
+
+import { calendarCustomLayout } from "../custom/custom-layout";
+
+import { merge } from "@visactor/vutils";
+
+export function createTableOption(week, currentDate, config) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const columns = week.map(((item, index) => ({
+        field: defaultDayTitles[index],
+        title: item,
+        fieldFormat: record => {
+            if (record.year === currentDate.getFullYear() && record.month === currentDate.getMonth() && record[item] === currentDate.getDate()) return `${record[item]}\nToday`;
+            if (1 === record[item]) {
+                const monthIndex = "Sun" === item ? record.month : record.month + 1, mouthStr = getMonthString(monthIndex);
+                return `${record[item]}\n${mouthStr}`;
+            }
+            return record[item];
+        },
+        customLayout: calendarCustomLayout
+    }))), rowHeight = Math.floor((config.containerHeight - ((null !== (_d = null === (_c = null === (_b = null === (_a = config.tableOptions) || void 0 === _a ? void 0 : _a.title) || void 0 === _b ? void 0 : _b.textStyle) || void 0 === _c ? void 0 : _c.fontSize) && void 0 !== _d ? _d : 20) + (null !== (_h = null === (_g = null === (_f = null === (_e = config.tableOptions) || void 0 === _e ? void 0 : _e.title) || void 0 === _f ? void 0 : _f.subtextStyle) || void 0 === _g ? void 0 : _g.fontSize) && void 0 !== _h ? _h : 16) + 1) - (null !== (_k = null === (_j = config.tableOptions) || void 0 === _j ? void 0 : _j.defaultHeaderRowHeight) && void 0 !== _k ? _k : 40)) / 5);
+    return Object.assign(Object.assign({}, null !== (_l = config.tableOptions) && void 0 !== _l ? _l : {}), {
+        columns: columns,
+        defaultRowHeight: null != rowHeight ? rowHeight : 120,
+        defaultHeaderRowHeight: null !== (_o = null === (_m = config.tableOptions) || void 0 === _m ? void 0 : _m.defaultHeaderRowHeight) && void 0 !== _o ? _o : 40,
+        widthMode: "adaptive",
+        columnResizeMode: "none",
+        theme: themes.DEFAULT.extends(merge({
+            headerStyle: {
+                textAlign: "center"
+            },
+            bodyStyle: {
+                bgColor: args => {
+                    const {col: col, row: row, dataValue: dataValue, table: table} = args, record = table.getCellRawRecord(col, row), date = dataValue, month = record.Sun > dataValue ? record.month + 1 : record.month;
+                    return (11 === record.month && record.Sun > dataValue ? record.year + 1 : record.year) === currentDate.getFullYear() && month === currentDate.getMonth() && date === currentDate.getDate() ? "#f0f0f0" : "#fff";
+                },
+                textAlign: "right",
+                textBaseline: "top",
+                color: "#999"
+            }
+        }, null === (_p = config.tableOptions) || void 0 === _p ? void 0 : _p.theme)),
+        title: Object.assign(Object.assign({}, null !== (_r = null === (_q = config.tableOptions) || void 0 === _q ? void 0 : _q.title) && void 0 !== _r ? _r : {}), {
+            orient: "top",
+            text: `${getWeekdayString(currentDate.getDay())}, ${getMonthString(currentDate.getMonth())} ${currentDate.getDate()}`,
+            subtext: currentDate.getFullYear()
+        }),
+        enableLineBreak: !0,
+        customCellStyle: [ {
+            id: "current-month",
+            style: {
+                color: "#000"
+            }
+        } ]
+    });
+}
+//# sourceMappingURL=table-option.js.map

package/es/table/table-option.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["table/table-option.ts"],"names":[],"mappings":"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","file":"table-option.js","sourcesContent":["import type { ListTableConstructorOptions, TYPES } from '@visactor/vtable';\nimport { themes } from '@visactor/vtable';\nimport type { DateRecord, DateRecordKeys } from '../date-util';\nimport { defaultDayTitles, getMonthString, getWeekdayString } from '../date-util';\nimport { calendarCustomLayout } from '../custom/custom-layout';\nimport { merge } from '@visactor/vutils';\n\nexport function createTableOption(\n  week: DateRecordKeys[],\n  currentDate: Date,\n  config: { tableOptions?: ListTableConstructorOptions; containerWidth: number; containerHeight: number }\n) {\n  const columns = week.map((item: DateRecordKeys, index: number) => {\n    return {\n      field: defaultDayTitles[index],\n      title: item,\n      // width: columnWidth ?? 140,\n      fieldFormat: (record: DateRecord) => {\n        if (\n          record.year === currentDate.getFullYear() &&\n          record.month === currentDate.getMonth() &&\n          record[item] === currentDate.getDate()\n        ) {\n          return `${record[item]}\\nToday`;\n        } else if (record[item] === 1) {\n          const monthIndex = item === 'Sun' ? record.month : record.month + 1;\n          const mouthStr = getMonthString(monthIndex);\n          return `${record[item]}\\n${mouthStr}`;\n        }\n        return record[item];\n      },\n      customLayout: calendarCustomLayout\n    };\n  });\n\n  const rowHeight = Math.floor(\n    (config.containerHeight -\n      ((config.tableOptions?.title?.textStyle?.fontSize ?? 20) +\n        (config.tableOptions?.title?.subtextStyle?.fontSize ?? 16) +\n        1) -\n      ((config.tableOptions?.defaultHeaderRowHeight as number) ?? 40)) /\n      5\n  ); // height - title - header\n  const option: TYPES.ListTableConstructorOptions = {\n    ...(config.tableOptions ?? {}),\n\n    columns,\n    defaultRowHeight: rowHeight ?? 120,\n    defaultHeaderRowHeight: config.tableOptions?.defaultHeaderRowHeight ?? 40,\n    widthMode: 'adaptive',\n    columnResizeMode: 'none',\n    theme: themes.DEFAULT.extends(\n      merge(\n        {\n          headerStyle: {\n            textAlign: 'center'\n          },\n          bodyStyle: {\n            bgColor: args => {\n              const { col, row, dataValue, table } = args;\n              const record = table.getCellRawRecord(col, row);\n              const date = dataValue;\n              const month = record.Sun > dataValue ? record.month + 1 : record.month;\n              const year = record.month === 11 && record.Sun > dataValue ? record.year + 1 : record.year;\n              if (\n                year === currentDate.getFullYear() &&\n                month === currentDate.getMonth() &&\n                date === currentDate.getDate()\n              ) {\n                return '#f0f0f0';\n              }\n              return '#fff';\n            },\n            textAlign: 'right',\n            textBaseline: 'top',\n            color: '#999'\n          }\n        },\n        config.tableOptions?.theme\n      )\n    ),\n    title: {\n      ...(config.tableOptions?.title ?? {}),\n\n      orient: 'top',\n      // text: 'Thu, Aug 22',\n      text: `${getWeekdayString(currentDate.getDay())}, ${getMonthString(\n        currentDate.getMonth()\n      )} ${currentDate.getDate()}`,\n      subtext: currentDate.getFullYear()\n    },\n    enableLineBreak: true,\n    customCellStyle: [\n      {\n        id: 'current-month',\n        style: {\n          color: '#000'\n        }\n      }\n    ]\n  };\n\n  return option;\n}\n"]}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@visactor/vtable-calendar",
+  "version": "1.7.6",
+  "description": "The calendar component of VTable",
+  "author": {
+    "name": "VisActor",
+    "url": "https://VisActor.io/"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "cjs/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "cjs",
+    "es",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./es/index.js"
+    }
+  },
+  "scripts": {
+    "compile": "tsc --noEmit",
+    "start": "vite ./demo",
+    "build": "bundle --clean"
+  },
+  "unpkg": "latest",
+  "unpkgFiles": [
+    "dist/vtable-exporter.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@visactor/vtable": "workspace:*",
+    "@visactor/vutils": "~0.18.14",
+    "date-fns": "3.6.0"
+  },
+  "devDependencies": {
+    "@internal/bundler": "workspace:*",
+    "@internal/eslint-config": "workspace:*",
+    "@internal/ts-config": "workspace:*",
+    "@rushstack/eslint-patch": "~1.1.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "3.1.0",
+    "eslint": "~8.18.0",
+    "vite": "3.2.6",
+    "typescript": "4.9.5",
+    "@babel/core": "7.20.12",
+    "@babel/preset-env": "7.20.2",
+    "@types/chai": "4.2.22",
+    "@types/jest": "^26.0.0",
+    "@types/mocha": "9.0.0",
+    "@types/node": "*",
+    "@types/offscreencanvas": "2019.6.4",
+    "chai": "4.3.4",
+    "jest": "^26.0.0",
+    "jest-electron": "^0.1.12",
+    "jest-transform-stub": "^2.0.0",
+    "magic-string": "^0.25.7",
+    "mocha": "9.1.3",
+    "postcss": "8.4.21",
+    "rimraf": "3.0.2",
+    "sass": "1.43.5",
+    "ts-jest": "^26.0.0",
+    "ts-loader": "9.2.6",
+    "ts-node": "10.9.0",
+    "tslib": "2.3.1",
+    "ttypescript": "1.5.13",
+    "typescript-transform-paths": "3.3.1",
+    "json-formatter-js": "^2.3.4",
+    "inversify": "6.0.1",
+    "vite-plugin-markdown": "^2.1.0",
+    "markdown-it": "^13.0.0",
+    "node-fetch": "2.6.7",
+    "form-data": "~4.0.0",
+    "axios": "^1.4.0",
+    "@types/react-is": "^17.0.3",
+    "rollup-plugin-node-resolve": "5.2.0"
+  }
+}