Как сделать простой мини-календарь, выводящий текущий день?

В этой статье создадим мини-календарь с использованием HTML, CSS и JavaScript. Он будет отображать текущее число месяца, день недели, месяц и год. Вывод названия месяца и дня недели он будет осуществлять на том же языке, на котором отображается браузер.

Создание HTML-структуры

🚀 Разработку мини-календаря начнём с создания его HTML-структуры:

<div class="calendar">
  <div class="calendar-header calendar-month">Май</div>
  <div class="calendar-body">
    <div class="calendar-weekday">Воскресенье</div>
    <div class="calendar-day">19</div>
    <div class="calendar-year">2024</div>
  </div>
</div>

Вся разметка этого мини-календаря расположена в контейнере <div> с классом calendar:

<div class="calendar">
  ...
</div>

Внутри этого элемента находятся 2 тега <div>, которые делят его со своей стороны ещё на следующие части:

• «шапку» (calendar-header);
• основную часть (calendar-body).

В «шапке» будет выводиться название месяца:

<div class="calendar">
  <div class="calendar-header calendar-month">Май</div>
  ...
</div>

Основная часть в свою очередь разбита ещё на 3 секции. В них будет отображаться соотвественно день недели (calendar-weekday), число месяца (calendar-day) и год (calendar-year):

<div class="calendar-body">
  <div class="calendar-weekday">Воскресенье</div>
  <div class="calendar-day">19</div>
  <div class="calendar-year">2024</div>
</div>

Оформление внешнего вида

Настроим внешний вид календаря. Для этого добавим немного CSS-кода:

.calendar {
  min-width: 10rem;
  line-height: 1;
  text-align: center;
  background-color: #fff;
  border-radius: 0.5rem;
}

.calendar-header {
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5;
  background-color: #f57c00;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.calendar-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.calendar-month {
  text-transform: capitalize;
}

.calendar-weekday {
  color: #9e9e9e;
  font-size: 1.25rem;
  text-transform: capitalize;
}

.calendar-day {
  font-weight: bold;
  font-size: 4rem;
}

.calendar-year {
  color: #9e9e9e;
  font-size: 1.25rem;
}

Эти стили определяют то, как будет выглядеть наша HTML-структура мини-календаря на веб-странице 😉.

В этом CSS-коде раскладка элементов внутри <div class="calendar-body">...</div> осуществляется с помощью Flexbox:

.calendar-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

В целом, ещё хочется остановиться на минимальной ширине <div class="calendar">...</div>. В этом примере мы установили её этому элементу с помощью CSS-свойства min-width:

.calendar {
  min-width: 10rem;
}

Написание логики на JavaScript

Наконец, добавим небольшой код на JavaScript. Его будем использовать для получения текущей даты и обновления в соответствии с ней текстового содержимого HTML-элементов календаря. Таким образом, контент элементов всегда будет актуальным, и не придется вручную его каждый раз править.

Получение сегодняшней даты выполним с помощью объекта Date, а затем сохраним её в переменную now:

const now = new Date(); // получим текущую дату

Для получения различных компонент даты в строковом формате будем применять метод toLocaleString(locales, options). Параметры locales и options предназначены для настройки соответственно локали и правил форматирования. Чтобы указать параметры, но использовать локаль браузера по умолчанию, в качестве первого аргумента будем указывать текст 'default'.

Таким образом, для получения месяца, дня недели, числа месяца и года, и сохранения всех этих значений в переменные создадим следующий код:

const month = now.toLocaleString('default', { month: 'long' }); // 'май' (название месяца)
const weekday = now.toLocaleString('default', { weekday: 'long' }); // 'воскресенье' (день недели)
const day = now.toLocaleString('default', { day: '2-digit' }); // 19 (число месяца от 01 до 31)
const year = now.toLocaleString('default', { year: 'numeric' }); // 2024 (год из 4 цифр)

Для вставки этих значений компонентов даты на HTML-страницу выполним с помощью свойства textContent. Чтобы получить элементы в документе будем использовать метод querySelector:

document.querySelector('.calendar-month').textContent = month;
document.querySelector('.calendar-weekday').textContent = weekday;
document.querySelector('.calendar-day').textContent = day;
document.querySelector('.calendar-year').textContent = year;

Итоговый код:

const now = new Date();
const month = now.toLocaleString('default', { month: 'long' });
const weekday = now.toLocaleString('default', { weekday: 'long' });
const day = now.toLocaleString('default', { day: '2-digit' });
const year = now.toLocaleString('default', { year: 'numeric' });

document.querySelector('.calendar-month').textContent = month;
document.querySelector('.calendar-weekday').textContent = weekday;
document.querySelector('.calendar-day').textContent = day;
document.querySelector('.calendar-year').textContent = year;

Готовая реализация этого мини-календаря на GitHub: https://github.com/itchief/ui-components/tree/master/mini-calendar.