Календарь

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

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

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

1. Перетащите виджет Календарь из вкладки Базовые элементы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
2. При запуске приложения виджет календаря по умолчанию показывает сегодняшнюю дату. Чтобы установить другую дату, следуйте инструкциям ниже.
3. Перейдите в панель свойств и прокрутите до раздела Календарь.
4. Найдите свойство Начальная дата, нажмите Отменить и установите дату из переменной (состояние приложения, API и т. д.).

Показать/сохранить выбранную дату

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

Давайте построим пример отображения выбранной даты в виджете текста, похожем на приведенный ниже:

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

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

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

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

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

Детальные шаги:

1. Выберите виджет Календарь из дерева виджетов или области холста.
2. Выберите Действия в панели свойств (правое меню) и нажмите Открыть. Это откроет Редактор потока действий в новом всплывающем окне.
   1. Нажмите на + Добавить действие.
   2. Справа найдите и выберите действие Обновить переменную состояния приложения.
   3. Установите Выберите поле для обновления на имя переменной состояния приложения.
   4. Выберите Выберите тип обновления как Установить значение.
   5. Установите Источник значения как Из переменной.
   6. Укажите Источник как Состояние виджета.
   7. Установите Доступные параметры в calendarSelectedDay.
   8. Если выбрано несколько дат (выбор диапазона дат), вы можете выбрать, какую дату использовать. Можно выбрать установку начальной или конечной даты, установив часть диапазона в Начало или Конец. Для одиночного выбора даты (который по умолчанию), начальная и конечная дата будут одинаковыми.

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

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

1. Выберите Текст, перейдите в панель свойств и нажмите Установить из переменной.
2. Установите Источник как Состояние приложения и Доступные опции на переменную состояния приложения название.
3. (По желанию) Установите Формат метки времени, чтобы отобразить дату в определенном формате.
4. (По желанию) Установите значение по умолчанию, если хотите.
5. Нажмите Подтвердить.

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

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

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

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

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

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

2. Создание пользовательского интерфейса

Ваш пользовательский интерфейс должен включать как минимум два календаря и виджеты списка. Вот как вы можете это сделать:

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

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

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

Для применения фильтрации по дате:

1. Выберите ListView из дерева виджетов или области холста.
2. Нажмите на вкладку Запрос на бэкенде (справа от вашего экрана).
3. Запросите коллекцию. Пропустите, если вы это уже сделали.
4. Прокрутите вниз и нажмите на кнопку + Фильтр внизу.
5. Найдите Имя поля, нажмите на Отменить и выберите поле, по которому хотите применить фильтр.
6. Найдите раскрывающийся список Отношение, нажмите на Отменить и выберите отношение как Равно.
7. Установите Источник значения как Из переменной.
8. Укажите Источник как Состояние виджета.
9. Установите Доступные параметры на calendarSelectedDay.
10. Если выбрано несколько дат (выбор диапазона дат), вы можете выбрать, какую дату использовать. Можно выбрать установку начальной или конечной даты, установив часть диапазона в Начало или Конец. Для одиночного выбора даты (по умолчанию) начальная и конечная дата будут одинаковыми.
11. Нажмите Подтвердить.
12. После этого вы можете отобразить фактические данные в элементах пользовательского интерфейса.

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

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

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

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

1. Выберите Календарь из дерева виджетов или области холста.
2. Перейдите в панель свойств и прокрутите вниз до раздела Календарь.
3. Найдите свойство Цвет значков, нажмите на поле рядом с Отменить, выберите цвет, а затем нажмите Использовать цвет или нажмите на Отменить и введите код Hex непосредственно. Вы также можете выбрать цвет, нажав на палитру и кнопку Простой.

Разделение заголовка и значков

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

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

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

Для изменения высоты строки:

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