Компонент календаря в Material Design на основе фреймворка airbnb React-Dates

Что это за компонент

История потребности в компоненте

Для проекта, над которым я работаю понадобился компонент календаря. В разработке был использован фреймворк Material-UI, календарь которого не отвечал потребностям пользователей. Пользователям необходимо постоянно работать с периодами, заполняя различные формы с большим количеством полей.

Разработку собственного компонента нам не позволяли сроки (как всегда). После рассмотрения около десяти вариантов различных компонентов фреймворков, выбор пал на airbnb React-Dates.

Почему airbnb React-Dates

1. Подходил под потребности пользователей
2. Хорошо спроектировано взаимодействие календаря
3. Имеет управление с клавиатуры (в том числе, при переходе на текстовое поле календаря с помощью tab, календарь открывается автоматически — очень полезно, если форма с большим количеством полей)
4. Отлично кастомизируется под необходимые нужды (заметно, что оригинал сильно отличается от нашей костамизации под Материальный Дизайн)

Кастомизация компонента

Поскольку весь интерфейс у нас был на основе материального дизайна (чуть выше писал о фреймворке, который используется), было необходимо привести компонент в соответсвующий вид.

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

Получилось два символа: текстовое поле календаря и попап с выбором дат. У каждого большой набор параметров, чтобы можно было использовать в любых условиях.

Разрабатывались символы исключительно под потребности текущего проекта. Архитектур символов использовалась та, что была в проекте и немного упрощена. Например, палитра использовалась во всем проекте на множестве компонентов, поэтому перекачивала и в этот символ. Тоже произошло с пиктограммами.

Как компонент работает

Пустое поле

Текстовое поле стандартное вызывается через data picker/input. Настраиваются компоненты ввода через поля 01.input и 02.input, которые имеют два состояния: empty и complited. У каждого поля есть так же состояния фокуса — необходимо поменять bg.color на необходимый цвет из палитры (я применяю серый цвет, но вы можете использовать любой).

Пиктограммы так же могут изменять цвет на любой из палитры, чтобы можно было сделать их ярче или неактивными при желание. Для этого просто поменять параметр ic.clr на необходимый.

Эмдаш по центру так же может быть заменен на любой текстовый символ символ (например, →) или необходимую пиктограмму (как это сделано в оригинальном оформление фреймворка).

Выбор первой даты

Для выбора развернутого календаря пройдите по пути data picker/calendar и выберите календарь с одним или двумя месяцами.

Пусть не пугает большое количество параметров в календаре — работают они просто и у них простой порядок.

Для большей аутентичности можно вставить любой месяц как он есть на самом деле. Поля дат имеют формат 1r1c, где r — row (строка), c — column (столбец). Заполняются они очень просто: начинайте с первой строки, первого столбца и через tab вводите числа по порядку, а на месте отсутствующих чисел ставиться пробел. В поле mo.name вставляется название месяца. Эта настройка календаря с двумя месяцами занимает меньше 2-х минут.

Выбор второй даты

Чтобы отметить выбранные месяца, промежуточные и наведения мыши используйте настройку для каждого числа num.clr для выбора цвета непосредственно цифры и bg.clr для подложки для нее. Цвета подложки выбираются из палитры. А вот чтобы цвет цифры поменять необходимо создавать дополнительно компонент, дублирующий data picker/other/num color/цвет , где будет изменен цвет на необходимый.

Заполнены обе даты

Как установить себе

Могу предоставить компонент лишь дизайнерам, чтобы быстрее собирать макеты, показывать пользователям и тестировать интерфейс. Я уверен, что любой фронтендер в вашей компании установит и кастомизирует компонент быстрее, чем вы настроите его в сами в Sketch-е.

1. Скачать календарь Calendar MD v1–0.zip
2. Разархивировать
3. Открыть sketch-файл
4. Скопировать артборд Period-all себе в проект (артборд можно удалить, так как все символы установились с переносом артборда)
5. Начать пользоваться

P. S. Замечу, что делал его одной левой. Могут быть еще возможности для улучшения. Прошу писать о своих идеях мне.