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

Image for post
Image for post

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

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

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

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

Почему airbnb React-Dates

  1. Подходил под потребности пользователей

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

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

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

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

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

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

Image for post
Image for post
Пустое поле

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

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

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

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

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

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

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

Image for post
Image for post
Выбор второй даты

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

Image for post
Image for post
Заполнены обе даты

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

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

  1. Скачать календарь Calendar MD v1–0.zip

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

Written by

UX Designer at SEMrush

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store