标签：常量 日历 视图 React 事件 组件 Kalend
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} /> ,
},
},
];
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/12134/22580411
标签：常量,日历,视图,React,事件,组件,Kalend 来源： https://www.cnblogs.com/amboke/p/16654699.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。