Главная / Каталог / UI-компоненты
«Календари и время» — 5 блоков выбора даты
Цена: 590 ₽
Месячный календарь, выбор диапазона, слоты записи, лента дней и таймлайн — на чистом JS, без библиотеки на 90 килобайт.
Набор закрывает всё, для чего обычно тянут datepicker: выбрать день, выбрать период, записаться на время, пролистать ближайшие дни, показать расписание. Пять блоков на ванильном JS с префиксом классов prd- — вставляются в готовый проект и ничего не перебивают.
Две вещи сделаны так, как редко делают в чужих календарях. Неделя начинается с понедельника: штатный getDay() считает от воскресенья, и именно поэтому календари иногда «съезжают» на день. И месяцы склоняются — в шапке «Сентябрь 2026», а в подписи «5 сентября», а не «5 сентябрь». Шестая строка сетки рисуется только когда нужна, поэтому календарь не прыгает по высоте между месяцами.
В выборе диапазона второй клик раньше первого просто меняет границы местами — человека не заставляют начинать заново. В слотах занятое время зачёркнуто, но остаётся на месте: если убрать его совсем, кажется, что свободных окон мало. В ленте дней сегодня подписано «сегодня», завтра — «завтра», дальше идёт день недели, чтобы не считать даты в уме. Таймлайн строится от одного опорного времени и честно уводит поздние пункты на следующий день.
Что умеет
- Месячный календарь с метками событий и границами дат
- Неделя с понедельника и склонение месяцев
- Выбор диапазона с пресетами и подсчётом ночей
- Слоты времени по частям дня, занятые видны и зачёркнуты
- Компактная лента дней с числом свободных окон
- Таймлайн от опорного времени с переходом через полночь
- Ноль зависимостей, все функции наружу через prdCalendar
- aria-label, disabled у недоступных дат, prefers-reduced-motion
Разделы
- Месячный календарь
- Выбор диапазона
- Слоты времени
- Лента дней
- Таймлайн дня