Calendar

Calendar показывает даты и даёт их выбрать. Отсюда его применение: запись на приём, расписания, календарь событий, фильтр записей по дате.

Как добавить

1. Добавьте Calendar из раздела Base Elements палитры виджетов.

2. В разделе Calendar выберите Style: Modern или Material.

3. В Selection выберите Single Date (одна дата) или Date Range (диапазон).

4. Задайте начальное значение для выбранного режима:

   • для Single Date — Initial Date;
   • для Date Range — Initial Range Start и Initial Range End.

Например, Single Date подходит для записи на приём, а Date Range — для бронирования отеля. Начальную дату или диапазон можно взять из состояния приложения, с бэкенда, из ответа API или другого источника.

Выбранная дата

Выбранную дату даёт состояние виджета, а событие позволяет выполнить действия в момент выбора:

• Состояние calendarSelectedDay — выбранная дата. Чтобы использовать её в свойстве или действии, выберите Set from Variable > Widget State > calendarSelectedDay.
• Событие On Date Selected — срабатывает, когда пользователь выбирает дату. Настраивается на вкладке Actions виджета.

Например, на On Date Selected можно обновлять список свободного времени для даты из calendarSelectedDay.

Настройка

Выделите Calendar и настройте вид и поведение в разделе Calendar.

Раскладка и навигация

• Icon Colors — цвет значков навигации.
• Week View — одна неделя вместо целого месяца.
• Start week on Monday — неделя начинается с понедельника, а не с воскресенья.
• Row Height — размер ячейки с датой. В стиле Modern ячейки квадратные, так что значение задаёт и ширину, и высоту.
• Header — Label показывает месяц и год текстом, Dropdown позволяет перейти к другому месяцу или году из списка.
• Months Shown — сколько месяцев показывать рядом. С несколькими месяцами удобнее выбирать диапазон.
• Cell Radius — скругление ячеек. Для выбранной даты его перекрывает скругление из Selected Date Style, для концов диапазона — из Range Style.
• Show Outside Days — заполняет первую и последнюю неделю датами соседних месяцев.
• Fixed Weeks — всегда шесть недель, чтобы высота календаря не прыгала при смене месяца.
• Show Week Numbers — номер недели в году рядом с каждой неделей.
• Show Navigation — кнопки перехода к предыдущему и следующему месяцу. Выключите, если месяц переключают ваши действия.
• Booked Dates — список значений DateTime, которые нельзя выбрать, например занятые дни. Если заняты 15 и 16, календарь покажет 14, 15, 16, 17.

Стили дат

• Title Style — заголовок с месяцем и годом.
• Day of Week Style — подписи дней недели над датами.
• Date Style — обычные даты.
• Selected Date Style — выбранная дата.
• Range Style — выбранный диапазон, включая скругление на концах.
• Today Date Style — сегодняшняя дата.
• Booked Date Style — даты из Booked Dates.
• Inactive Date Style — неактивные даты, например не из текущего месяца.