flutter table_calendar日歷的使用


table_calendar 一個比較好的日歷框架,目前升級后已經支持null safety了

關於使用可以直接參考https://pub.dev/packages/table_calendar,這里主要介紹一些配置項
1.國際化locale屬性

locale: 'zh_CN',

2.設置日歷最大開始日期,最小開始日期

firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 1, 1),

3.設日歷頭部顯示和隱藏

headerVisible:true

4.設置日歷頭部星期描述行顯示和隱藏

daysOfWeekVisible: true,

5.設置是否支持上下左右滾動

enum AvailableGestures { none, verticalSwipe, horizontalSwipe, all }
availableGestures: AvailableGestures.all,//默認上下左右均可滾動

6.設置日歷周開始時間 這里設置為周一為每周的開始時間

startingDayOfWeek: StartingDayOfWeek.monday 

7.設置頭部屬性顯示和隱藏

headerStyle: HeaderStyle(
      titleCentered: true,
      leftChevronVisible: false,
      rightChevronVisible: false,
      formatButtonVisible: false,
    ),

8.設置選中狀態和非選中狀態顏色等參數

calendarStyle: CalendarStyle(
    holidayTextStyle: TextStyle(color: Colors.red),
    holidayDecoration: BoxDecoration(
        color: Colors.transparent, shape: BoxShape.circle),
    // Use `CalendarStyle` to customize the UI
    outsideDaysVisible: true,
    // outsideDecoration: BoxDecoration(
    //   color: Colors.cyan,
    // ),
    markersMaxCount: 1,
    // outsideDecoration: ,
    // markerSize: 10,
    // markersAlignment: Alignment.bottomCenter,
    // markerMargin: EdgeInsets.only(top: 8),
    // cellMargin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    todayDecoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),

    // markerSizeScale: 5,
    markerDecoration:
        BoxDecoration(color: Colors.cyan, shape: BoxShape.circle),
    canMarkersOverflow: true)

9.非當月日期是否需要顯示出來

outsideDaysVisible: true


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM