Как создать календарь с помощью CSS Grid

Создать календарь с помощью CSS Grid на самом деле довольно просто. Я хочу показать вам, как это сделать.

Вот что вы создадите к концу этой статьи:

По изображению видно, что календарь состоит из трех частей:

1. Индикатор месяца
2. Индикатор буднего/выходного дня
3. Сами даты
   

Лучший способ структурировать HTML — использовать то, что кажется правильным. Мы создадим HTML в соответствии с этими тремя разделами:

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

Вы также должны увидеть, что нам нужно семь столбцов для сетки.

Мы сосредоточим разговор на .day-of-week а также .date-grid так как мы говорим только о сетке.

Структурирование сетки

Существует два способа создания сетки CSS.

Первый способ заключается в объединении элементов внутри .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>

Я не одобряю этот метод, потому что HTML теряет свое структурное значение. я предпочитаю держать .day-of-week а также date-grid как отдельные элементы, если это возможно. Это облегчает мне чтение/понимание кода, который я написал.

Вот структура 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>

Лучший способ создать CSS-сетку с предложенной мной структурой — использовать подсетку. К сожалению, большинство браузеров пока не поддерживают подсетку. А пока лучше всего создать две отдельные сетки — одну для .day-of-week и один для .date-grid.

Оба .day-of-week а также .date-grid можно использовать ту же сетку из семи столбцов.

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

Февраль 2019 года начинается в пятницу. Если мы хотим, чтобы календарь был правильным, нам нужно убедиться:

1. 1 февраля 2019 года выпадает на пятницу
2. 2 февраля 2019 года выпадает на субботу.
3. 3 февраля 2019 года выпадает на воскресенье.
4. И так далее…

С CSS Grid эта часть проста.

CSS Grid имеет алгоритм размещения, который как бы следует следующим правилам (если вы не установили grid-auto-flow к dense):

1. Поместите элементы, которые имеют явное grid-column или же grid-row первый
2. Заполните остальные в соответствии с последним размещенным элементом

Что это означает:

1. Если первый элемент попадает в столбец 6
2. Второй элемент будет помещен в столбец 7.
3. Третий элемент будет помещен в следующую строку, в столбец 1 (поскольку столбцов всего семь).
4. Четвертый элемент будет помещен в столбец 2,
5. И так далее…

Итак, если мы поместим 1 февраля в шестой столбец (пятница), остальные даты будут размещены правильно.

Просто как тот!

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

Вот codepen для вас, чтобы играть с:

См. перо Создание календаря с помощью CSS Grid Зелл Лью (@zellwk) на КодПен.

Хотите узнать больше?

Эта статья содержит одну часть компонента (выбор даты) из Learn JavaScript. Я так много еще хочу тебе показать. (Но в основном это темы, связанные с JavaScript).

Например, в разделе «Изучение JavaScript» я покажу вам, как:

1. Создайте календарь на любой месяц (и любой год)
2. Добавьте кнопку «предыдущий/следующий» для переключения между месяцами
3. Нажмите на каждую дату, чтобы отобразить дату

Вот как это выглядит:

Спасибо за чтение. Эта статья изначально была размещена на мой блог. Подписаться на моя рассылка если вы хотите больше статей, которые помогут вам стать лучшим разработчиком внешнего интерфейса.