首页 > 其他分享> > Kalend — React 日历组件（教程）

Kalend — React 日历组件（教程）

2022-09-04 11:31:24 作者：互联网

Kalend — React 日历组件（教程）

Kalend 是 React 的日历组件，支持在多个视图中显示事件，并具有相当程度的自定义。

准备

安装后 Kalend 包您可以从设置基本视图开始。

 <Kalend  
 onNewEventClick={onNewEventClick}  
 初始视图={日历视图.WEEK}  
 onEventClick={onEventClick}  
 事件={[]}  
 初始日期={新日期().toISOString()}  
 时区={'欧洲/柏林'}  
 />

Kalend 正常工作的两个重要事项：

不要忘记导入单独的样式
导入'kalend/dist/styles/index.css'；
Kalend 从其父级继承高度，这是正确布局所必需的。如果日历网格未正确呈现，请务必检查父元素是否使用百分比或绝对值正确拉伸。

活动

在将事件传递给 Kalend 之前检查它们的格式是否正确。基本格式需要 id、ISO 字符串中的日期、带有其他可选值（如时区或颜色）的摘要。

 常量事件 = [  
 {  
 id: '5203e5d0-f79d-4a55-b03c-f06a074251cf',  
 startAt：'2022-09-03T00：14：49.574Z'，  
 endAt: '2022-09-03T02:01:49.574Z',  
 摘要：'测试事件'，  
 颜色：“蓝色”，  
 全天：假，  
 timezoneStartAt: 'UTC',  
 },  
 ];

将事件设置为 一整天 将其位置从日历网格移动到标题。对于多日事件，您不需要将它们设置为 allDay，因为这是在渲染期间明确设置的。

回调

与 Kalend 的基本交互是通过作为 props 传递给组件的回调函数完成的。

创建新事件——onNewEventClick

每当您单击日历网格中的空白区域时，都会调用回调 onNewEventClick 并使用创建新事件所需的必要数据。为简单起见，您可以只使用 startAt 和 endAt 日期并使用它来创建新事件。

在月视图中，当您单击日列标题时会调用回调。

 常量 onNewEventClick = (数据: OnNewEventClickData) => {  
 常量事件数据 = {  
 startAt：数据.startAt，  
 endAt：数据.endAt，  
 };  
 };

点击事件——onEventClick

单击事件将返回您在事件数组中传递给 Kalend 的原始对象。

 常量 onEventClick = (数据: OnEventClickData) => {  
 ……  
 };

定制

道具

日历的使用方式因地区而异，或者只是根据偏好，因此您可以使用以下命令覆盖默认行为道具 .

您可以将默认开始日期更改为星期日，在 12/24 之间切换时间格式，更改语言，自动滚动到当前时间或其他选择的值。

用户界面

对于 UI 的更高级更改，可以将自定义组件用于导航按钮或日期标题。这可以通过将 ref 传递给 Kalend 并访问内部函数来完成。

 常量 kalendRef = useRef(); 常量 goForward = () => {  
 kalendRef?.current?.navigateForward();  
 }; …… <> <button onClick={goForward}>向前</button> <Kalend  
 calendarRef={calendRef}  
 ......  
 /> </>

要从 Kalend 获取当前值，您可以使用另一个回调函数 onStateChange。

 常量 kalendRef = useRef(); const [selectedDate, setSelectedDate] = useState(  
 日期时间.now()  
 ); 常量 onStateChange = (状态: KalendState) => {  
 setSelectedDate(state.selectedDate);  
 }; …… <Kalend  
 calendarRef={calendRef}  
 onStateChange{onStateChange}  
 ......  
 />

造型

Kalend 主要使用 CSS 作为类名前缀的样式 卡伦德__ 因此很容易根据您的需要调整样式。但是请注意，未来的更新可能会破坏您的配置，或者您可能会破坏布局计算。

可以通过将样式值传递给事件对象来更改每个项目的事件样式。

 常量事件 = [  
 {  
 编号：'123'，  
 ...  
 风格： {  
 textDecoration: 'line-through',  
 边框：'实心 1px 红色'，  
 背景：“白色”，  
 颜色：黑色'，  
 },  
 },  
 ];

如果您想更多地更改事件并添加一些按钮，您可以为每个视图传递自定义组件。请注意，根据高度、宽度或与其他事件的关系，事件的空间有限，所以不要忘记检查结果。

 常量事件 = [  
 {  
 编号：'123'，  
 孩子们： {  
 议程查看：<AgendaEvent summary={summary} /> ,  
 天视图：<Event summary={summary} /> ,  
 月视图：<MonthEvent summary={summary} /> ,  
 },  
 },  
 ];

本文链接：https://www.qanswer.top/12134/22580411

标签：常量,日历,视图,React,事件,组件,Kalend
来源： https://www.cnblogs.com/amboke/p/16654699.html