在 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;
}

在日历

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

属性。

这是文档参考：

CalendarBuilders 文档

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);
            },

Answer 3

标记在 flutter TableCalendar 上点击的日期

 selectedDayPredicate: (day) {
            return _focusedDay.year == day.year &&
                _focusedDay.month == day.month &&
                _focusedDay.day == day.day;
          },