Highly customizable, feature-packed calendar widget for Flutter

Last update: Jun 24, 2022

Table Calendar

Pub Package Awesome Flutter

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

Image Image
Table Calendar with custom styles Table 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:

dependencies:
  table_calendar: ^2.3.3

Then import it to your project:

import 'package:table_calendar/table_calendar.dart';

And finally create the TableCalendar with a CalendarController:

@override
void initState() {
  super.initState();
  _calendarController = CalendarController();
}

@override
void dispose() {
  _calendarController.dispose();
  super.dispose();
}

@override
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:

TableCalendar(
  locale: 'pl_PL',
),
Image Image Image Image
'en_US' 'pl_PL' 'fr_FR' 'zh_CN'

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) {
    children.add(
      Positioned(
        right: 1,
        bottom: 1,
        child: _buildEventsMarker(date, events),
      ),
    );
  }

  if (holidays.isNotEmpty) {
    children.add(
      Positioned(
        right: -2,
        top: -2,
        child: _buildHolidaysMarker(),
      ),
    );
  }

  return children;
},

GitHub

https://github.com/aleksanderwozniak/table_calendar
Comments
  • 1. Feature Request : Events can be updated for each month

    Thanks for such an awesome library. Can we have provision to update the events map, based on the month selected. Typically on load of each month, we send a request to server to get the events for that month. I tried updating the _events on each request's result, but the event markers are not reflecting as the controller is still referring to the previous events map.

    Reviewed by pvsvamsi at 2019-07-30 12:09
  • 2. Avoid blank space when swipping between two months

    This is a great project! But is it possible to reduce the time between 2 months when we swipe horizontally ? I would like to avoid the "blank" space between the two months.

    Reviewed by adriende at 2019-05-21 13:28
  • 3. [FEAT] - Disable navigation when selecting invisible days in the next or previous month

    Hi, great work with this project!

    Would it be possible to disable the navigation to the next/previous month when a date in the next/previous month is selected?

    As far as I can see the setSelectedDay method on the CalendarController always updates the visible days via _updateVisibleDays.

    https://github.com/aleksanderwozniak/table_calendar/blob/2cd1c7cabc3025bd227ce8cc2a32075d942a5df6/lib/src/calendar_controller.dart#L229-L233

    Perhaps we could supply the formats that this animation is enabled for? Defaulting to the current implementaton, which would be all except CalendarFormat.twoWeeks? Something similar to:

     void _updateVisibleDays(bool isProgrammatic) { 
       if (!navigateInvisibleDaysForFormats.any((x) => x == calendarFormat)  || isProgrammatic) { 
         _visibleDays.value = _getVisibleDays(); 
       } 
     } 
    
    Reviewed by royston-c at 2020-09-29 17:05
  • 4. Mode week event error.

    When the calendar is in week mode, if I click on the 29th or 30th (if they are on the 1st and 2nd day each week), events from days 1 (Tuesday) through 5 (Saturday), next month, disappear.

    In month mode this does not happen as no two month events appear at the same time.

    Reviewed by MarceloRab at 2019-09-29 19:21
  • 5. Holidays not displaying

    Hi,

    I have changed the holiday years to 2020, but nothing appears when using the builder version.

    final Map<DateTime, List> _holidays = {
      DateTime(2020, 1, 1): ['New Year\'s Day'],
      DateTime(2020, 1, 6): ['Epiphany'],
      DateTime(2020, 2, 14): ['Valentine\'s Day'],
      DateTime(2020, 4, 21): ['Easter Sunday'],
      DateTime(2020, 4, 22): ['Easter Monday'],
    };
    
      Widget _buildHolidaysMarker() {
        return Icon(
          Icons.cake,
          size: 20.0,
          color: Colors.lightGreenAccent,
        );
      }
    

    image

    Reviewed by KrunchMuffin at 2020-02-02 05:59
  • 6. How to make today's list automatically show on the screen instead of tap the day to show it?

    Hi, I have been working a lot trying to figure out how to use Table Calendar, right not I can add list or event to the calendar and on each day it will show dots, but everytime when I first open the calendar screen, it only show a calendar with dots below the date, but not showing the list, only if I tap on the day, it will show. Here is part of the code: onDaySelected: (date, events) { setState(() { _selectedList = _selectedDayEvents; }); }, And I can see today is the initial selectedDay, so today should be selected, but I can not automatically see today's list unless I tap on it. Is it designed this way? is there way to change?

    Any help is appreciated, Thank you!

    Lu

    Reviewed by lutang123 at 2020-06-21 04:27
  • 7. Create event example

    Examples are great but since I moved to new version lots of things changed and I'm having different issues trying to refactor my code.

    Can you provide a quick example for events creation?

    Reviewed by erperejildo at 2021-04-16 17:05
  • 8. Locale 'ru_RU' doesn't work and throw an error. InitializeDateFormatting has beed used.

    @aleksanderwozniak, Russian locale haven't work. I've done all by instruction. I found samples of code for Portuguese and implemented it and It works. But when I try to use Russian or Ukrainian or Belorussia it wont. I've even try Iraq and its work) but not with 'ru_RU' Screenshot 2021-03-14 at 17 35 38 Screenshot 2021-03-14 at 17 36 22 Screenshot 2021-03-14 at 17 36 46

    Originally posted by @KrillioSokolov in https://github.com/aleksanderwozniak/table_calendar/issues/417#issuecomment-798928612

    Reviewed by KrillioSokolov at 2021-03-14 15:43
  • 9. Widget state does not persist

    I need to switch screen layouts dynamically, conditionally showing the calendar widget. My problem is that the current month is reset to initialSelectedDay every time the widget shows. I'd think that it should respect the 'CalendarController.focusedDay` field since the controller instance is reused? Is it a bug?

    Reviewed by duzenko at 2020-08-12 10:33
  • 10. Bring CalendarController inside the plugin and expose it through callbacks

    Breaking change that will require a major version bump. There is a big problem in the current architecture of the package. Two separate objects: TableCalendar and CalendarController. The state of TableCalendar completely depends on the state of CalendarController but users are responsible for instantiating each of these objects separately of one another themselves. This breaks encapsulation principle of object oriented design and makes the package difficult to use. If users want 3 calendars, they must instantiate 3 calendarcontroller, 3 tablecalendar and map the state of each calendar controller to the correct state of the specific tablecalendar that maps to that calendarcontroller. Presumably CalendarController was created for abstraction and/or to have TableCalendar be a smaller object. However the way it was implemented was causing significant problems with both hot reload and statefulness. This PR resolves those issues. Users no longer need to instantiate their own CalendarController. CalendarController is now inside of TableCalendar and instantiation occurs automatically. If the user needs to access the state of CalendarController for the builders, it is exposed as parameters.

    Fixes #243 Fixes #248

    Let me know if I missed anything.

    Reviewed by shamilovtim at 2020-04-29 14:48
  • 11. Wrong calendar format

    I'm using the table calendar, and i tried to set the calendar format to month, but what i got is: image

    I set to "Week" and the button display Month, and when i try set the calendar format from calendar controller (in the first load), i got the error: The setter 'value=' was called on null. Receiver: null Tried calling: value=Instance of 'CalendarFormat'

    I can't set the calendar format...

    Reviewed by lucas-sesti at 2020-02-21 18:46
  • 12. Select same day in a range selection.

    I understand that when you use a range selector is for selecting a range of days but sometimes you want to be able to select one day in a range selector.

    Be able to execute the callback onRangeChange when a day is pressed 2 times. First time for init day, second for end date.

    Reviewed by arcas0803 at 2022-06-17 16:57
  • 13. Change calendar format and pinned view within a SliverList

    Is your feature request related to a problem? Please describe. I'm not able to find a way to include the TableCalendar view to be part of a sliver list where the calendar can be pinned between its weekly and monthly view. The default vertical swipe behaviour of the calendar to change the format is contained within the calendar view itself. That is, if I have a list of events below the calendar view, I cannot swipe the entire list up to change the format of the calendar. To change the format, my finger will need to be on the calendar first. Having been used to many calendar apps out on the market to date, this seems like a standard user experience, so it feels weird now to not be able to hide the calendar with a swipe up gesture from anywhere on the screen.

    Describe the solution you'd like A clear and concise description of what you want to happen. Is there a possibility to include a SliverAdapter of sort that can detect the scrolling of a sliver list to change the format of the calendar?

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. I haven't found an alternative. I'm open to any suggestions for a workaround if there is any. Thanks!

    Additional context Add any other context or screenshots about the feature request here.

    Reviewed by henk-lim at 2022-06-17 06:41
  • 14. is Month and year selection possible?

    Firstly thank you for making this package it helped me a lot you're doing great work :)

    I wanted to ask you there is full month calendar shown but is it possible to pick particular year and month so that we can jump to specific day? please guide if there is anything which will help me

    Element 5 - Calendar reference Image: on topRightCorner

    Reviewed by harshada-punjabi at 2022-06-09 20:26
  • 15. can back a Gesture position when onDaySelected?

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    Reviewed by xioayi01 at 2022-06-07 06:08
  • 16. Support default draw _rangeStart and _rangeEnd when open screen

    Can you support 2 function below?

    Function 1 : Support default draw _rangeStart and _rangeEnd when open screen.

    Function 2: Support default draw _rangeStart when open screen and after that draw _rangeEnd when touch day in screen.

    Reviewed by son-vo-go2joy at 2022-06-03 04:54
  • 17. It is not possible to see if the current day is a holiday

    Problem: It is not possible to see if the current day is a holiday. the current day decoration overrides the holiday decoration, there is no way to see that the current day is also a holiday if this is the case.

    Solution: When the current day is a holiday then the decoration of the holiday should not be overridden. Both decorations should be visible on that day. Then I can do a transparent color and a boxborder for the current day decoration. The holiday decoration will then still be visible.

    Reviewed by WilkoThomassen at 2022-05-13 13:53

Related

Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.
 Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

Jun 19, 2022
A Flutter package allows you to easily implement all calendar UI and calendar event functionality. 👌🔝🎉
A Flutter package allows you to easily implement all calendar UI and calendar event functionality. 👌🔝🎉

calendar_view A Flutter package allows you to easily implement all calendar UI and calendar event functionality. For web demo visit Calendar View Exam

Jun 24, 2022
Flutter calendar app. register schedule and manage in calendar ui.
Flutter calendar app. register schedule and manage in calendar ui.

flutter calendar app. register schedule and manage in calendar ui. save schedule data in firestore. and create widget and read schedule from firestore in widget.

Jun 4, 2022
CalendarDatePicker2 - A lightweight and customizable calendar picker based on Flutter CalendarDatePicker
CalendarDatePicker2 - A lightweight and customizable calendar picker based on Flutter CalendarDatePicker

A lightweight and customizable calendar picker based on Flutter CalendarDatePicker, with support for single date picker, range picker and multi picker.

Jun 28, 2022
Calendar widget for flutter
Calendar widget for flutter

Calendar Shows a scrolling calendar list of events. This is still relatively basic, it always assumes that the getEvents returns the entire list of ca

Jun 19, 2022
Calendar widget library for Flutter apps.
Calendar widget library for Flutter apps.

Calendarro Calendar widget library for Flutter apps. Offers multiple ways to customize the widget. Getting Started Installation Add dependency to your

Jun 2, 2022
A calendar widget for Flutter.
A calendar widget for Flutter.

flutter_calendar A calendar widget for Flutter Apps. Borrowed DateTime utility functions from the Tzolkin Calendar web element. Usage Add to your pubs

Jun 17, 2022
A calendar widget to easily scroll through the years 🗓
A calendar widget to easily scroll through the years 🗓

Flutter Scrolling Calendar A customizable calendar widget to easily scroll through the years. Features Choose range of years and the initial year to s

May 17, 2022
A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.
A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

Jun 20, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline.
Flutter Date Picker Library that provides a calendar as a horizontal timeline.

DatePickerTimeline Flutter Date Picker Library that provides a calendar as a horizontal timeline. How To Use Import the following package in your dart

Oct 25, 2021
Easy to use and beautiful calendar strip component for Flutter.
Easy to use and beautiful calendar strip component for Flutter.

Flutter Calendar Strip Easy to use and beautiful calendar strip component for Flutter. Awesome celender widget If this project has helped you out, ple

Jun 22, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline
Flutter Date Picker Library that provides a calendar as a horizontal timeline

Flutter Date Picker Library that provides a calendar as a horizontal timeline.

Jun 8, 2022
Flutter Inline Calendar
Flutter Inline Calendar

inline_calendar An inline calendar flutter package inspired by outlook app. It also supports Jalali/Shamsi calendar. Uses theme and locale of context

Sep 16, 2021
A seasonal foods calendar app written in Dart using Flutter.
A seasonal foods calendar app written in Dart using Flutter.

This project is not actively maintained anymore. However, everybody who wants to do so is more than welcome to work on this project! Thank you for you

May 17, 2022
Collection of customisable calendar related widgets for Flutter.
Collection of customisable calendar related widgets for Flutter.

calendar_views Collection of customisable calendar related widgets for Flutter. Day View Day View Documentation Set of widgets for displaying a day vi

Dec 20, 2021
Flutter calendar week UI package
Flutter calendar week UI package

Flutter calendar week Flutter calendar week UI package IOS | Android: import 'package:flutter_calendar_week/flutter_calendar_week.dart'; CalendarWeek(

Jun 13, 2022
A Heatmap Calendar based on Github's contributions chart

Flutter Heat Map Calendar A Heat Map Calendar based on Github's contributions chart which can be used to visualize values over time Installing 1. Depe

Jun 6, 2022
Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

flutter_date_pickers Allows to use date pickers without dialog. Provides some customizable styles for date pickers. A set of date pickers: DayPicker f

Jun 21, 2022
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

Mar 12, 2022