Календарь HTML

На курсах по JavaScript мы иногда затрагиваем тему построения HTML-календаря. Каркас календаря запрограммировать достаточно быстро, а вот на оформление CSS-стилями время тратить не хочется, потому было решено заранее прописать эти стили отдельной заметкой в блоге для дальнейшего быстрого применения. Пусть у нас есть календарь на июль 2084 года, сверстанный в HTML (фидл). Связь JavaScript с календарем обсудим в какой-нибудь из дальнейших заметок, сейчас лишь заметим, что заполнять подобный календарь вручную (название месяца в HTML-элементе caption, дни недели в th, дни месяца в td), без программирования, на практике никто не будет.

Календарь HTML и CSS-стили

Добавим правила для окраски дней месяца (со свойством background:linear-gradient(…)), классы для выходного дня и текущего дня месяца. Чтобы посмотреть работу классов .holyday и .today, нужно прописать их значения в соответствующих ячейках таблицы. Если речь пойдет только о выходных суббота-воскресение, то можно обойтись без классов, используя селекторы nth-child(…).

.calendar{
border:1px solid #bbb;
display: inline-block
}
.calendar table{
empty-cells: hide;
}
.calendar caption{
padding: 3px;
background: linear-gradient(to bottom,#ddd 10%, #bbb);
}
.calendar td{
padding: 2px 6px;
text-align: center;
border:1px solid #ccc;
background: linear-gradient(to bottom,#fff 10%, #ddd);
border-radius:0 0 3px
}

.calendar td:hover{
border:1px solid #888;
}
.calendar .holiday{
background: linear-gradient(to bottom,#fff 10%, #ffc);
}
.calendar .today{
font-weight:600;
border:1px solid #888;
}

Обозначения дней недели («Пн», «Вт», «Ср», «Чт», «Пт», «Сб», «Вс»), месяцев («Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь») можно взять на сайте локализации виджета jQuery Datepicker (https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ru.js), т.е. уже готового календаря с использованием JavaScript и библиотек jQuery и jQuery UI (подробней о jQuery UI). Интересный вариант календаря (это измененный jQuery UI Datepicker) на сайте с примерами использования jQuery Mobile; в некоторых случая может понадобиться более сложный календарь (например, календарь в стиле Boostrap)

Календарь HTML, готовый вариант разметки.