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

Kalend — React 日历组件(教程)

作者:互联网

Kalend — React 日历组件(教程)

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

查看 演示 或用法 实际应用

Github页面

准备

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

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

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

  1. 不要忘记导入单独的样式
    导入'kalend/dist/styles/index.css';
  2. 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} /> ,  
 },  
 },  
 ];

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

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

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