• 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
    
  • 相关阅读:
    定位属性position,相对定位,绝对定位
    flex弹性盒模型?
    vue生命周期
    理解cookie、session、token
    前端兼容性问题
    JS 如何为一个元素怎么绑定多个事件?
    js数组的操作方法
    vue页面翻页勾选的记忆功能
    Vue中nextTick的正确使用
    Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/14713707.html
Copyright © 2020-2023  润新知