javascript - 在网页中设计日历时如何根据下一个数组输入更改存储在数组中的事件对象的属性

Question

一个。有一个场景，我正在尝试创建一个应该在所有网络浏览器中工作的事件日历。示例如下:b.假设我在上午 9 点 30 分到 10 点 30 分之间添加了一个事件，那么事件的总宽度将在日历中占 100%。C。现在我在上午 9 点 45 点到 11 点之间添加另一个事件，现在我希望点 (b) 中的第一个事件具有 50% 的宽度，并且这个新事件应该向右移动 50%。
d.假设现在我再次添加一个新事件，比如在上午 10 点到中午 12 点之间，所有事件的宽度应为 33%，并且事件应该相邻排列，没有任何重叠，并且一个接一个。

1. 我正在尝试使用 Java 脚本创建相同的内容。
2. 我能够在没有任何重叠的情况下添加最多两个事件。
3. 但是当我尝试添加第三个事件时，它重叠了。
4. 有一个将每个元素配置放入一个数组中的想法，当我尝试创建新元素时，我想检查数组中的先前元素配置并放置第三个事件。

有什么好的简单方法可以使用 Java scipt 在日历中设计此事件时间表？如果有任何更好的方法，请分享。

谢谢!!

Answer 1

尝试使用CSS flexbox，这里是一个例子，如果你添加一个新的元素，容器会调整到新的元素。

*{
  box-sizing: border-box;
}
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }

.flex-item {
  border: solid 1px black;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item: {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

<div class="flex-container">
	<div class="flex-item"><span class="counter">1</span></div>
	<div class="flex-item"><span class="counter">2</span></div>
	<div class="flex-item"><span class="counter">3</span></div>
	<div class="flex-item"><span class="counter">4</span></div>
</div>