效果:

添加依賴:

flutter_calendar: ^0.0.1

項目中導入

import 'package:flutter_calendar/flutter_calendar.dart';

例子

import 'package:flutter/material.dart';
import 'package:flutter_calendar/flutter_calendar.dart'; main() {
runApp(new CalendarViewApp());
} class CalendarViewApp extends StatelessWidget {
void handleNewDate(date) {
print("handleNewDate ${date}");
} @override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.purple,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Calendar'),
),
body: new Container(
margin: new EdgeInsets.symmetric(
horizontal: 5.0,
vertical: 10.0,
),
child: new ListView(
shrinkWrap: true,
children: <Widget>[
new Text('The Default Calendar:'),
new Calendar(
onSelectedRangeChange: (range) =>
print("Range is ${range.item1}, ${range.item2}"),
onDateSelected: (date) => handleNewDate(date),
),
new Divider(
height: 50.0,
),
new Text('The Expanded Calendar:'),
new Calendar(
onSelectedRangeChange: (range) =>
print("Range is ${range.item1}, ${range.item2}"),
isExpandable: true,
),
new Divider(
height: 50.0,
),
new Text('A Custom Weekly Calendar:'),
new Calendar(
onSelectedRangeChange: (range) =>
print("Range is ${range.item1}, ${range.item2}"),
isExpandable: true,
dayBuilder: (BuildContext context, DateTime day) {
return new InkWell(
onTap: () => print("OnTap ${day}"),
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black38)),
child: new Text(
day.day.toString(),
),
),
);
},
),
],
),
),
),
);
}
}

Flutter的flutter_calendar日曆的使用的更多相关文章

  1. Flutter日曆國際化

    Flutter自带的日期选择器是showDatePicker,时间选择器是showTimePicker. 这两个选择器默认的显示效果都是英文的,我们是在中国,那么就需要将其显示成中文版的,这就涉及到F ...

  2. cordova 日曆 聯系人 插件使用

    日曆插件 聯係人插件 我用聯係人插件, function onSuccess(contact) { alert("Save Success"); }; function onErr ...

  3. Flutter中的日期、格式化日期、日期选择器组件

    Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...

  4. Linux常用到的指令汇总

    Linux常用到的指令汇总 根据鸟哥linux私房菜上定义的:一定要先學會的指令:ls, more, cd, pwd, rpm, ifconfig, find 登入與登出(開機與關機):telnet, ...

  5. 刪除預裝在windows 10 的app

    刪除預裝在windows 10 的app 步驟: 方法一.(易於解除安裝的app) 1. →按"開始標誌" →"所有應用程式" →在想解除的程式圖示上" ...

  6. Linux大全

    Linux 基本指令介紹   一定要先學會的指令:ls, more, cd, pwd, rpm, ifconfig, find 登入與登出(開機與關機):telnet, login, exit, sh ...

  7. SAP存储税率税码的相关表

    T007A 稅關鍵字 T007B 會計中的稅務處理 T007C Groupings for tax codes T007D 賦稅群組的內文 T007F 銷項 / 進項群組的稅 T007G 不再使用該表 ...

  8. 《鸟哥的Linux私房菜》笔记——04. 简单命令行

    键入命令 [dmtsai@study ~]$ command [-options] parameter1 parameter2 ... 指令 選項 參數(1) 參數(2) 注意:有时也可以使用 + 放 ...

  9. Linux-鸟菜-4-关机的正确姿势

    Linux-鸟菜-4-关机的正确姿势 这章里面鸟哥介绍了基本的登录操作以及一些基本命令还有关机的正确姿势,基本的命令我都整理到常用命令3里面了,关机的这个感觉挺重要,单独整理下. 由于Linux本身是 ...

随机推荐

  1. JS中的Date对象

    1.构造函数 Date 对象可以通过构造函数来生成,Date 的构造函数可以放入四种不同的参数 1.1.new Date() ,返回此时的本地日期时间的date对象 let d = new Date( ...

  2. Delphi实现获取磁盘空间大小的方法

    unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, ...

  3. vue双向数据绑定v-model

    1.双向数据绑定 <input v-model="msg" /> <template> <div id="app"> < ...

  4. Java并发指南14:JUC中常用的Unsafe和Locksupport

    本文转自网络,侵删 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutoria ...

  5. (转)CoreDNS介绍

    转:https://www.colabug.com/4171614.html 本文介绍 CoreDNS 相关配置以及验证方法,实验环境为 Kubernetes 1.11,搭建方法参考 kubeadm安 ...

  6. spring4.1.8扩展实战之六:注册bean到spring容器(BeanDefinitionRegistryPostProcessor接口)

    本章是<spring4.1.8扩展实战>系列的第六篇,目标是学习如何通过自己写代码的方式,向spring容器中注册bean: 原文地址:https://blog.csdn.net/boli ...

  7. WebApi系列~基于RESTful标准的Web Api 转载 https://www.cnblogs.com/lori/p/3555737.html

    微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...

  8. elementUI 弹出框添加可自定义拖拽和拉伸功能,并处理边界问题

    开发完后台管理系统的弹出框模块,被添加拖拽和拉伸功能,看了很多网上成熟的帖子引到项目里总有一点问题,下面是根据自己的需求实现的步骤: 首先在vue项目中创建一个js文件eg:dialog.js imp ...

  9. Nginx 模块 - ngx_core_module

    原文地址 示例配置 指令 accept_mutex accept_mutex_delay daemon debug_connection debug_points env error_log even ...

  10. Eclipse如何汉化[完美版]

    当前版本:Eclipse 4.5.1 1.如何查看eclipse的版本呢 找到关于Eclipse,点击 . 2.打开浏览器连接http://www.eclipse.org/babel/download ...