Как я создал Vanilla Calendar Pro — легкий и гибкий календарь на JavaScript с использованием TypeScript

Привет, Habr!

Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla Calendar Pro собрал больше 480 звезд на GitHub и получает 17 тысяч скачиваний в месяц, я решил поделиться своей историей.

Хочу сразу отметить: я не претендую на лавры лучшего разработчика календарей и датапикеров. Эта статья о моем первом опыте в open source, о том, как я создавал проект с нуля и как он стал полезен другим разработчикам.

Как все начиналось

Летом 2022 года мне нужно было внедрить в проект календарь событий. Требовался простой инлайновый календарь, который:

1. Работал бы в модальном окне.

2. Позволял кастомизировать внешний вид в соответствии с дизайном.

3. По клику на дату выполнял редирект на страницу события.

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

Конечно, я мог бы попросить дизайнера упростить макет или смириться с лишней запятой перед годом. Но, честно говоря, мне стало интересно: а что, если сделать свой календарь?

Так появилась первая версия Vanilla Calendar Pro. «Vanilla» — значит нативный JavaScript, без сторонних зависимостей. Чтобы упростить интеграцию в другие проекты, я написал README с документацией API и примерами, после чего выложил в NPM.

Первый пользователь — и первая звезда

Через некоторое время мне пришло уведомление о первом issue в репозитории. Это был разработчик из Норвегии, который задал неожиданный вопрос:

«Есть ли какие-нибудь планы по поддержке возможности включения номеров недель в календаре? Не уверен насчет остального мира, но здесь, в Норвегии, мы очень часто обозначаем даты, используя номера недель. Поэтому возможность включить это было бы очень полезно.»

И с этого момента я понял, что этот календарь может быть полезен не только мне, но и другим разработчикам. Но что я получу за свои усилия? Для чего мне тратить свое личное время, чтобы какой-то мужик из Норвегии использовал календарь? Да ничего! Но мысль о том, что я сделал что-то полезное, что кто-то, скачав мой календарь, сэкономил время на разработку и теперь может сосредоточиться на более важных задачах — это оказалось вдохновляющим. И вот тогда я понял, что даже если это не приносит мне материальной выгоды, я все равно получаю удовлетворение от того, что мой проект помогает другим. Так я начал активно дорабатывать календарь, превращая его в более универсальное и гибкое решение, при этом самостоятельно разрабатывая дизайн, чтобы он был не только функциональным, но и удобным в использовании.

Чем Vanilla Calendar Pro отличается от других?

• Гибкие макеты: Вы можете полностью перестроить HTML-разметку календаря, добавив свои кнопки или кастомные элементы.

• Полный контроль стилей: Легко заменяйте любые CSS-классы, что позволяет использовать фреймворки вроде Tailwind CSS.

• Доступность (a11y): Все элементы снабжены aria-label и поддерживают клавиатурную навигацию.

• Интерактивные попапы: Позволяют выделять дни и показывать информацию о них прямо в календаре.

• Номера недель: Поддержка недельного формата, популярного в некоторых странах.

• Выбор времени: 12-часовой или 24-часовой формат, удобные ползунки или ввод вручную.

• Темы: Календарь автоматически переключается между светлой и темной темами, поддерживает кастомные.

• Локализация и интернационализация: Легкая локализация и настройка первых дней недели, выходных и праздников.

• Совместимость с фреймворками: Работает с React, Vue, Angular и любыми другими библиотеками и фреймворками благодаря нативному JS.

На самом деле, это далеко не все его возможности. Я не упомянул про утилиты, методы, действия и огромное количество настроек, которые позволяют кастомизировать календарь под любые нужды!

Немного цифр и документация

Vanilla Calendar Pro полностью написан на TypeScript, не имеет сторонних зависимостей, а минифицированный файл весит всего ~49.33 KB (13.52 KB gzip).

Я также подготовил подробную документацию, где есть:

• API-справочник

• Раздел «Изучить» с интерактивными песочницами.

Ссылка: https://vanilla-calendar.pro
А сам проект на GitHub доступен по ссылке: https://github.com/uvarov-frontend/vanilla-calendar-pro

Итоги

Да, это не революционный продукт. Это всего лишь еще один календарь/датапикер. Но для меня он стал важной частью пути в open source. Я рад, что сделал что-то полезное и смог помочь другим разработчикам.

Буду рад, если Vanilla Calendar Pro пригодится и вам. Спасибо, что дочитали!