Десктопная версия
Мобильная версия
Десктопная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Calendar-Example-New-1024x933.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Calendar-Sizes-01@2x-1024x933.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Calendar-Sizes-02-1024x928.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Calendar-Sizes-03-1024x391.png)
Добавляйте к всплывающему окну тень уровня Z 3.
Используйте следующие стили типографики:
— месяц и год — Body M 500 (Normal);
— дни недели — Body S 300 (Normal);
— даты другого месяца — Body M 300 (Normal) серый;
— обычные даты — Body M 300 (Normal) черный;
— выбранная дата — Body M 500 (Normal) белый;
— дата сегодня — Body M 500 (Normal) черный.
Мобильная версия
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Mobile-Calendars@2x-1024x869.png)
Появляется в виде всплывающего окна на белой плашке без закруглений с тенью Z 4. К шапке календаря добавляется тень Z 1.
Цвет затененного фона под всплывающим окном — #F5F5F5 с прозрачностью 70%, rgba (245, 245, 245, 70).
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Mobile-Calendar-Metrics-1024x773.png)
Используйте следующие стили типографики:
— месяц и год — Body M 500 (Normal);
— дни недели — Body S 300 (Normal);
— даты другого месяца — Body M 300 (Normal) серый;
— обычные даты — Body M 300 (Normal) черный;
— дата сегодня — Body M 500 (Normal) белый;
— выбранная дата — Body M 500 (Normal) черный.