Flutter 之 table_calendar 控件

1.库导入

在pubspec.yaml文件中

dev_dependencies:

table_calendar: ^3.2.0

2. 代码编写

TableCalendar(
  daysOfWeekHeight: 20,
  availableGestures: AvailableGestures.horizontalSwipe,
  firstDay:  DateTime.now().subtract(const Duration(days: 365)),
  lastDay:  DateTime.now(),
  calendarBuilders: CalendarBuilders(

    markerBuilder: (context, day, events) {
      bool isMarker = false;
      for(int i in entries){
        if(day.day == i){
          isMarker = true;
          break;
        }
      }
      if(isMarker){
        return Positioned(
            right: 0,
            top: 0,
            child: Container(
              padding: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            )
        );
      } else {
        return null;
      }

    }

  ),
  focusedDay: _focusedDay,
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  },
  onFormatChanged: (format) {
    setState(() {
      _calendarFormat = format;
    });
  },
  calendarStyle: const CalendarStyle(
    selectedDecoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
    todayDecoration: BoxDecoration(
      color: Color(0xFFBBDEFB),
      shape: BoxShape.circle,
    ),
    markersMaxCount: 1,
    isTodayHighlighted: false,
  ),
  headerStyle: const HeaderStyle(
    titleCentered: true,
    formatButtonVisible: false,
  ),
)

3.效果图