Календарь

Виджет «Календарь» показывает дни в месяце и неделе.

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

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

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

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

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

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

1. Создайте локальную переменную состояния
2. Сохранение выбранной даты в локальной переменной состояния
3. Отображение даты в виджете Text из локальной переменной состояния

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

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

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

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

Ниже приведены подробные шаги:

1. Выберите виджет Calendar в дереве виджетов или в области холста.
2. Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне.
   1. Нажмите на + Добавить действие.
   2. В правой части найдите и выберите действие Обновить локальное состояние.
   3. Установите в поле Select для обновления имя переменной Local State.
   4. Выберите тип обновления Select Update Type — Set Value.
   5. Установите для параметра Источник значения значение Из переменной.
   6. Установите Источник на Состояние виджета.
   7. Установите для параметра Available Options значение calendarSelectedDay.
   8. При выборе нескольких дат (выбор диапазона дат) вы можете выбрать, какую дату выбрать. Вы можете выбрать начальную или конечную дату, установив Range Part в Start или End. Для выбора одной даты (что происходит по умолчанию) начальная и конечная дата будут одинаковыми.

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

• Выберите Текст, перейдите на панель свойств и нажмите Установить из переменной.
• Выберите Источник как Местное государство и Доступные параметры для имени переменной Местное государство.
• (Необязательно) Установите Формат метки времени, чтобы отобразить дату в определенном формате.
• (Необязательно) Установите значение по умолчанию, если хотите.
• Нажмите кнопку Подтвердить.

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

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

Ниже описаны шаги по использованию календаря для фильтрации списка:

1. Подготовьте данные
2. Создание пользовательского интерфейса
3. Применение фильтра по дате в запросе на бэкенде

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

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

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

• Добавьте виджет Календаря. Чтобы обеспечить лучший пользовательский опыт, вы можете переключиться на представление недели. Как это сделать, смотрите здесь.
• Добавьте ListView и покажите данные из коллекции Firestore.

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

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

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

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

Ниже приведены инструкции по добавлению подкладок.

Здесь приведены инструкции по настройке выравнивания.

Чтобы изменить цвет выбранной даты:

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

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

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

Чтобы отобразить даты по неделям, а не по месяцам:

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

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

Чтобы показать недели, начинающиеся с понедельника:

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

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

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

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

Чтобы изменить стиль заголовка:

• Выберите Календарь в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль заголовка. Щелкните по нему и откройте раздел.
• Здесь вы найдете инструкции по изменению стиля заголовка.

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

• Выберите Календарь в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль дня недели. Щелкните по нему и откройте раздел.
• Теперь вы можете найти инструкции по стилизации здесь.

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

• Выберите Календарь в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела «Стиль даты«. Щелкните по нему и откройте раздел.
• Теперь вы можете найти инструкции по стилизации здесь.

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

• Выберите Календарь в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль выделенной даты. Щелкните по нему и откройте раздел.
• Здесь вы найдете инструкции по стилизации.

Неактивные даты — это даты, которые не относятся к текущему месяцу.

Чтобы стилизовать неактивные даты:

• Выберите Календарь в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Стиль неактивных дат. Щелкните по нему и откройте раздел.
• Теперь вы можете найти инструкции по стилизации здесь.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

Инструкции по отображению/скрытию виджета находятся здесь.