css 大日历_如何使用CSS Grid构建日历

css 大日历

Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.

使用CSS Grid构建日历实际上非常容易。 我想告诉你如何做。

Here's what you'll create by the end of this article:

这是在本文结尾处将创建的内容：

创建HTML (Creating the HTML)

You can tell from the image that the calendar contains three parts:

您可以从图像中看出日历包含三个部分：

1. The month indicator
   月份指标
2. The weekday/weekend indicator
   工作日/周末指标
3. The dates themselves
   日期本身

The best way to structure the HTML is to go with what feels right. We'll create the HTML according to these three sections:

构造HTML的最佳方法是顺其自然。 我们将根据以下三个部分创建HTML：

<div class="calendar">
  <div class="month-indicator">...</div>
  <div class="day-of-week">...</div>
  <div class="date-grid">...</div>
</div>

You should also be able to see we need seven columns for the grid.

您还应该能够看到网格需要七个列。

We'll focus the conversation on .day-of-week and .date-grid since we're only talking about grid.

由于我们只是在讨论网格，因此我们将讨论重点放在.day-of-week和.date-grid grid上。

构建网格 (Structuring the grid)

There are two ways to create the CSS Grid.

有两种创建CSS网格的方法。

The first way is to merge elements within .day-of-week and .date-grid into one selector. If we do this, we can set the selector in display: grid. Here's what the HTML would have looked like if we did this:

第一种方法是将.day-of-week和.date-grid元素合并到一个选择器中。 如果执行此操作，则可以在display: grid设置选择器。 如果执行此操作，则HTML的外观如下：

<div class="grid">
  <!-- Day of week -->
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>

  <!-- Dates -->
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  <!-- ... -->
  <button><time datetime="2019-02-28">28</time></button>
</div>

I discourage this method because the HTML loses its structural meaning. I prefer keeping .day-of-week and date-grid as separate elements if possible. This makes it easy for me to read/understand the code I've written.

我不鼓励使用此方法，因为HTML失去了其结构含义。 如果可能，我更喜欢将.day-of-week和date-grid保留为单独的元素。 这使我很容易阅读/理解我编写的代码。

Here's the HTML structure i chose to go with:

这是我选择使用HTML结构：

<div class="day-of-week">
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>
</div>

<div class="date-grid">
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  <!-- ... -->
  <button><time datetime="2019-02-28">28</time></button>
</div>

The best way to create a CSS Grid with the structure I proposed is to use subgrid. Unfortunately, most browsers don't support subgrid yet. In the meantime, the best way is to create two separate grids—one for .day-of-week and one for .date-grid.

用我建议的结构创建CSS网格的最佳方法是使用subgrid。 不幸的是，大多数浏览器尚不支持subgrid。 同时，最好的方法是创建两个单独的网格-一个用于.day-of-week ，一个用于.date-grid 。

Both .day-of-week and .date-grid can use the same seven-column grid.

.day-of-week和.date-grid都可以使用相同的七列网格。

/* The grid */
.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

推日期 (Pushing the dates)

February 2019 begins on a Friday. If we want the calendar to be correct, we need to make sure:

2019年2月从星期五开始。 如果我们希望日历正确无误，则需要确保：

1. 1 Feb 2019 falls on Friday
   2019年2月1日为星期五
2. 2 Feb 2019 falls on Saturday
   2019年2月2日为星期六
3. 3 Feb 2019 falls on Sunday
   2019年2月3日为星期日
4. And so on...
   等等...

With CSS Grid, this part is easy.

使用CSS Grid，这部分很容易。

CSS Grid has placement algorithm that kinda follows the following rules (if you didn't set grid-auto-flow to dense):

CSS Grid的放置算法大致遵循以下规则(如果未将grid-auto-flow为dense )：

1. Place items that has explicit grid-column or grid-row first

   将具有显式grid-column或grid-row放在第一位

2. Fill in the rest according to the last-placed item
   根据最后放置的项目填写其余部分

What this means is:

这意味着：

1. If the first item falls on column 6
   如果第一项位于第6列
2. The second item will be placed in column 7.
   第二项将放置在第7列中。
3. The third item will be placed on the next row, in column 1 (because there are only seven columns).
   第三项将放置在第一列的下一行中(因为只有七列)。
4. The fourth item will be placed in column 2,
   第四项将放置在第2列中
5. And so on...
   等等...

So, if we position 1 February on the sixth column (friday), the rest of the dates will be placed correctly.

因此，如果我们将2月1日定位在第六列(星期五)，则其余日期将正确放置。

Simple as that!

就那么简单！

/* Positioning the first day on a Friday */
.date-grid button:first-child {
  grid-column: 6;
}

Here's a codepen for you to play with:

这是一个代码笔供您使用：

See the Pen Building a Calendar with CSS Grid by Zell Liew (@zellwk) on CodePen.

请参阅CodePen上Zell Liew( @zellwk ) 撰写的 带有CSS网格的日历构建笔。

想了解更多？ (Want to learn more?)

This article contains one fraction of a component (a datepicker) from Learn JavaScript. There's so much more I want to show you. (But they're mostly JavaScript related topics).

本文包含Learn JavaScript的组件(日期选择器)的一小部分。 我还有很多想给你看的。 (但它们主要是与JavaScript相关的主题)。

For example, in Learn JavaScript, I show you how to:

例如，在“学习JavaScript”中，我向您展示了如何：

1. Build a calendar for any month (and any year)
   建立任何月份(和任何一年)的日历
2. Add a previous/next button to switch between months
   添加上一个/下一个按钮以在月份之间切换
3. Click on each date to display a date
   单击每个日期以显示一个日期

Here's what it looks like:

看起来是这样的：

---

---

Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

谢谢阅读。 本文最初发布在我的博客上 。 如果您想要更多的文章来帮助您成为更好的前端开发人员，请注册我的时事通讯 。

翻译自: https://www.freecodecamp.org/news/how-to-build-a-calendar-with-css-grid/

css 大日历