前端使用grid布局创建活动日历

活动日历是一个方便的工具，可帮助您管理和安排即将举行的活动。这对个人、组织和企业都有好处，让您可以跟踪重要的日期和截止日期。您可以使用它来安排会议、约会、社交聚会、假期、项目截止日期等等。通过使用活动日历，您可以可视化日程安排，以确保您不会错过重要的活动或截止日期。

在这篇文章中，我们将向您展示如何使用 CSS 网格创建事件日历。那么，让我们开始吧！

HTML 标记

要使用 CSS 网格创建事件日历，我们需要从 HTML 标记开始。在下面的代码片段中，你将看到我们创建了一个类为 `calendar` .在这个容器中，有七个 `calendar__weekday`  类，代表一周中的每一天。此外，还有类 `calendar__day` 表示每月的每一天。

<div class="calendar">
    <div class="calendar__weekday">Sun</div>
    <div class="calendar__weekday">Mon</div>
    <div class="calendar__weekday">Tue</div>
    <div class="calendar__weekday">Wed</div>
    <div class="calendar__weekday">Thu</div>
    <div class="calendar__weekday">Fri</div>
    <div class="calendar__weekday">Sat</div>


    <!-- Week 1 -->
    <div class="calendar__day">29</div>
    <div class="calendar__day">30</div>
    <div class="calendar__day">31</div>
    <div class="calendar__day">1</div>
    <div class="calendar__day">2</div>
    <div class="calendar__day">3</div>
    <div class="calendar__day">4</div>

    <!-- Repeat with the remaining weeks ... -->

</div>

`.calendar` 类为包含日历元素的设置样式。通过将 display 属性设置为 `grid` ，我们可以在容器上使用 CSS 网格布局。为了定义网格中列和行的数量和大小，我们使用 `grid-template-columns` 和 `grid-template-rows` 属性。

在此示例中，我们使用 `repeat(7, 1fr)` 创建 7 列，每列的宽度为 1fr。除了第一行 2rem,其余行的高度为 5rem。同时，为我们提供了一个包含 7 列和 6 行的网格，其中每个单元格代表日历中的一天。

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 2rem repeat(5, 5rem);
}

日历如下所示：

在单元格之间添加边框

在事件日历中的单元格之间添加边框至关重要。它使阅读更容易，并在视觉上将每一天分开。没有边界，很难区分每一天，尤其是当同一天安排了多个活动时。边框创建了清晰的层次结构，可以很容易地看到一天的结束和另一天的开始。

为我们的活动日历添加边框，我们可以使用 CSS `border` 属性。我们分别把 `border-left` 、 `border-top` 和  `border-right` 属性设置为1px。

.calendar {
    border-left: 1px solid rgb(203 213 225);
    border-top: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);
}

我们还使用该 `border-bottom` 属性在每个工作日元素的底部添加一个 1 像素的实心边框。

.calendar__weekday {
    border-bottom: 1px solid rgb(203 213 225);
}

最后，我们分别利用`border-bottom` 和`border-right` 属性，在每天的底部和右侧添加一个 1px 的实心边框。

.calendar__day {
    border-bottom: 1px solid rgb(203 213 225);
    border-right: 1px solid rgb(203 213 225);
}

要删除每七天（星期六）右侧的边框，我们可以使用 CSS 伪类 `:nth-child(7n + 7)` 并将其 `border-right` 属性设置为 0。

.calendar__day:nth-child(7n + 7) {
    border-right: 0;
}

将事件添加到日历

让我们通过添加一些事件来完成日历。为此，我们只需将事件放在日历元素的末尾即可。查看下面的示例代码，我们向其中向日历添加了一个事件。

<div class="calendar">
    <!-- Weekdays ... -->
    <!-- Days ... -->
    <!-- Events -->
    <div style="grid-column: 2 / 5; grid-row: 2; margin-top: 2rem">Metting</div>
</div>

为了在日历上定位事件，我们使用 `grid-column` 和 `grid-row` 属性。这些属性有助于我们指定元素在网格容器中的开始和结束位置。在上面的示例中，我们添加了一个具有 `div` style 属性的事件，该属性将其属性设置为 `2 / 5` ，并将其 `grid-row` `grid-column` 属性设置为 `2` 。这意味着该事件将跨越三列（从第 2 列到第 4 列）和一行（第 2 行）。通过调整这些值，我们可以将事件放置在日历网格上的任何位置。此外，我们还在事件的顶部添加了边距，以便从其 `div` 单元格的顶部边框中留出一些空间。

虽然理论上听起来不错，但布局目前被破坏了。

我们在日历中添加了一个活动，但它导致了一些问题。该事件占用三列，这意味着第一列之后的天数将推送到下一列。如果我们添加更多事件，这可能会成为一个更大的问题。

为了解决这个问题，我们需要在日历中定位每个天的单元格。我们可以使用 CSS 中的 `nth-child` 选择器来做到这一点，它匹配其父元素的每个第 n 个子元素。我们使用此选择器来定位每七个 `.calendar__day` 元素，并为每个元素分配不同的网格列。通过这样做，我们确保事件不会打乱日期的布局。

我们使用 CSS 中的 `7n+1` 公式来定位每周的第一个子节点。这意味着每周的第一列将始终表示从星期日开始的日期，从而使我们的日历布局在各周保持一致。

.calendar__day:nth-child(7n + 1) {
    grid-column: 1;
}

要为日历网格的第二行选择日期单元格，我们可以将 `nth-child` 选择器与 `n+8` 和 `-n+14` 公式一起使用。这听起来可能很复杂，但实际上很简单。

该 `n+8` 公式选择从位置 8 开始的每个元素，而公式 `-n+14` 选择直到位置 14 的每个元素，从容器中的最后一个元素开始向后计数。总之，它们使我们能够定位其父容器中位于第 8 位和第 14 位之间的所有 `.calendar__day` 元素。

一旦我们定位了这些元素，我们就会将它们设置为 `grid-row: 2` 确保它们出现在日历布局的第二行中。这样可以使它们位于第一行的工作日标签下方，同时位于添加到日历的任何事件之上。

.calendar__day:nth-child(n + 8):nth-child(-n + 14) {
    grid-row: 2;
}

以下是使用 `nth-child` 选择器定位单元格的其他 CSS 样式。通过将这些样式与CSS网格相结合，我们可以创建一个稳定的事件日历。这意味着我们可以添加和删除事件，而不必担心页面上其他元素的布局。

.calendar__day:nth-child(7n + 2) {
    grid-column: 2;
}

.calendar__day:nth-child(7n + 3) {
    grid-column: 3;
}

.calendar__day:nth-child(7n + 4) {
    grid-column: 4;
}

.calendar__day:nth-child(7n + 5) {
    grid-column: 5;
}

.calendar__day:nth-child(7n + 6) {
    grid-column: 6;
}

.calendar__day:nth-child(7n + 7) {
    grid-column: 7;
}


.calendar__day:nth-child(n + 15):nth-child(-n + 21) {
    grid-row: 3;
}

.calendar__day:nth-child(n + 22):nth-child(-n + 28) {
    grid-row: 4;
}

.calendar__day:nth-child(n + 29):nth-child(-n + 35) {
    grid-row: 5;
}

.calendar__day:nth-child(n + 36):nth-child(-n + 42) {
    grid-row: 6;
}

解决重叠事件

如果我们将多个事件放在同一行中，您可能会注意到它们重叠，导致视觉混乱，难以区分它们。

为了解决这个问题，我们可以使用 `margin-top` 属性在事件之间创建空间。通过调整每个事件的 `margin-top` 值，我们可以确保它们之间不重叠。

<div style="grid-column: 2 / 6; grid-row: 3; margin-top: 2rem">Design</div>
<div style="grid-column: 3 / 8; grid-row: 3; margin-top: 4rem">Implementation</div>

查看最终演示，亲眼看看结果！

原文: phuoc.ng/collection/…

原文链接：https://juejin.cn/post/7329329170541461544 作者：关山月