想要更改 Flutter 表日歷中幾個日期的樣式（如果它們被選中）

Question

我正在嘗試使用 table_calendar package 構建日歷小部件。 如果點擊了未選擇的日期，則它必須是灰色的。 如果點擊灰色日期，則必須將樣式設置為默認值。 這是為了使日期無法預訂。 如果已預訂日期，則這些日期需要有另一種顏色。 這是我到目前為止所得到的：

class CalendarState extends State<Calendar> {
  // late Map<DateTime, List<Event>> selectedEvents;
  late Map<DateTime, Event> dateEvents = {};
  DateTime today = DateTime.now();
  DateTime selectedDay = DateTime.now();
  // DateTime focusedDay = DateTime.now();

  TextEditingController eventController = TextEditingController();

  @override
  void initState() {
    super.initState();

    //TODO: Populate dateEvents from DB.
    // Delete code below later.
    //region
    dateEvents[DateTime(2022, 8, 27)] = Event(eventType: EventType.unavailable);
    dateEvents[DateTime(2022, 9, 17)] = Event(eventType: EventType.booked);
    //endregion
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TableCalendar(
        focusedDay: selectedDay,
        firstDay: today,
        lastDay: DateTime(2050),
        calendarFormat: CalendarFormat.month,
        startingDayOfWeek: StartingDayOfWeek.monday,
        daysOfWeekVisible: true,
        onDaySelected: (DateTime selectDay, DateTime focusDay) {
          setState(() {
            selectedDay = selectDay;
            bool checkPresent = dateEvents.containsKey(selectedDay);
            if (!checkPresent) {
              //TODO: make grey
              dateEvents[selectedDay] = Event(eventType: EventType.unavailable);
              //TODO: Update DB.
            } else {
              bool checkUnavailable =
                  dateEvents[selectedDay]?.eventType == EventType.unavailable;
              if (checkUnavailable) {
                //TODO: ungrey
                dateEvents.remove(selectedDay);
                //TODO: Update DB.
              }
            }
          });
        },
        selectedDayPredicate: (DateTime date) {
          return isSameDay(selectedDay, date);
        },

        //To style the Calendar
        calendarStyle: CalendarStyle(
          isTodayHighlighted: true,
          selectedDecoration: BoxDecoration(
            color: Colors.orange,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
          selectedTextStyle: TextStyle(color: Colors.white),
          defaultDecoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
        ),
      ),
    );
  }
}

Answer 1

您應該使用intl package 更改日期格式。

https://pub.dev/packages/intl