在 flutter 日历中突出显示日期

Question

因此，我使用 flutter 的 table_calendar 包创建了一个基本日历。

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

 class Calendar extends StatefulWidget {
  @override
 _CalendarState createState() => _CalendarState();
 }

 class _CalendarState extends State<Calendar> {
   CalendarFormat format = CalendarFormat.month;
   DateTime selectedDay = DateTime.now();
   DateTime focusedDay = DateTime.now();

   TextEditingController _eventController = TextEditingController();


  @override
   void dispose() {
    _eventController.dispose();
    super.dispose();
   }

   @override
   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
       title: Text("ESTech Calendar"),
       centerTitle: true,
     ),
     body: Column(
        children: [
         //defining min an max years
         TableCalendar(
            focusedDay: selectedDay,
            firstDay: DateTime(1990),
            lastDay: DateTime(2050),

          //changing calendar format
        calendarFormat: format,
        onFormatChanged: (CalendarFormat _format) {
          setState(() {
            format = _format;
          });
        },
        startingDayOfWeek: StartingDayOfWeek.monday,
        daysOfWeekVisible: true,

        //Day Changed on select
        onDaySelected: (DateTime selectDay, DateTime focusDay) {
          setState(() {
            selectedDay = selectDay;
            focusedDay = focusDay;
          });
          print(focusedDay);
        },
        selectedDayPredicate: (DateTime date) {
          return isSameDay(selectedDay, date);
        },


        //To style the Calendar
        calendarStyle: CalendarStyle(
          isTodayHighlighted: true,
          selectedDecoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
          selectedTextStyle: TextStyle(color: Colors.white),
          todayDecoration: BoxDecoration(
            color: Colors.purpleAccent,
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
          defaultDecoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
          weekendDecoration: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(5.0),
          ),
        ),
        headerStyle: HeaderStyle(
          formatButtonVisible: true,
          titleCentered: true,
          formatButtonShowsNext: false,
          formatButtonDecoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(5.0),
          ),
          formatButtonTextStyle: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
);
}
}

输出是这样的， 输出

我想要的是使用列表或某种类型输入一些日期，我希望日历突出显示那些日子，如下图所示

预期产出

请帮助我实现它。我应该使用事件吗？如果是这样请告诉我怎么做！

Answer 1

DateTime将参数列表添加到您的Calendar小部件中：

class Calendar extends StatefulWidget {
  const Calendar({
    required this.toHighlight,
    Key? key,
  }) : super(key: key);

  @override
  _CalendarState createState() => _CalendarState();

  final List<DateTime> toHighlight;
}

在 Calendar 内Build，添加calendarBuilders属性。在此属性中，您可以使用该defaultBuilder选项在特定情况下覆盖单元格小部件：

calendarBuilders: CalendarBuilders(
              defaultBuilder: (context, day, focusedDay) {
                for (DateTime d in widget.toHighlight) {
                  if (day.day == d.day &&
                      day.month == d.month &&
                      day.year == d.year) {
                    return Container(
                      decoration: const BoxDecoration(
                        color: Colors.lightGreen,
                        borderRadius: BorderRadius.all(
                          Radius.circular(8.0),
                        ),
                      ),
                      child: Center(
                        child: Text(
                          '${day.day}',
                          style: const TextStyle(color: Colors.white),
                        ),
                      ),
                    );
                  }
                }
                return null;
              },
            ),

正如您所看到的，我已经实现了单元格日期和作为参数发送的日期之间的基本比较toHighlight。

如果您希望突出显示的单元格即使在获得焦点或被选中时也能保持其新外观，则可以使用该prioritizedBuilder属性。

这是文档参考：

日历构建器文档

Answer 2

我认为你想使用 selectedDayPredicate

来自https://github.com/aleksanderwozniak/table_calendar/blob/master/example/lib/pages/multi_example.dart

 TableCalendar<Event>(
            ...
            selectedDayPredicate: (day) {
              // Use values from Set to mark multiple days as selected
              return _selectedDays.contains(day);
            },