table_calendar样式自定义

插件出处：

https://pub.dev/packages/table_calendar

演示效果

代码出处：

https://github.com/aleksanderwozniak/table_calendar/tree/master/example/lib/pages

代码

// Copyright 2019 Aleksander Woźniak
// SPDX-License-Identifier: Apache-2.0

import 'package:flutter/material.dart';
import 'package:flutter_application_dialog_test/calender/utils.dart';
import 'package:table_calendar/table_calendar.dart';

// import '../utils.dart';

class TableBasicsExample extends StatefulWidget {
  const TableBasicsExample({super.key});

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

class _TableBasicsExampleState extends State<TableBasicsExample> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TableCalendar - Basics'),
      ),
      body: TableCalendar(
        firstDay: kFirstDay,
        lastDay: kLastDay,
        focusedDay: _focusedDay,
        calendarFormat: _calendarFormat,
        locale: 'zh_CN',
        daysOfWeekHeight: 34,
        rowHeight: 64,
        startingDayOfWeek: StartingDayOfWeek.monday,
        selectedDayPredicate: (day) {
          // Use `selectedDayPredicate` to determine which day is currently selected.
          // If this returns true, then `day` will be marked as selected.

          // Using `isSameDay` is recommended to disregard
          // the time-part of compared DateTime objects.
          return isSameDay(_selectedDay, day);
        },
        onDaySelected: (selectedDay, focusedDay) {
          if (!isSameDay(_selectedDay, selectedDay)) {
            // Call `setState()` when updating the selected day
            setState(() {
              _selectedDay = selectedDay;
              _focusedDay = focusedDay;
            });
          }
        },
        onFormatChanged: (format) {
          if (_calendarFormat != format) {
            // Call `setState()` when updating calendar format
            setState(() {
              _calendarFormat = format;
            });
          }
        },
        onPageChanged: (focusedDay) {
          // No need to call `setState()` here
          _focusedDay = focusedDay;
        },
        holidayPredicate: (day) {
          // Weekends
          return day.weekday >= 5 && day.weekday < 6;
        },
        daysOfWeekStyle: DaysOfWeekStyle(
            decoration: BoxDecoration(
              borderRadius: new BorderRadius.circular((20.0)), // 也可控件一边圆角大小
            ),
            weekendStyle: TextStyle(color: Color(0xFFFF5E52), fontSize: 16),
            weekdayStyle: TextStyle(fontSize: 16)),
        calendarStyle: CalendarStyle(
            tableBorder: TableBorder.all(
                borderRadius: BorderRadius.zero,
                color: Colors.grey,
                width: 0.5),
            holidayTextStyle: TextStyle(color: Colors.red),
            holidayDecoration: BoxDecoration(
                color: Colors.transparent, shape: BoxShape.circle),
            // Use `CalendarStyle` to customize the UI
            outsideDaysVisible: true,
            outsideDecoration: BoxDecoration(
              color: Color(0xFFF5F5F5),
            ),
            markersMaxCount: 1,
            // outsideDecoration: ,
            markerSize: 10,
            markersAlignment: Alignment.bottomCenter,
            markerMargin: EdgeInsets.only(top: 8),
            cellMargin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            todayDecoration: BoxDecoration(
              color: Color(0xFFFF5E52),
              shape: BoxShape.circle,
            ),
            markerSizeScale: 5,
            markerDecoration:
                BoxDecoration(color: Colors.cyan, shape: BoxShape.circle),
            canMarkersOverflow: true,
            weekendTextStyle: TextStyle(color: Color(0xFFFF5E52))),
        calendarBuilders: CalendarBuilders(
          defaultBuilder: (context, date, focusedDay) {
            if (date.weekday <= 5)
              return Container(
                margin: const EdgeInsets.all(5.0),
                alignment: Alignment.topCenter,
                // decoration: BoxDecoration(
                //   color: Theme.of(context).primaryColor,
                //   borderRadius: BorderRadius.circular(8.0),
                //   // shape: BoxShape.circle
                // ),
                child: Column(
                  children: [
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      date.day.toString(),
                      style: TextStyle(color: Color(0xFF302F30)),
                    ),
                  ],
                ),
              );
            else {
              return Container(
                margin: const EdgeInsets.all(5.0),
                alignment: Alignment.topCenter,
                // decoration: BoxDecoration(
                //   color: Theme.of(context).primaryColor,
                //   borderRadius: BorderRadius.circular(8.0),
                //   // shape: BoxShape.circle
                // ),
                child: Column(
                  children: [
                    SizedBox(
                      height: 10,
                    ),
                    Text(
                      date.day.toString(),
                      style: TextStyle(color: Color(0xFFFF5E52)),
                    ),
                  ],
                ),
              );
            }
          },
          selectedBuilder: (context, date, events) => Container(
            margin: const EdgeInsets.all(5.0),
            alignment: Alignment.topCenter,
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.circular(8.0),
              // shape: BoxShape.circle
            ),
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Row(children: [
                  Text(
                    date.day.toString(),
                    style: TextStyle(color: Colors.white),
                  ),
                  Text(
                    "休",
                    style: TextStyle(color: Colors.white, fontSize: 6),
                  ),
                ], mainAxisAlignment: MainAxisAlignment.center),
                Text(
                  "休/班",
                  style: TextStyle(color: Colors.white, fontSize: 10),
                ),
              ],
            ),
          ),
          todayBuilder: (context, date, events) => Container(
              margin: const EdgeInsets.all(5.0),
              alignment: Alignment.topCenter,
              decoration: BoxDecoration(
                  color: Colors.blue, borderRadius: BorderRadius.circular(8.0)),
              child: Text(
                date.day.toString(),
                style: TextStyle(color: Colors.white),
              )),
        ),
      ),
    );
  }
}