Showing Event from API to Flutter Carousel Calender

Question

I want to show a Carousel Calendar and mark present ,absent and leave of a student by using Rest Api. I need to show these events by different color. The event already exists from API.

Solution

You have to convert your timestamp data from the API into a DateTime object.

DateTime dateTime = DateTime.parse(timestamp);

And then use the customDayBuilder property to define the appropriate widget with the color that you want.

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.
          }
      },

Comments

[Ravi Singh Lodhi]

Please be more specific. You need to add some code to describe what have you done so far & what are you stuck with? Are you stuck with creating the carousel calendar or showing the events in calendar or both? Have you tried using calendar packages that are avaialble? I know a few that can easily help you in building the same.

[Sruthi Maria Thomson]

@RaviSinghLodhi Im already done the carousel calender .Then now I need to show the absent,present and leave dates in calender by the particular response of the rest api.i just want to show the particular dates realted to these events to the calender.That's all

[Ravi Singh Lodhi]

Which library did you use for the calendar carousel?

[Sruthi Maria Thomson]

@RaviSinghLodhi flutter_calendar_carousel: ^1.4.12

[Ravi Singh Lodhi]

You can use the customDayBuilder property. What kind of data do you get from the API?

[Sruthi Maria Thomson]

@RaviSinghLodhi list of data, { "details": [ { "date": "2020-11-01T10:42:13.082Z", "status": "string", "remarks": "string" } ] }