简介
ts-react-infinite-calendar 是一个基于 TypeScript 的 React 日历组件库，支持各种日历视图，并且具有无限滚动功能。本文旨在介绍 ts-react-infinite-calendar 的基本使用方法以及一些不同场景的配置技巧和注意事项，帮助读者更好地理解和使用该库。
安装
使用 npm 可以非常方便地安装 ts-react-infinite-calendar：
npm install ts-react-infinite-calendar --save
基本用法
使用 ts-react-infinite-calendar 需要经过几个步骤：
- 引入依赖：在组件中引入 ts-react-infinite-calendar 的依赖。
import Calendar from 'ts-react-infinite-calendar'; import 'ts-react-infinite-calendar/dist/style.css';
- 创建实例：创建一个 Calendar 组件实例，并设置相关属性。
-- -------------------- ---- -------
---
-------- -
----- ----- - --- -------
----- -------- - --- ------------------------- ----------------- --------------- - ---
------ -
---------
----------------
----------------- ---
------------------
------------ ------------------------- ---------------- - -- ----
---------
------------- -
--
---------------- -- ------------------
--
--
-
---这里设置了以下属性：
- selected：默认的选中日期，如果未选中日期则为 undefined。
- disabledDays：禁用某些星期几的日期选择。
- minDate：可选择的最早日期。
- maxDate：可选择的最晚日期。
- locale：日期语言及一些格式相关配置，详见后文。
- onSelect：选择日期时触发的回调函数。
高级用法
日历视图配置
ts-react-infinite-calendar 支持以下几种日历视图：
- Infinity （默认）：最常见的日历视图，以月为单位展示日期。
- Months：以年为单位展示日期。
- Years：以几年为单位展示日期。
可以通过修改 Calendar 实例的 display 属性来实现不同的视图展示，例如：
... <Calendar display="Months" ... /> ...
更多的属性设置见下表：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| display | string | Infinity | 初始的日历页面配置。可选值：'Infinity'、'Months'、或者 'Years' |
| displayOptions | object | 一些关于宽度、高度等宽高比例的设置 | |
| width | number | Infinity | 宽度 |
| height | number | Infinity | 高度 |
| shouldHeaderAnimate | boolean | false | 是否开启头部动画 |
语言及一些格式相关配置
使用 locale 属性可以设置日期的语言及一些格式相关配置。可以通过 import 来引入语言文件：
import Calendar from 'ts-react-infinite-calendar'; import 'ts-react-infinite-calendar/dist/style.css'; import enUS from 'ts-react-infinite-calendar/dist/locale/en-US';
然后在 Calendar 实例中引用：
...
<Calendar
locale={enUS}
...
/>
...也可以自定义其他语言，例如中文：
import zhCN from './zh-CN';
...
<Calendar
locale={zhCN}
...
/>
...自定义语言文件示例：
-- -------------------- ---- -------
------ ------- -
-- ------
----------- -
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
------
------
--
-- --------
-------------- ----- ---- ---- ---- ---- ---- -----
-- -----
----------- -
----- -----
------ -----
--
-- -------
-- --------------- ---------------------
-- ----------- ------------
-------------- ------ ------ --------------- --
---------------- ----------------------
----------------- ------------ ----- -- ------------------
------------------ -- -- ---------------
--更多语言相关的属性设置见下表：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| monthNames | string[]（长度为12） | 英文月份 | 月份 |
| monthShortNames | string[]（长度为12） | 英文月份 | 简写的月份 |
| dayNamesShort | string[]（长度为7） | 星期几 | 简写的星期 |
| dayNames | string[]（长度为7） | 星期几 | 全称的星期 |
| todayLabel | object（形如 {long: '今天', short: '今天'}） | 今天 | 按钮上的字样 for selection |
| chooseAvailableStartDateLabel | string | 在 startDate 和 endDate 之间的日期字符串。 | |
| formatToday | function | today | 自定义今天的显示格式，参数为 today Date 对象 |
| formatWeekday | function | 自定义显示 week day 的格式（简称），参数为两个字符串：长名称和短名称 | |
| formatWeekNumber | function | 自定义显示 week number 的格式，参数为两个字符串：星期数和 date 日期字符串 | |
| getFirstDayOfWeek | function | 0（周日） | 自定义第一个显示的 weekday，返回数字 0（周日）到 6（周六）之间的数字 |
| weekStartsOn | number | 0（周日） | 与 getFirstDayOfWeek 相同 |
日历操作相关属性配置
除了上述视图、语言等的配置，ts-react-infinite-calendar 还支持通过属性的配置实现一些操作的个性化配置，例如禁用一些日期（disabledDays，必须是 0-6 之间的数字），选择日期后的回调函数（onSelect），单双击选择的日期，限定日期选择的范围（minDate和maxDate）等。
下表展示了该属性的详细配置：
| 属性 | 类型 | 描述 |
|---|---|---|
| onSelect | func | 点击或滚动选择日期时的回调函数。第一个参数为被选中的日期的 ISO 日期字符串（YYYY-MM-DD） |
| selected | object | 选中的日期对象 |
| disableScroll | boolean | 隐藏日历滚动条 |
| width | number | Calendar 组件的宽度 |
| height | number | Calendar 组件的高度 |
| minDate | date or str | 可选择的最早日期 |
| maxDate | date or str | 可选择的最晚日期 |
| min | date or str | 可选择的最早日期（同 minDate） |
| max | date or str | 可选择的最晚日期（同 maxDate） |
| locale | object | 指定语言和一些格式相关的配置，详见上方 语言及一些格式相关配置 的表格 |
| theme | object | 指定日历主题，详见下方 主题类型 的表格 |
| tabIndex | number | 指定日历获取焦点时元素的 tabindex |
| className | string | 增加自定义的 class，以方便自定义样式 |
| autoFocus | boolean | 在组件渲染时自动对日历获取焦点 |
| display | string | 显示 Calendar 组件时显示的视图，详见视图类型 |
| disabledDays | array | 数组中的数字代表周几（0–6，0代表星期天），将禁用所有这些星期的日期。例如 [0,6] 将禁用星期天和星期六每周的所有日期 |
| ranges | array | 字符串日期范围。例如：[{start: '2018-10-01', end: '2018-10-30'}] |
| events | object | 事件日期。例如：{'2018-12-25': {color: '#FF00FF', label: 'Christmas'}} |
| showOverlay | boolean | 在鼠标悬停在日期上时向日期添加覆盖图层 |
| overlayPosition | string | overlay 的位置，支持 'top'、'bottom'、'left' 或 'right' |
| autoFocusRangeEnd | boolean | 设置焦点并高亮需要选择的范围的结束日期。辅助键 alt 或 option 可强制选择范围的开始日期 |
| hoverRange | boolean | 高亮被 hover 的区域的范围，只能用于 diff 等于 0 的区域 |
| displayOptions | object | |
| shouldHeaderAnimate | boolean | false |
主题类型
ts-react-infinite-calendar 支持多种不同的主题类型。可以选择预设的主题或创建一个全新主题。我们可以在 css 中覆盖预设主题或者在 js 中重新制定新的主题。
下表是内置主题样式的代码：
-- -------------------- ---- -------
--
-------------------------- ------- -----
--
---------- -
-------- -------------
----------- -----------
------------ -----
-------------------- -----
-
---------------------- -
------------------- -----------
---------------------- -------
--------------- ----
-
-------------------- -
------------------- ---------
---------------------- -------
--------------- -------
-
------------------ -
--------- ---------
--------------- --
-------------- ----
----------- ------ ---- ------------------ ----- -- ---
----------- - --- --- ------- -- -- -----
----------- -----
-
------------------ -
----------- -------
------------------ ----------
---------- ----------
-
---------------------------------------- -
------------------ ----------
---------- ----------
-
------------------------------------------ -
------- --- ----- --------
-
------------------------------ -
--------- ---------
----- ----
---- --
------ -----
------- -----
--------- -------
------------------ -----------------
---------- -----------------
-
----------------- -
--------- ---------
-------- --
------- -----
----------- --
-------------- --- ----- --------
-
----------------- ------ -
--------- ---------
-------- --
---- --
------- -----
-------- - -----
------ --------
---------- -----
----------- -------
----------- ------------
------- --
-------- --
-
----------------- -------------
----------------- ------------ -
------- --------
------ --------
-
----------------- ------------------ -
-------- -------------
--------- ---------
---- --
----- --
------ -----
------- -----
----------- -------
---------- -----
-
----------------- ------------------ - --- -
-------- -------------
--------- ---------
----------- ---- ---- ------------------ ----- -- ---
-
----------------- ------------------------ -
------ -----
-
----------------- ------------------------ -
------ ------
-
----------------- ------------------------ - --- -
----- ------
-
----------------- ------------------------ - --- -
----- -----
-
----------------- ------------------------ - ----
----------------- ------------------------ - --- -
--------- ---------
---- --
------ --------
-
----------------- ------------------ - --- - ---- -
-------- -------------
-------- - -----
-
----------------- ------------------- -
----------- ----
-------- -----
--------- ---------
-------- --
----------- --- ----- --------
----------- -----
-
------------------- -
-------- -------------------
----------- ----
---------------- ---------
--------------- --
------------ -----
-
---------------------- -
-------- ----------
-
------------------ -
-------- -----------
-------- - -----
------ --------
----------- -------
---------- -----
------------ ----
-
--------------- -
-------- ----------------
-
--------------- -
-------- ----------
-
-------------- -
-------- -----------
-------- --
-------------- ----
--------------- -------
----------- -------
---------- -----
-------- --
------- --------
----------- ---------------- ---- ------------
-
--------------------- -
------------ ----
-
----------------------------------------------------------------------------------- -
--------- ---------
----------------- --------
------ --------
-
----------------------------------------------------------------------------------------- -
----------------- --------
-
----------------------------------------------------------------------------------------- -
----------- - - - --- ------- ---- ---- -----
-
------------------------------------------------------------------------------------------------------------------- -
----------------- --------
------ --------
-
--------------------------------------------------------------------------------------------------------------------------- -
----------------- ------- ---- ---- -----
------ --------
-
----------------------- -
------- --------
------ --------
----------------- --------
-
------------------------ -
------- --------
------ --------
----------------- --------
-
---------------------------- -
-------- ----
------- --------
-
----------------------------------- -
-------- -----
-
---------------------------
-------------------------- -
--------- ---------
---- -----
------- --
-------- --
-------- -------------
------- --
-------- --
-
-------------------------- -
----- -----
---------- --------------
-
-------------------------- -
------ -----
---------- ---------------
-
----------------------------------------- -
------- --------
----------- -------
-
---------------------------- -
------ --------
-------------- ----
----------------- -----
------- -----
------ -----
------- ----- - - ------
-------- --
-------- --
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------