如何在日历日视图中布置事件
我正在使用React（HTML/CSS/JS）创建一个日历Web应用程序。我试图弄清楚如何以一种根据其开始和结束时间自动垂直和水平堆叠它们的方式将事件放入日历中。 Microsoft团队在他们的日历中做到这一点。我在这里提供了一个布局应该是什么样的图像。
我尝试使用Flexbox并尝试根据计算的重叠和偏移而绝对将它们定位。没有运气。任何帮助将不胜感激！
谢谢！
编辑： 我正在寻找有关算法的帮助来执行此操作。我不是在寻找特定的代码。
我有一系列事件
[
{start: datetime, end: datetime},
{start: datetime, end: datetime},
...
]
创建了一个函数，该函数返回事件之间“ colisions”的2x2矩阵。上面发布的图片的ex：
| a | b | c | d | |
|---|---|---|---|---|
| a | 1 | 1 | 0 | 0 |
| b | 1 | 1 | 1 | 0 |
| c | 0 | 1 | 1 | 0 |
| d | 0 | 0 | 0 | 1 |
我觉得我应该能够确定每个事件的宽度（100％，50％，33.3％， ETC）。以及页面左侧的偏移（即1列，coulmn 2。等）
I'm creating a calendar web application using React (HTML/CSS/JS). I'm trying to figure out how to place events into the calendar in a way that automatically stacks them vertically and horizontally based on their start and end times. Microsoft teams does this in their calendar. I've provided an image here of what the layout should look like.
I've tried using flexbox and tried positioning them absolutely based on calculated overlaps and offsets. No luck. Any help would be appreciated!
Thanks!
EDIT:
I'm looking for help with the algorithm to do this. Im not looking for specific code.
I have an array of events
[
{start: datetime, end: datetime},
{start: datetime, end: datetime},
...
]
I've created a function that returns a 2x2 matrix of "colisions" between events. E.x. for the pic posted above:
| a | b | c | d | |
|---|---|---|---|---|
| a | 1 | 1 | 0 | 0 |
| b | 1 | 1 | 1 | 0 |
| c | 0 | 1 | 1 | 0 |
| d | 0 | 0 | 0 | 1 |
I feel like from this I should be able to determine the width of each event (100%, 50%, 33.3%, etc). and the offset from the left of the page (i.e. column 1, coulmn 2. etc)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论