Блог

Главная - Вопросы по программированию - Отображение события из API в календарь Flutter Carousel

Отображение события из API в календарь Flutter Carousel

#api #flutter #dart #calendar #carousel

#API #трепетание #дротик #Календарь #карусель

Вопрос:

Я хочу показать календарь карусели и отметить присутствие, отсутствие и отпуск учащегося с помощью Rest Api. Мне нужно показать эти события другим цветом. Событие уже существует из API.

введите описание изображения здесь

Комментарии:

1. Пожалуйста, будьте более конкретны. Вам нужно добавить некоторый код, чтобы описать, что вы сделали до сих пор и с чем вы застряли? Вы застряли с созданием календаря карусели или отображением событий в календаре или и тем, и другим? Вы пробовали использовать доступные пакеты календаря? Я знаю несколько, которые могут легко помочь вам в создании того же самого.

2. @RaviSinghLodhi Я уже сделал календарь carousel. Тогда теперь мне нужно показать отсутствующие, присутствующие и оставленные даты в календаре с помощью конкретного ответа rest api. я просто хочу показать конкретные даты, связанные с этими событиями, в календаре. Вот и все

3. Какую библиотеку вы использовали для карусели календаря?

4. @RaviSinghLodhi flutter_calendar_carousel: ^1.4.12

5. Вы можете использовать это customDayBuilder свойство. Какие данные вы получаете от API?

Ответ №1:

Вы должны преобразовать свои данные временных меток из API в DateTime объект.

 DateTime dateTime = DateTime.parse(timestamp);

А затем используйте это customDayBuilder свойство, чтобы определить соответствующий виджет с нужным вам цветом.

 customDayBuilder: (   /// you can provide your own build function to make custom day containers
        bool isSelectable,
        int index,
        bool isSelectedDay,
        bool isToday,
        bool isPrevMonthDay,
        TextStyle textStyle,
        bool isNextMonthDay,
        bool isThisMonthDay,
        DateTime day,
      ) {
          /// If you return null, [CalendarCarousel] will build container for current [day] with default function.
          /// This way you can build custom containers for specific days only, leaving rest as default.


          if (day.difference(dateTime).inDays == 0) {
            // Do additional checks for status, remarks or for checking
            // whether the day should be marked as absent, present or something else
            return Container(
              decoration: BoxDecoration(
                color: Colors.red // Change this color according to your case.
                shape: BoxShape.circle,
            );
          } else {
            return null; // returning null will build container for current [day] with default function.
          }
      },