Сколько раз вы откладывали идею встроить свой календарь в корпоративную панель, потому что готовые плагины громоздки, а писать с нуля долго? За полчаса можно собрать лаконичный, но гибкий календарь только на HTML и CSS. Никаких тяжёлых библиотек — чистый код, который легко дополнить логикой расписания. Вместе пройдём путь от базовой разметки до тонкой стилизации и оставим в руках готовый фундамент для любого виджета.
Сразу по сути:
- Семантичная разметка — без лишних div’ов.
- CSS Grid превращает таблицу в адаптивную сетку.
- Медиа‑запросы и logical‑properties дают мобильную отзывчивость.
- Тематизация через CSS‑переменные за две строки.
Строим скелет: минимальная HTML‑структура
Начнём с самого простого. Представьте сервис бронирования переговорок: нужно показать месяц и дать пользователю кликать по ячейкам. Вместо тяжелой таблицы используем div’ы, чтобы позже легко переключаться между видами «месяц», «неделя» и «день». Оставим только значимые теги — header для навигации и section, в который лягут дни. Это скелет, на который мы нарастим стиль, а логика JS подключится позже.
- Создайте <div class=»calendar»> как корневой контейнер
- Внутри добавьте <header> с кнопками навигации
- Сделайте <div class=»calendar__grid»> для сетки дней
- Заполните аббревиатуры дней недели <abbr>
- Добавьте 42 ячейки — полный вид месяца
<div class="calendar">
<header class="calendar__header">
<button aria-label="Предыдущий месяц">‹</button>
<h2>September 2025</h2>
<button aria-label="Следующий месяц">›</button>
</header>
<div class="calendar__grid">
<abbr title="Monday">Mon</abbr><abbr title="Tuesday">Tue</abbr><abbr title="Wednesday">Wed</abbr>
<abbr title="Thursday">Thu</abbr><abbr title="Friday">Fri</abbr><abbr title="Saturday">Sat</abbr>
<abbr title="Sunday">Sun</abbr>
<!-- 42 day‑cells -->
<button class="day">1</button>
<!-- … -->
<button class="day">30</button>
</div>
</div>
Теперь у вас чистая, юзер‑френдли разметка, которую понимают и скрин‑ридеры.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Живое расположение: подключаем CSS Grid
Чтобы превратить набор кнопок в аккуратную таблицу‑календарь, подключаем CSS Grid. Задаём семь равных колонок и автозаполнение строк. Преимущество: одна декларация покроет любую длину месяца, а gap создаст воздух между ячейками. Разметка остаётся неизменной — вся магия в стиле.
- Определите grid-template-columns: repeat(7, 1fr)
- Используйте grid-auto-rows для одинаковой высоты
- Оставьте gap: 0.25rem для дыхания
- Выровняйте заголовок через grid-column: 1 / -1
.calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(44px, 1fr);
gap: .25rem;
}
.calendar__header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-bottom: .5rem;
}Grid даёт свободу: вы можете менять порядок элементов, не трогая HTML.
Календарь без лупы: делаем адаптивность
Половина трафика — мобильная. Мы уменьшаем размер ячейки, переключаемся на компактный шрифт и прячем аббревиатуры дней недели. Используем media‑queries на основе контейнера: календарь встроится в любой слой, хоть в боковую панель. Логические свойства inset‑block стартуют с CSS Logical Properties и помогут при RTL‑языках.
- @container (max-width: 480px) { .calendar__grid {grid-auto-rows: 32px} }
- Сократите font-size до 0.8rem для .day
- Скройте аббр при ширине < 400px через display:none
- Добавьте touch-friendly hit‑area padding-inline: .5rem
@media (max-width: 480px) {
.calendar__grid {
grid-auto-rows: 32px;
}
.calendar__grid abbr { display: none; }
.day {
font-size: .8rem;
padding: 0;
}
}Адаптивные правила занимают три условия, но экономят десятки пикселей.
Мелочи решают: декоративные акценты
Пользователь проводит глазами секунды, и цветовое пятно решает, заметит ли он нужный день. Подсветите сегодня через accent‑color или radial‑gradient фон. Добавьте плавное изменение высоты ячейки при наведении — animation‑timeline покажет интерактивность, не требуя JS.
- Включите :focus-visible стиль для клавиатуры
- Используйте CSS variable —accent делает темизацию
- Поставьте transition: background 120ms ease‑out
- Добавьте data‑state=»busy» для зарезервированных слотов
:root {
--accent: #3B82F6;
}
.day[today] {
background: var(--accent);
color: #fff;
border-radius: .5rem;
}
.day:hover {
background: color-mix(in srgb, var(--accent) 20%, #fff);
cursor: pointer;
transition: background .12s ease-out;
}Минимум кода — максимум вовлечения: цвета и плавность удержат внимание.
Попробуйте внедрить базовый шаблон в свой pet‑проект прямо сейчас — первые результаты удивят.
Готовность к данным: слой для JavaScript
HTML и CSS закрывают визуальную часть, но календарь живёт данными. Сохраним чистоту: JS остаётся тонким слоем, подписывается на клики и меняет состояние через data‑атрибуты. Такой подход упрощает тестирование и кэширование стилей — логика и представление разделены.
- Подключите один модуль calendar.js
- Используйте addEventListener(‘click’, handler) на .calendar
- Манипулируйте data‑selected и aria-pressed
- Загружайте события fetch(‘/api/events?month=2025-09’)
document.querySelector('.calendar')
.addEventListener('click', e => {
if (!e.target.matches('.day')) return;
const day = e.target;
day.toggleAttribute('data-selected');
day.setAttribute('aria-pressed', day.hasAttribute('data-selected'));
});
Календарь остаётся доступным, а JavaScript отвечает только за динамику.
Чек‑лист финальной сборки
| Шаг | Действие |
| HTML‑скелет | Созданы header + grid‑контейнер |
| CSS Grid | 7 колонок, автоматические строки |
| Медиа‑запросы | Сетки уменьшаются до 32px |
| Декор | Добавлены hover и accent‑color |
| JS‑слой | События подключены к data‑state |
| Тест | Проверена доступность клавиатурой |
Следуя пунктам, вы получите производительный календарь, готовый к продакшену.
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
