{"_id":"u-calendar","_rev":"3-d2c541824f38114c31cff8171c7c5464","name":"u-calendar","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"u-calendar","version":"1.0.0","description":"Create calendar class only, Can be used in react or vue","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/wuchuixu/u-calendar.git"},"keywords":["calendar","typescript","react","vue"],"author":{"name":"wuchuixu"},"license":"MIT","bugs":{"url":"https://github.com/wuchuixu/u-calendar/issues"},"homepage":"https://github.com/wuchuixu/u-calendar#readme","devDependencies":{"typescript":"^3.9.7"},"dependencies":{"user":"0.0.0"},"gitHead":"c7c99892a3f0c50951ac2e84f6acefaed45f42f7","_id":"u-calendar@1.0.0","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-e2Y60njXTDHT8pOK5w3nnSa208Nf+FFp24QcKs0L3OjAm0m/OYWWCnBR6t3w3FwczdbjNXcsFAWMthS1etWecg==","shasum":"b74cc38715db4a4ddd1a93d49a6a9098947921b8","tarball":"https://registry.npmjs.org/u-calendar/-/u-calendar-1.0.0.tgz","fileCount":9,"unpackedSize":28551,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNQoUCRA9TVsSAnZWagAAOhoP/iJnR1ly8sBtD40SlH5S\nBFVRwOSTkXnum1Jo/YG1YYOF5P0j0e4NHBNg+ZhrJziX4N555/eAmoPced99\nAQqGVfzkKv3hp40EZOguVlCfDSIMUnDXykukmFx+ftri5wjeTFIYd4tK8T3v\nBNekK090Crs0tdlQCZVc4fiBh3oQsp/aL1awuN9ImWQg3kaNmNfzkyT91sgH\n3/ehr56t+se7+swiCQV0FADRYtFdZanIDdQt1LiFjb5REZg7ODscJOdZBfEZ\nSTrsyF6X9wPifbyeGHdwOGyT4Lj9FwLu/shV1fGWHPlDDfO9aHFc5xBlptVH\n5gh+hQ88wo64u51483RWL/knlCunT21iM6s6exMSqmMHjkAs7F+Vooxkx2jp\nVqMbkpbBK7Mn/m4GT4QYD/5zPf+Ffw0PsZ2FGx/JlEgjyJm4N+LG9xLGIlcE\nX144WtFDtV8IU6lBaolEoO/IVEC0H5kptNKsFc1qHy8N6vyIw/OPywq9uEAw\nX+rpfOBp94WDOQHkDsYF/ByAUlWX/QCHOeS0zrKThXBiFBQrD+TSP4Ccc/jG\n7aLpacVvTiOqGeshaj5pX/NY2j7XBFAC9VQaQw2ch/Ujbs0e7nw5ZQLhmLc1\n71J7ermBsyCGNQ/rX598KlIjXYMUW6+Jv8uny4HQe8vQJL2E4UxWhm+We7BT\nzGlJ\r\n=1k+o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCBQTJJox8kjmtDKqKOJeJe2Ffmg4tKdRGMOzTYtzONwIgF74HfWWqH6eRsQwWWIgmbRJ/Nl8U3BHGJlYNid0AOxY="}]},"maintainers":[{"name":"wuchuixu","email":"364191418@qq.com"}],"_npmUser":{"name":"wuchuixu","email":"364191418@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-calendar_1.0.0_1597311508015_0.22465378513830414"},"_hasShrinkwrap":false},"1.0.1":{"name":"u-calendar","version":"1.0.1","description":"Create calendar class only, Can be used in react or vue","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/wuchuixu/u-calendar.git"},"keywords":["calendar","typescript","react","vue"],"author":{"name":"wuchuixu"},"license":"MIT","bugs":{"url":"https://github.com/wuchuixu/u-calendar/issues"},"homepage":"https://github.com/wuchuixu/u-calendar#readme","devDependencies":{"typescript":"^3.9.7"},"gitHead":"c7c99892a3f0c50951ac2e84f6acefaed45f42f7","_id":"u-calendar@1.0.1","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-/5N5dAOxF3as2BFSAEwdt5YFBUEu/AgVuEnrLWIlC7GwS0t0eodUKwAAevOjU6Jj0qxiYw1wuUveJ+FMX2rDpg==","shasum":"74cb3b22d404e56e1cc82ff52ba2f236d4e329c0","tarball":"https://registry.npmjs.org/u-calendar/-/u-calendar-1.0.1.tgz","fileCount":9,"unpackedSize":28535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNSF8CRA9TVsSAnZWagAAax8P/ji8U59od3Pa21UUBRMm\ns754dP2voAtoeD+uACuxQHoXYgunfR2YFMGpbILbADRh0mlcjoNRTuYAeKWV\npl4TyAHJQuti8RFXi7rGvD+QsCk0EtY2rMQ6T9lDp+EwuSJDq3UMaWC/DX1U\n4QXcaV5KsZeE5hWFuakk05oLPMXWS+35XR6GilFSSefTc6FDJlFesriSsmUz\nfRKqRFuD1xjSbjm16LPMyLBbHdacAW84JTUTrp9KPxVVueNzcDXVlsf6qTxA\nRlluOBV5fuJN+NLVSUeBBvtPM2LDiwOiR6vydoS7vsOlMVu4lKDdBiEByl4/\ntoEN/OwGPMFwYyloQd0uFdMNQd/74JhKtWxAU9W3qMo8Nf5XboNy555wrYrB\n4+Z8okaWBXgYarok3fCXJGdwCCIga0rtxKUnBHaklgYLPRRG9lWnl2iGGGBI\n+t2ErQN2YNWJp7es3BRSFZtg+z6KI2iRzoHy3Ww9fAmLVHIV/dwO2V38qu6v\nsp8Yes/ebjFvgfRbgLXydtUg3igPPT5UBWbvF0mbGVe7x0JbM6zuNYpu+CBO\nz2anfLMsNax/oMQB/6OncJuQSGnKm21qP6sWWSSpO3LibsRL1ly2gLwz0Qr1\njomhxaoaQmsKmNL3wzTjxITsmlJsZ0+zJCd8XJiTCgT0mv8yQYbHy8xuvZT8\ntcG2\r\n=lppw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzS8x8GRE8S9DV6PzZNd4vkdx2w9gcz/3XYkFJErrokAiAmTrCjXmbPer8y4gazo/hm5KtXoN6zjLxrcs25E/A9+A=="}]},"maintainers":[{"name":"wuchuixu","email":"364191418@qq.com"}],"_npmUser":{"name":"wuchuixu","email":"364191418@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-calendar_1.0.1_1597317499659_0.7819844047605773"},"_hasShrinkwrap":false},"1.0.2":{"name":"u-calendar","version":"1.0.2","description":"Create calendar class only, Can be used in react or vue","main":"dist/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/wuchuixu/u-calendar.git"},"keywords":["calendar","typescript","react","vue"],"author":{"name":"wuchuixu"},"license":"MIT","bugs":{"url":"https://github.com/wuchuixu/u-calendar/issues"},"homepage":"https://github.com/wuchuixu/u-calendar#readme","devDependencies":{"typescript":"^3.9.7"},"gitHead":"f97d58a81a3f8347071939d22a228cc7ae37796f","_id":"u-calendar@1.0.2","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-308p0A1L/azmqMPa827qAqwJ5p8/v7ZUMeWxoT9YPn3XC4gQk9NhLsT0WisvVJElIFVHHykQxaIeExIyFirMqw==","shasum":"d81c4b1d72c115fcf489742e4e9a5d96943ea539","tarball":"https://registry.npmjs.org/u-calendar/-/u-calendar-1.0.2.tgz","fileCount":9,"unpackedSize":39452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNfTLCRA9TVsSAnZWagAAOMMP/32KgPt0e9+Zn1L9TYew\nm4XNRxjxGHE/GBdpXDo91HRorxEAjOjC+vkXqMGiUjzSqJiCrobaYDDT7CU8\nhdnMrsgMMUre2TOLQ0sw9A2y8L6j4wFNGaWzmaJx4W3UjgxWUA5G2GfduTd/\nr/V/xxphNZGzOM16lgwY4muGuJXAljg0bZ+GCNxqjUIlJJuaiicXmpdbq4Mt\nxmfv0EE8XpzZouQLSin/BdUvyYstqUybgm/bI0BCHrTbvaqO4vnrKopyKyJ4\nQA2cX/RLO0PvuMH1a/h8PYoSkN+GJuCy2GQHxioey9BE5pqZQrdZTU13ufih\nZUEKTM+JCB0nDaybTiWlFAD5OqPclqTW3orL/hAO6iHdXrtedGYsE3/IJuu8\nZwn27ixiEMkI89xiU3nhAYDZMW0oUwkI88MfYyQUOKx+B2Izg5OiV2pVPjx5\nI/YA1AkSO2nQW676r9BXiR1xQtpvRJMeTux9aEx/hdTNB2rncPv+X5ezGHQY\ner2wJYlS87O6cqCo0JlChqu94HJ4nskR/sY2kh4twr2N00kswQrP8Z//uW4s\nCArBf6gPN7nfiPUicbNCDh+JXFscdLwj5e1Qen/Dzjg54oldOM0CBm0SHO9P\nbnS9+bj1fv2hQGL8yLZlu8uc3yk8Zxu5ogF9Liv94Ipv10F5M4eYdRiwnnYc\nV7rQ\r\n=KSIl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAirFf/TUoraqaqfZ+G+uByWhX9InJRJ/c6Oe8xfYWs6AiEA5jqtkkU73myG4+jp82Zxd37Vr81G9YGxIR30g+kQD6Y="}]},"maintainers":[{"name":"wuchuixu","email":"364191418@qq.com"}],"_npmUser":{"name":"wuchuixu","email":"364191418@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/u-calendar_1.0.2_1597371595176_0.48779025766771733"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-13T09:38:28.015Z","1.0.0":"2020-08-13T09:38:28.222Z","modified":"2022-05-22T14:34:29.390Z","1.0.1":"2020-08-13T11:18:19.770Z","1.0.2":"2020-08-14T02:19:55.285Z"},"maintainers":[{"name":"wuchuixu","email":"364191418@qq.com"}],"description":"Create calendar class only, Can be used in react or vue","homepage":"https://github.com/wuchuixu/u-calendar#readme","keywords":["calendar","typescript","react","vue"],"repository":{"type":"git","url":"git+https://github.com/wuchuixu/u-calendar.git"},"author":{"name":"wuchuixu"},"bugs":{"url":"https://github.com/wuchuixu/u-calendar/issues"},"license":"MIT","readme":"# u-calendar\r\nCreate calendar class only\r\n\r\n## useage\r\n\r\n### first step:\r\n``` sh\r\nnpm install u-calendar --save\r\n```\r\n\r\n### Second step:\r\n``` js\r\nimport UCalendar from \"u-calendar\";\r\n\r\nconst calendar = new UCalendar(options);\r\n\r\n```\r\n\r\n### examples\r\n\r\n#### react\r\n\r\n> Calendar.tsx\r\n\r\n``` tsx\r\nimport React, { useState, useEffect, memo, forwardRef, useImperativeHandle } from 'react';\r\nimport { LeftOutlined, RightOutlined } from '@ant-design/icons';\r\nimport { Checkbox } from 'antd';\r\nimport { CheckboxProps } from 'antd/es/checkbox';\r\nimport classnames from 'classnames';\r\nimport UCalendar from 'u-calendar';\r\nimport {\r\n  CalendarInstance,\r\n  CalendarProps,\r\n  WeekCell,\r\n  DateType,\r\n  DateCell,\r\n  DayType,\r\n} from 'u-calendar/src/data.d';\r\nimport { getDateTimestamp, dateFomater } from 'u-calendar/src/utils';\r\nimport styles from './index.less';\r\n\r\ninterface ICalendarProps extends CalendarProps {\r\n  value?: DateType;\r\n  className?: string;\r\n  from?: CalendarInstance;\r\n  toolbarActions?: React.ReactNode | React.ReactNode[];\r\n  onDateChange?: (payload: { year: string; month: string; dates: DateCell[] }) => void;\r\n  onChange?: (value?: DateType) => void;\r\n  onCellClick?: (cell: DateCell, index: number) => void;\r\n  showMonthCheckbox?: boolean;\r\n  showWeekCheckbox?: boolean;\r\n  toolbarRender?: (currentYear: string, currentMonth: string) => React.ReactNode;\r\n  headerRender?: (payload: WeekCell, index: number) => React.ReactNode;\r\n  cellRender?: (cell: DateCell, index: number, rows: DateCell[]) => React.ReactNode;\r\n}\r\n\r\nfunction useCalendar(from?: CalendarInstance, optons?: CalendarProps): [CalendarInstance] {\r\n  const formRef = React.useRef<CalendarInstance>();\r\n\r\n  if (!formRef.current) {\r\n    if (from) {\r\n      formRef.current = from;\r\n    } else {\r\n      const calendar = new UCalendar(optons || {});\r\n\r\n      formRef.current = calendar.getCalendar();\r\n    }\r\n  }\r\n\r\n  return [formRef.current];\r\n}\r\n\r\nconst SpanCell: React.FC<CheckboxProps> = ({ children }) => <span>{children}</span>;\r\n\r\nconst Calendar: React.ForwardRefRenderFunction<any, ICalendarProps> = (props, ref: any) => {\r\n  const {\r\n    className,\r\n    from,\r\n    toolbarActions,\r\n    toolbarRender,\r\n    headerRender,\r\n    cellRender,\r\n    showMonthCheckbox,\r\n    showWeekCheckbox,\r\n    onCellClick,\r\n    onChange,\r\n    onDateChange,\r\n    ...rest\r\n  } = props;\r\n  const [checkedValues, setCheckedValues] = useState<number[]>([]);\r\n  const [dates, setDates] = useState<DateCell[]>([]);\r\n  const [currentYear, setCurrentYear] = useState<string>('');\r\n  const [currentMonth, setCurrentMonth] = useState<string>('');\r\n  const [calendar] = useCalendar(from, rest);\r\n  const { weekCells, dateCells, checkeds, currentYear: curYear, currentMonth: curMonth } = calendar;\r\n\r\n  useImperativeHandle(ref, () => ({\r\n    clearChecked: () => {\r\n      calendar.clearChecked();\r\n    },\r\n  }));\r\n  const ToolbarCheckbox = showMonthCheckbox ? Checkbox : SpanCell;\r\n  const HeaderCheckbox = showWeekCheckbox ? Checkbox : SpanCell;\r\n\r\n  const isAllChecked = (day?: DayType) => {\r\n    const items = dates\r\n      .filter((v) => !v.disabled && v.inView && (day === undefined || day === v.day))\r\n      .map((v) => v.timestamp);\r\n    if (items.length && items.every((v) => checkedValues.includes(v))) {\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const isEqualArray = (arr: number[], newArr: number[]): boolean => {\r\n    if (arr.length === newArr.length && arr.every((v, i) => v === newArr[i])) {\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  useEffect(() => {\r\n    setDates([...dateCells]);\r\n    setCurrentYear(curYear);\r\n    setCurrentMonth(curMonth);\r\n    setCheckedValues([...checkeds]);\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (rest.value === undefined) {\r\n      calendar.clearChecked();\r\n    }\r\n    if (rest.value) {\r\n      calendar.clearChecked();\r\n      const vals = calendar.setChecked(rest.value, true);\r\n      if (!isEqualArray(checkedValues, vals)) {\r\n        setCheckedValues([...vals]);\r\n      }\r\n    }\r\n  }, [rest.value]);\r\n\r\n  useEffect(() => {\r\n    calendar.on('change', (data) => {\r\n      setCheckedValues([...data]);\r\n      if (typeof onChange === 'function') {\r\n        const vals = [...data].map((v) => dateFomater(v, rest.valueFormat || 'YYYY-MM-DD'));\r\n        onChange(rest.maxChecked === 1 ? vals.join(',') : vals);\r\n      }\r\n    });\r\n    return () => {\r\n      calendar.off('change');\r\n    };\r\n  }, [onChange]);\r\n\r\n  useEffect(() => {\r\n    calendar.on('dateChange', ({ dateCells: datas, year, month }) => {\r\n      setCurrentYear(year);\r\n      setCurrentMonth(month);\r\n      setDates([...datas]);\r\n      if (typeof onDateChange === 'function') {\r\n        onDateChange({ year, month, dates: datas });\r\n      }\r\n    });\r\n    return () => {\r\n      calendar.off('dateChange');\r\n    };\r\n  }, [onDateChange]);\r\n\r\n  return (\r\n    <div className={classnames([styles.calendar, className])} ref={ref}>\r\n      <div className=\"calendar-toolbar\">\r\n        <LeftOutlined className=\"btn prev\" onClick={() => calendar.prev()} />\r\n        {toolbarRender ? (\r\n          toolbarRender(currentYear, currentMonth)\r\n        ) : (\r\n          <div className=\"calendar-toolbar-con\">\r\n            {toolbarActions}\r\n            <span>{currentYear}</span>\r\n            <span>年</span>\r\n            <span>{currentMonth}</span>\r\n            <span>月</span>\r\n            <ToolbarCheckbox\r\n              checked={isAllChecked()}\r\n              onChange={(e) => {\r\n                const { checked } = e.target;\r\n                calendar.setChecked(undefined, checked);\r\n              }}\r\n              style={{ marginLeft: 10 }}\r\n            >\r\n              {showMonthCheckbox ? '全月' : ''}\r\n            </ToolbarCheckbox>\r\n          </div>\r\n        )}\r\n        <RightOutlined className=\"btn next\" onClick={() => calendar.next()} />\r\n      </div>\r\n      <ul className=\"calendar-header\">\r\n        {weekCells.map((item, index) => {\r\n          return (\r\n            <li key={item.value}>\r\n              {headerRender ? (\r\n                headerRender(item, index)\r\n              ) : (\r\n                <HeaderCheckbox\r\n                  checked={isAllChecked(item.value)}\r\n                  onChange={(e) => {\r\n                    const { checked } = e.target;\r\n                    calendar.setChecked(item.value, checked);\r\n                  }}\r\n                >\r\n                  {item.name}\r\n                </HeaderCheckbox>\r\n              )}\r\n            </li>\r\n          );\r\n        })}\r\n      </ul>\r\n      <ul className=\"calendar-body\">\r\n        {dates.map((v, i) => {\r\n          return (\r\n            <li\r\n              className={classnames([\r\n                'calendar-cell',\r\n                {\r\n                  'is-other': !v.inView,\r\n                  'is-disabled': v.disabled,\r\n                  'is-checked': checkedValues.includes(v.timestamp),\r\n                  'is-today': v.timestamp === getDateTimestamp(new Date(), true),\r\n                },\r\n              ])}\r\n              key={v.value}\r\n              onClick={() => {\r\n                if (v.disabled) {\r\n                  return;\r\n                }\r\n                if (v.inView) {\r\n                  calendar.setChecked(v.timestamp);\r\n                }\r\n                if (typeof onCellClick === 'function') {\r\n                  onCellClick(v, i);\r\n                }\r\n              }}\r\n            >\r\n              <div className=\"calendar-cell-box\">\r\n                <div className=\"calendar-cell-date\">{v.date}</div>\r\n                <div className=\"calendar-cell-con\">\r\n                  {cellRender ? cellRender(v, i, dates) : null}\r\n                </div>\r\n              </div>\r\n            </li>\r\n          );\r\n        })}\r\n      </ul>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Calendar));\r\n\r\n```\r\n\r\n#### vue\r\n\r\n> Calendar.vue\r\n\r\n``` vue\r\n<template name=\"calendar\">\r\n  <div :class=\"['calendar', className]\">\r\n    <ul class=\"calendar-hd\">\r\n      <li v-for=\"week in weekCells\" :key=\"week.value\" class=\"cell week-cell\">{{ week.name }}</li>\r\n    </ul>\r\n    <ul class=\"calendar-bd\">\r\n      <li\r\n        v-for=\"(item, index) in dates\"\r\n        :key=\"item.timestamp\"\r\n        :class=\"[\r\n          'cell date-cell',\r\n          {\r\n            indiv: item.indiv,\r\n            disabled: item.disabled,\r\n            checked: checkeds.includes(item.timestamp)\r\n          }\r\n        ]\"\r\n        @tap=\"onCellClick(item, index)\"\r\n      >\r\n        <slot :cell=\"item\" :checked=\"checkeds.includes(item.timestamp)\">\r\n          <div>{{ item.date }}</div>\r\n        </slot>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { Vue, Component, Prop, Emit, Watch } from \"vue-property-decorator\";\r\nimport UCalendar from 'u-calendar';\r\nimport { dateFomater } from \"u-calendar/src/utils\";\r\nimport {\r\n  CalendarInstance,\r\n  DateType,\r\n  DateCell,\r\n  WeekCell,\r\n  DayType,\r\n} from \"u-calendar/src/data.d\";\r\n\r\nlet calendar: CalendarInstance;\r\n\r\n@Component\r\nexport default class Calendar extends Vue {\r\n  @Prop() private className?: string;\r\n  @Prop() private current?: DateType;\r\n  @Prop() private value?: DateType | DateType[];\r\n  @Prop() private defaultValue?: DateType | DateType[];\r\n  @Prop() private maxChecked?: number;\r\n  @Prop() private disabled?: boolean;\r\n  @Prop({ default: \"YYYY-MM-DD\" }) private valueFormat!: string;\r\n  @Prop() private startWeek?: DayType;\r\n  @Prop() private disabledDate?: (currentDate: DateCell) => boolean;\r\n  @Prop() private customCells?: PlainObject[];\r\n\r\n  weekCells: WeekCell[] = [];\r\n  dateCells: DateCell[] = [];\r\n  checkeds: number[] = [];\r\n\r\n  @Watch(\"current\")\r\n  onCurrentChange(nv: DateType) {\r\n    if (calendar) {\r\n      this.dateCells = calendar.setCurrent(nv);\r\n    }\r\n  }\r\n\r\n  private get dates() {\r\n    const arr = this.dateCells.map((v) => {\r\n      const item = { ...v };\r\n      const custom =\r\n        this.customCells?.find((v) => v.value === item.value) || {};\r\n      const cur = { ...item, ...custom };\r\n      if (typeof this.disabledDate === \"function\") {\r\n        cur.disabled = this.disabledDate(cur);\r\n      }\r\n      return cur;\r\n    });\r\n    return arr;\r\n  }\r\n\r\n  init() {\r\n    const calendar = new UCalendar(this.$props || {}).getCalendar();\r\n\r\n    this.weekCells = calendar.weekCells;\r\n    this.dateCells = calendar.dateCells;\r\n    this.checkeds = calendar.checkeds;\r\n\r\n    calendar.on(\"change\", () => {\r\n      const vals = this.checkeds.map((v) => dateFomater(v, this.valueFormat));\r\n      const val = this.maxChecked === 1 ? vals[0] : vals;\r\n      this.$emit(\"update:value\", val);\r\n      this.$emit(\"change\", val);\r\n    });\r\n\r\n    calendar.on(\"dateChange\", (data) => {\r\n      this.$emit(\"dateChange\", data);\r\n    });\r\n  }\r\n\r\n  @Emit(\"onCellTap\")\r\n  onCellClick(cell: DateCell, index: number) {\r\n    if (cell.disabled || this.disabled) return;\r\n    calendar.setChecked(\r\n      cell.timestamp,\r\n      this.maxChecked === 1 ? true : undefined\r\n    );\r\n    return { cell, index };\r\n  }\r\n\r\n  created() {\r\n    this.init();\r\n  }\r\n\r\n  destroyed() {\r\n    if (calendar) {\r\n      calendar.off(\"change\");\r\n      calendar.off(\"dateChange\");\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\">\r\n@import \"./index.less\";\r\n</style>\r\n\r\n```","readmeFilename":"README.md"}