Перейти к основному содержимому

Календарь

Виджет Календарь отображает дни месяца и неделю. Вы можете использовать виджет Календарь для фильтрации списка событий по дате. Например, для отображения назначений на конкретную дату.

Добавление календаря в проект​

Чтобы добавить виджет Календарь в проект:

  1. Перетащите виджет Calendar из вкладки Base Elements (на панели виджетов) или добавьте его напрямую в дерево виджетов.
  2. При запуске приложения виджет календаря по умолчанию отображает текущую дату. Чтобы установить другую дату, следуйте инструкциям ниже.
  3. Перейдите на панель свойств и прокрутите вниз до раздела Calendar.
  4. Найдите свойство Initial Date, нажмите Unset и установите дату из переменной (состояние приложения, API и т. д.).

Отображение/сохранение выбранной даты​

При выборе или изменении даты в календаре вы можете отобразить её на странице или сохранить в переменной/поле (тип данных Timestamp) для последующего доступа.

Давайте создадим пример отображения выбранной даты в виджете Text, который выглядит следующим образом:

Шаги для отображения выбранной даты в виджете Text следующие:

1. Создание переменной состояния приложения​

Изменение даты в виджете календаря генерирует выбранную дату в переменной с именем calendarSelectedDay. Вы не можете использовать это значение напрямую в виджете Text, поскольку виджет Text принимает только строковые значения. Поэтому создайте переменную состояния приложения, которая будет хранить значение calendarSelectedDay, а затем отобразите выбранную дату в виджете Text (с использованием опций формата даты).

Инструкции по созданию переменной состояния приложения см. здесь.

Она должна выглядеть примерно так:

app-state-variable-calendar.avif

2. Сохранение выбранной даты в переменной состояния приложения​

Чтобы сохранить выбранную дату в переменной состояния приложения, используйте событие On Date Selected и добавьте действия для обновления переменной состояния приложения:

Подробные шаги:

  1. Выберите виджет Calendar в дереве виджетов или на холсте.
  2. На панели свойств (правое меню) выберите Actions и нажмите Open. Откроется редактор потоков действий в новом всплывающем окне.

    1. Нажмите + Add Action.

    2. Справа найдите и выберите действие Update App State.

    3. Установите Select field to update в имя переменной состояния приложения.

    4. Выберите Select Update Type как Set Value.

    5. Установите Value Source в From Variable.

    6. Установите Source в Widget State.

    7. Установите Available Options в calendarSelectedDay.

    8. Если включен множественный выбор дат (выбор диапазона), вы можете указать, какую дату выбрать. Выберите начало или конец диапазона, установив Range Part в Start или End. Для одиночного выбора дат (по умолчанию) начало и конец диапазона совпадают.

3. Отображение даты в виджете Text из переменной состояния приложения​

Чтобы отобразить выбранную дату в виджете Text:

  1. Выберите Text, перейдите на панель свойств и нажмите Set from Variable.
  2. Выберите Source как App State и Available Options в имя переменной состояния приложения.
  3. (Необязательно) Установите Timestamp Format для отображения даты в определённом формате.
  4. (Необязательно) Установите значение по умолчанию, если требуется.
  5. Нажмите Confirm.

Использование календаря для фильтрации списка​

Вам может потребоваться использовать виджет календаря для фильтрации списка событий (назначений, встреч, билетов и т. д.). Для этого примените фильтр к запросу на бэкенде и передайте выбранную дату как параметр.

Давайте создадим пример отображения списка задач (из коллекции Firestore) на основе даты. Вот как это выглядит:

Шаги для использования календаря в фильтрации списка следующие:

1. Подготовка данных​

Перед использованием календаря для фильтрации списка убедитесь, что у вас есть список элементов с хотя бы одним полем, содержащим дату. Эта дата будет использоваться для сопоставления с датой, выбранной в календаре. Пропустите, если данные уже в таком формате.

Вы можете создать коллекцию Firestore с полем даты, как показано ниже:

calendar-prepare-data.avif

2. Создание интерфейса​

Ваш интерфейс должен включать как минимум два виджета Календарь и ListView. Добавьте их следующим образом:

  1. Добавьте виджет Calendar. Для улучшения пользовательского опыта переключитесь на недельный вид.
  2. Добавьте ListView и отобразите данные из коллекции Firestore.

3. Применение фильтра по дате к запросу на бэкенде​

Наконец, добавьте фильтр к существующему запросу на бэкенде или новому и укажите выбранную дату из календаря.

Чтобы применить фильтр по дате:

  1. Выберите ListView в дереве виджетов или на холсте.
  2. Нажмите на вкладку Backend Query (справа на экране).
  3. Выполните запрос коллекции. Пропустите, если это уже сделано.
  4. Прокрутите вниз и нажмите кнопку + Filter внизу.
  5. Найдите Field Name, нажмите Unset и выберите поле, к которому хотите применить фильтр.
  6. В выпадающем списке Relation нажмите Unset и выберите отношение Equal To.
  7. Установите Value Source в From Variable.
  8. Установите Source в Widget State.
  9. Установите Available Options в calendarSelectedDay.
  10. Если включен множественный выбор дат (выбор диапазона), вы можете указать, какую дату выбрать. Выберите начало или конец диапазона, установив Range Part в Start или End. Для одиночного выбора дат (по умолчанию) начало и конец диапазона совпадают.
  11. Нажмите Confirm.
  12. После этого вы можете отобразить фактические данные в элементах интерфейса.

Настройка календаря​

Панель свойств позволяет настроить внешний вид и поведение виджета.

Изменение цвета иконок​

Вы можете изменить цвет иконок, отображаемых в правом верхнем углу календаря. Для этого:

  1. Выберите Calendar в дереве виджетов или на холсте.
  2. Перейдите на панель свойств и прокрутите вниз до раздела Calendar.
  3. Найдите свойство Icon Colors, нажмите на поле рядом с Unset, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопку Palette и Simple.

Раздельное размещение заголовка и иконок​

По умолчанию заголовок календаря (отображающий текущий месяц и год) и иконка для переключения месяца размещаются в одной строке. Если вы хотите разместить их в отдельных строках, перейдите в Properties Panel > Calendar > и включите опцию Two-row Header.

Изменение высоты строки​

Изменение высоты строки позволяет настроить высоту календаря в соответствии с вашим дизайном.

Чтобы изменить высоту строки:

  1. Выберите Calendar в дереве виджетов или на холсте.
  2. Перейдите на панель свойств и прокрутите вниз до раздела Calendar.
  3. Найдите свойство Row Height и введите значение.