效果:

添加依賴:

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. Alisha’s Party

    Alisha’s Party Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  2. html5: postMessage解决跨域通信的问题

    效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...

  3. Session实现验证码登陆笔记

    1.生成验证码Servlet package com.isit.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletE ...

  4. JS对象、原型、this学习总结

    1.对象是函数创建的,而函数却又是一种对象.(属性的集合) 2.每个函数都有一个属性叫做prototype.这个prototype的属性值是一个对象,默认的只有一个constructor的属性,指向这 ...

  5. react 中事件参数和一般参数以及this绑定的写法

    import React from 'react'; import PropTypes from 'prop-types'; class Home extends React.Component{ r ...

  6. JS-Promise(使异步操作同步执行)

    单个异步操作同步 <div id="box"></div> <script> var box = document.querySelector( ...

  7. 牛客 打印N个数组整体最大的Top K

    题目链接:https://www.nowcoder.com/practice/5727b69bf80541c98c06ab90cf4c509e?tpId=101&tqId=33102& ...

  8. Hadoop(2): Blocks存储管理及读写

    1. Replication: 因为每个HDFS被部署在是低成本的商业硬件上(low cost commodity hardware),所以为了有更佳的Fault Tolerance,HDFS将每个B ...

  9. HeightCharts柱状图和饼状图

    HTML: <div id="container1"  style="height:350px; " ></div>    <di ...

  10. 在LIPS表追加拣配数量PIKMG字段(转)

    原文地址:https://blog.csdn.net/zhongguomao/article/details/43451127 最近比较忙,此方案出后测试了很多种情况都存在问题,只能留待以后处理了.. ...