flutter_clean_calendar 1.0.2+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

flutter_clean_calendar #

Simple flutter calendar based on flutter_calendar package. Thanks to @AppleEducate for his contributions. You can pull up and down the calendar to show between weekly/monthly calendar. It shows the number of events for thats specific date. It shows the already Done events in other color

Breaking Changes #

Changed naming properties from show to hide, i.e. hideArrows instead of showArrows

Screenshot Screenshot

Properties #

{ onDateSelected: function, //receives a DateTime
  onRangeSelected: function, //receives to, from as DateTime
  isExpandable: bool, //can expand
  dayBuilder: (BuildContext context, DateTime day) {}, //return inside a widget to render
  hideArrows: bool, //show arrows to change month/week
  hideTodayIcon: bool, //show today icon to focus calendar on today
  events: Map, //map of events to display bullets on each day with events
  selectedColor: Color, //set the circle background for selected day if not uses the primaryColor
  todayColor: Color, //set the font color of todays date
  eventColor: Color, //set the event dot color, if not uses the accentColor
  eventDoneColor: Color, //set the event dot color for already Done events, if not uses the accentColor
  dayOfWeekStyle: TextStyle, // Set style for top day of week,
  startOnMonday: bool // false by default, month starts on sunday by default. If set to true please change weekdays
  weekdays: List<String> // replace weekdays naming when starting on monday or to override in another language

event List<Map> // add isDone to each event to change color for done events

Sample event data

final Map _events = {
    DateTime(2019, 3, 1): ['Event A', 'Event B', 'Event C'],
    DateTime(2019, 3, 4): ['Event A'],
    DateTime(2019, 3, 5): ['Event B', 'Event C'],
    DateTime(2019, 3, 13): ['Event A', 'Event B', 'Event C'],
    DateTime(2019, 3, 15): [
      'Event A',
      'Event B',
      'Event C',
      'Event D',
      'Event E',
      'Event F',
      'Event G'
    DateTime(2019, 2, 26): ['Event A', 'Event A', 'Event B'],
    DateTime(2019, 2, 18): ['Event A', 'Event A', 'Event B'],

[1.0.2+1] #

  • Fixed minor issues

[1.0.2] #

  • Breaking Changes: Changed naming properties from show to hide, i.e. hideArrows instead of showArrows
  • Fixed dependencies issues with newer flutter versions
  • Added more styling options
  • Ability to start month on Monday or Sunday. Sunday by default, you need to replace weekDays if changing this value
  • Ability to replace day of weeks when starting calendar on Monday
  • Hide or show bottom bar and its color
  • Ability to change bottom bar color, arrow color and text style

[1.0.1] #

  • Ability to start the calendar with a date other than today
  • Ability to start the calendar expanded or not

[0.1.5] #

  • Breaking Changes: events now should be a Map with a List of Maps and not Strings as 1.0.4
  • Added Done events so you can see diferent eventColors

[0.1.4] #

  • Fixed locale dates
  • Added render list events

[0.1.3] #

  • Minor bug fixes

[0.1.1] #

  • Improved UI - Bottom bar now triggers the month/week view

[0.1.0] #

  • Slide up/down to show month/week calendar


import 'package:flutter/material.dart';
import 'package:flutter_clean_calendar/flutter_clean_calendar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clean Calendar Demo',
      home: CalendarScreen(),

class CalendarScreen extends StatefulWidget {
  State<StatefulWidget> createState() {
    return _CalendarScreenState();

class _CalendarScreenState extends State<CalendarScreen> {
  void _handleNewDate(date) {
    setState(() {
      _selectedDay = date;
      _selectedEvents = _events[_selectedDay] ?? [];

  List _selectedEvents;
  DateTime _selectedDay;

  final Map<DateTime, List> _events = {
    DateTime(2020, 5, 7): [
      {'name': 'Event A', 'isDone': true},
    DateTime(2020, 5, 9): [
      {'name': 'Event A', 'isDone': true},
      {'name': 'Event B', 'isDone': true},
    DateTime(2020, 5, 10): [
      {'name': 'Event A', 'isDone': true},
      {'name': 'Event B', 'isDone': true},
    DateTime(2020, 5, 13): [
      {'name': 'Event A', 'isDone': true},
      {'name': 'Event B', 'isDone': true},
      {'name': 'Event C', 'isDone': false},
    DateTime(2020, 5, 25): [
      {'name': 'Event A', 'isDone': true},
      {'name': 'Event B', 'isDone': true},
      {'name': 'Event C', 'isDone': false},
    DateTime(2020, 6, 6): [
      {'name': 'Event A', 'isDone': false},

  void initState() {
    _selectedEvents = _events[_selectedDay] ?? [];

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
              child: Calendar(
                startOnMonday: true,
                weekDays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                events: _events,
                onRangeSelected: (range) =>
                    print("Range is ${range.from}, ${range.to}"),
                onDateSelected: (date) => _handleNewDate(date),
                isExpandable: true,
                eventDoneColor: Colors.green,
                selectedColor: Colors.pink,
                todayColor: Colors.yellow,
                eventColor: Colors.grey,
                dayOfWeekStyle: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w800,
                    fontSize: 11),

  Widget _buildEventList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) => Container(
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(width: 1.5, color: Colors.black12),
          padding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 4.0),
          child: ListTile(
            title: Text(_selectedEvents[index]['name'].toString()),
            onTap: () {},
        itemCount: _selectedEvents.length,

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_clean_calendar: ^1.0.2+1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_clean_calendar/flutter_clean_calendar.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [flutter_clean_calendar] that is in a package requiring null.

Health suggestions

Fix lib/flutter_clean_calendar.dart. (-0.50 points)

Analysis of lib/flutter_clean_calendar.dart reported 1 hint:

line 250 col 62: 'body1' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is bodyText2. This feature was deprecated after v1.13.8..


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
date_utils ^0.1.0+3 0.1.0+3
flutter 0.0.0
intl ^0.16.1 0.16.1
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
path 1.7.0
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies