table_calendar 2.2.2

Table Calendar #

Pub Package Awesome Flutter

Highly customizable, feature-packed Flutter Calendar with gestures, animations and multiple formats.

Table Calendar with custom stylesTable Calendar with Builders

Features #

  • Extensive, yet easy to use API
  • Custom Builders for truly flexible UI
  • Complete programmatic control with CalendarController
  • Dynamic events
  • Interface for holidays
  • Locale support
  • Vertical autosizing
  • Beautiful animations
  • Gesture handling
  • Multiple Calendar formats
  • Multiple days of the week formats
  • Specifying available date range
  • Nice, configurable UI out of the box

Usage #

Make sure to check out example project. For additional info please refer to API docs.

Installation #

Add to pubspec.yaml:

  table_calendar: ^2.2.2

Then import it to your project:

import 'package:table_calendar/table_calendar.dart';

And finally create the TableCalendar with a CalendarController:

void initState() {
  _calendarController = CalendarController();

void dispose() {

Widget build(BuildContext context) {
  return TableCalendar(
    calendarController: _calendarController,

Locale #

Table Calendar supports locales. To display the Calendar in desired language, use locale property. If you don't specify it, a default locale will be used.

Initialization #

Before you can use a locale, you need to initialize the i18n formatting.

This is independent of Table Calendar package, so I encourage you to do your own research.

A simple way of doing it is as follows:

  • First of all, add intl package to your pubspec.yaml file
  • Then make modifications to your main():
import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));

After those two steps your app should be ready to use Table Calendar with different languages.

Specifying a language #

To specify a language, simply pass it as a String code to locale property.

For example, this will make Table Calendar use Polish language:

  locale: 'pl_PL',

Note, that if you want to change the language of FormatButton's text, you have to do this yourself. Use availableCalendarFormats property and pass the translated Strings there. Use i18n method of your choice.

You can also hide the button altogether by setting formatButtonVisible to false.

Holidays #

Table Calendar provides a simple interface for displaying holidays. Here are a few steps to follow:

  • Fetch a map of holidays tied to dates. You can search for it manually, or perhaps use some online API
  • Convert it to a proper format - note that these are lists of holidays, since one date could have a couple of holidays:
  `DateTime A`: [`Holiday A1`, `Holiday A2`, ...],
  `DateTime B`: [`Holiday B1`, `Holiday B2`, ...],
  • Link it to Table Calendar. Use holidays property

And that's your basic setup! Now you can add some styling:

  • By using CalendarStyle properties: holidayStyle and outsideHolidayStyle
  • By using CalendarBuilders for complete UI control over calendar cell

You can also add custom holiday markers thanks to improved marker API. Check out example project for more details.

markersBuilder: (context, date, events, holidays) {
  final children = <Widget>[];

  if (events.isNotEmpty) {
        right: 1,
        bottom: 1,
        child: _buildEventsMarker(date, events),

  if (holidays.isNotEmpty) {
        right: -2,
        top: -2,
        child: _buildHolidaysMarker(),

  return children;


  • Added highlightSelected property to CalendarStyle
  • Added highlightToday property to CalendarStyle


  • Added onHeaderTapped callback
  • Added onHeaderLongPressed callback
  • Fixed endDay issue


  • Added LongPress Gesture support
  • Added option to disable days based on a predicate
  • Added option to hide DaysOfWeek row
  • Added header Decoration
  • Added headerMargin property
  • Added headerPadding property
  • Added contentPadding property


  • Added dynamic events and holidays
  • Added StartingDayOfWeek for every weekday
  • Added support for custom weekend days
  • Added dowWeekdayBuilder and dowWeekendBuilder
  • Broadened intl dependency bounds
  • markersMaxAmount no longer affects markersBuilder
  • Fixed twoWeeks format programmatic issue
  • Fixed visibleDays issue
  • Fixed null dispose issue


  • Updated dependencies


  • Fixed issue with custom markers for holidays


  • Added CalendarController - TableCalendar now features complete programmatic control
  • Removed redundant properties
  • Updated example project
  • Updated README


  • Fixed last day of month animation issue


  • Improved DateTime logic
  • Event markers can now be set to overflow cell boundaries


  • Added startDay and endDay to allow users to specify available date range
  • Added unavailableStyle and unavailableDayBuilder for days outside of given date range
  • Added onUnavailableDaySelected callback
  • Unavailable days will not display event markers


  • Fixed issue with Markers being null


  • RowHeight can now be set as a fixed value
  • MaxMarkersAmount will now affect MarkersBuilder


  • Added holiday support
  • Added holiday usage guide
  • Improved custom markers builder
  • Added rendering priority customization
  • Added FormatButton behavior customization


  • Added TextBuilders for Header and DOW panel
  • Improved vertical swipe behavior


  • Added title text customization with format skeleton
  • Added day of the week text customization with format skeleton
  • Rolled-back intl dependency


  • Added locale support
  • Added locale usage guide
  • Updated example project


  • Improved chevron customization


  • Added programmatic selectedDay
  • Removed onFormatChanged callback - it is now integrated into onVisibleDaysChanged callback
  • Improved onVisibleDaysChanged behavior
  • Fixed issue with empty Calendar row
  • Changed default FormatButton texts
  • Updated example project


  • FormatButton text can now be customized


  • Fixed CalendarFormat issue when not using a callback


  • Added custom Builders API
  • Added DateTime truncation logic
  • onDaySelected callback now contains list of events associated with that day
  • Added onVisibleDaysChanged callback
  • SwipeConfig can now be customized
  • Days outside of current month can be shown/hidden
  • Refactored code
  • Updated example project


  • Added SwipeToExpand for CalendarFormat
  • AvailableGestures can now be specified (none, horizontalSwipe, verticalSwipe, all)
  • Fixed styling issue with SelectedDay on weekends


  • Added slide animation for CalendarFormat
  • CalendarFormat animation can now be specified (slide, scale)
  • Added Monday-Sunday week format
  • Week format can now be specified with StartingDayOfWeek enum


  • Any style can now be customized
  • Grouped properties into Classes
  • Refactored code for better readability
  • Added full documentation


  • Added optional initial Date (defaults to


  • Added animated Swipe gesture
  • CalendarFormat can now be enforced programmatically


  • Added animations to CalendarFormat change
  • Added animations to Date selection
  • Added new CalendarFormat - TwoWeeks
  • Available CalendarFormats can now be specified


  • Refactored code
  • Updated example project


  • Added chevron button customization
  • Calendar header can be hidden now


  • Added OnFormatChanged callback


  • Added CalendarFormat button customization


  • Added CalendarFormat button - toggle between month view and week view
  • Additional customization is now available


  • Revamped example
  • Improved description

[0.0.1] - Initial release

  • Fully working TableCalendar; example included


Table Calendar example #

Demonstrates how to use table_calendar package. Displays Table Calendar widget with a ListView underneath it.

Table Calendar with custom stylesTable Calendar with Builders

Table Calendar offers a lot of customization:

  • by using custom Styles
  • by using custom Builders (accompanied by custom Styles)

Using just Styles is a great way to get nice results with little effort. That being said, using Builders will give you full control over Calendar's UI.

This example project will show you both of aforementioned methods.

For more info please refer to API docs.

Use this package as a library

1. Depend on it

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

  table_calendar: ^2.2.2

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:table_calendar/table_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 Feb 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/src/calendar.dart.

Run flutter format to format lib/src/calendar.dart.

Format lib/src/calendar_controller.dart.

Run flutter format to format lib/src/calendar_controller.dart.

Format lib/src/customization/calendar_builders.dart.

Run flutter format to format lib/src/customization/calendar_builders.dart.

Fix additional 4 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/src/customization/calendar_style.dart (Run flutter format to format lib/src/customization/calendar_style.dart.)
  • lib/src/customization/days_of_week_style.dart (Run flutter format to format lib/src/customization/days_of_week_style.dart.)
  • lib/src/customization/header_style.dart (Run flutter format to format lib/src/customization/header_style.dart.)
  • lib/src/widgets/cell_widget.dart (Run flutter format to format lib/src/widgets/cell_widget.dart.)


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
intl >=0.15.0 <0.17.0 0.16.1
simple_gesture_detector ^0.1.3 0.1.4
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies