Calendar

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

Как добавить

  1. Перетащите Calendar из раздела Base Elements палитры виджетов.
  2. В Calendar Properties включите Week View, если нужна одна неделя вместо целого месяца.
  3. Свойство Calendar задаёт дату, на которой календарь открывается. Не задали — откроется на сегодняшней.
  4. Настройте режим выбора и оформление под свою задачу.

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

Что делать с выбранной датой

Выбор даты даёт две вещи — значение и событие:

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

Одно дополняет другое. Типичная связка: на On Date Selected повесить действие обновления состояния, а значение для него взять из Widget State > calendarSelectedDay. Событие отвечает за то, когда сработает действие, состояние — за то, какая дата выбрана.

совет

При выборе диапазона calendarSelectedDay отдаёт начало и конец: нужную границу указывают в Range Part — Start или End. При выборе одной даты обе границы совпадают.

Настройки

Выделите Calendar и откройте Calendar Properties:

  • Calendar — дата, на которой календарь открывается.
  • Icon Colors — цвет стрелок перелистывания.
  • Two-row Header — шапка в две строки вместо одной.
  • Week View — показывать неделю, а не месяц.
  • Start week on Monday — начинать неделю с понедельника. Выключено — неделя начинается с воскресенья; для русскоязычного приложения эту настройку нужно включить.
  • Row Height — высота строки календаря.
  • Title Style — стиль надписи с месяцем и годом.
  • Day of Week Style — стиль подписей дней недели.
  • Date Style — стиль обычных дат.
  • Selected Date Style — стиль выбранной даты.
  • Inactive Date Style — стиль неактивных дат, например чисел соседних месяцев.
перевод официальной документации FlutterFlow

обновлено

⌕ ESC