FlutterFlow / Dart - Coloring different dates in a calendar

Question

I have a JSON response in the following format

{
  "success": true,
  "error": null,
  "data": [
    {
      "date": "09/03/2024",
      "iso_date": "2024-03-09T16:49:35.770Z",
      "utc_date": "Sat, 09 Mar 2024 16:49:35 GMT",
      "date_string": "Sat Mar 09 2024",
      "timestamp": 1710002975770,
      "status": "reception"
    },
.....

In this Widget I want to show a different color on the busy dates/blackoutDates in the calendar

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import 'index.dart'; // Imports other custom widgets
import 'package:flutter/material.dart';
import 'package:calendar_date_picker2/calendar_date_picker2.dart';
import 'dart:convert'; // Import for json decode

final today = DateUtils.dateOnly(DateTime.now());

class DatePickerWidget extends StatefulWidget {
  const DatePickerWidget({
    super.key,
    this.width,
    this.height,
    required this.rebuildpage,
    required this.jsonn,
  });

  final double? width;
  final double? height;
  final Future Function() rebuildpage;

  final dynamic jsonn;

  @override
  _DatePickerWidgetState createState() => _DatePickerWidgetState();
}

class _DatePickerWidgetState extends State<DatePickerWidget> {
  List<DateTime?> _selectedDates = [];
  // List<DateTime?> _selectedDates = [DateTime.now()];

  List<DateTime> getBlackoutDates() {
    if (widget.jsonn is Map<String, dynamic>) {
      final jsonMap = widget.jsonn as Map<String, dynamic>;
      final List<dynamic> data = jsonMap['data'];
      List<DateTime> blackoutDates = [];
      for (var item in data) {
        final timestamp = item['timestamp'];
        blackoutDates.add(DateTime.fromMillisecondsSinceEpoch(timestamp));
      }
      return blackoutDates;
    } else {
      return [];
    }
  }

  

  bool isWithinBlackoutRange(
      DateTime start, DateTime end, List<DateTime> blackoutDates) {
    for (var date in blackoutDates) {
      if (date.isAfter(start) && date.isBefore(end)) {
        return true;
      }
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    final blackoutDates = getBlackoutDates();

    return Scaffold(
      body: Center(
        child: CalendarDatePicker2WithActionButtons(
          config: CalendarDatePicker2WithActionButtonsConfig(
            calendarType: CalendarDatePicker2Type.range,
            disableModePicker: true,
            selectedDayHighlightColor: Color.fromRGBO(6, 151, 138, 1),
            selectableDayPredicate: (date) {
              return !blackoutDates.any((blackoutDate) =>
                  date.year == blackoutDate.year &&
                  date.month == blackoutDate.month &&
                  date.day == blackoutDate.day);
            },
            disabledDayTextStyle: TextStyle(
              color: widget.jsonn['status'] == 'reception'
                  ? Colors.blue
                  : Colors.red,
            ), // Add this line
          ),
          value: _selectedDates,
          onValueChanged: (dates) async {
            if (dates.length == 2 && dates[0] != null && dates[1] != null) {
              final start = dates[0]!;
              final end = dates[1]!;
              //final end = dates[1]!.add(Duration(days: 1));

              FFAppState().value1 = start;
              FFAppState().value2 = end;

              if (!isWithinBlackoutRange(start, end, blackoutDates)) {
                setState(() {
                  _selectedDates = dates;
                });
                await widget.rebuildpage();
              } else {
                // setState(() {
                //   _selectedDates = [];
                // });
                // await widget.rebuildpage();

                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text("Грешка при избор на период"),
                      content: Text(
                          "Избраният от вас интервал включва вече резервирани дни. Моля изберете друг интервал или направете две отделни резервации. "),
                      actions: <Widget>[
                        TextButton(
                          child: Text("Добре"),
                          onPressed: () {
                            Navigator.of(context).pop();
                            setState(() {
                              _selectedDates = [];
                            });
                            widget.rebuildpage();
                          },
                        ),
                      ],
                    );
                  },
                );
              }
            }
          },
          onOkTapped: () async {
            await widget.rebuildpage();
          },
        ),
      ),
    );
  }
}

and i use: https://pub.dev/packages/calendar_date_picker2

disabledDayTextStyle: TextStyle(
              color: widget.jsonn['status'] == 'reception'
                  ? Colors.blue
                  : Colors.red,
            ), // Add this line

This part is responsible for the styling, but it is only as a parameter for all blocked days. How can I check against the status what color to display?

Answer 1

The issue here is how you are attempting to access the status from the JSON. You cannot retrieve the status directly from the JSON since it is located within the data list. You must create a custom function for this purpose. But keep in mind that this is not the best way to handle json data in your app.

String? getStatusForDate(DateTime date) {
  final statusData = widget.jsonn['data'] as List<dynamic>;

  for (var item in statusData) {
    final itemDate = DateTime.parse(item['iso_date']);
    
    // Check if the date part is the same (ignoring time)
    if (itemDate.year == date.year &&
        itemDate.month == date.month &&
        itemDate.day == date.day) {
      return item['status'];
    }
  }

  return null;
}

I recommend using the dayBuilder to apply custom styles to the days by checking their status. Otherwise, you won't be able to dynamically style the days, and the same text style will be applied to all disabled days, regardless of their status.

CalendarDatePicker2WithActionButtons(
  config: CalendarDatePicker2WithActionButtonsConfig(
    // Other config options...
  ),
  dayBuilder: (context, date, isDisabled) {
    // Access the status for the given date
    String? status = getStatusForDate(date);

    // Customize the appearance based on the status or set a default color for other statuses and null
    Color color = isDisabled
        ? Colors.grey // Disabled day color
        : status != null
            ? status == 'reception'
                ? Colors.blue // Custom color for reception
                : Colors.red // Default color for other statuses
            : Colors.white; // Default color for null

    return Container(
      color: color,
      child: Center(
        child: Text(
          '${date.day}',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  },
  // Other parameters...
)