[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9275":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},9275,"table_calendar","aleksanderwozniak\u002Ftable_calendar","aleksanderwozniak","Highly customizable, feature-packed calendar widget for Flutter","",null,"Dart",1958,1050,25,101,0,1,6,22.06,"Apache License 2.0",false,"master",true,[25,26,27,28,29,30,31,32,33],"calendar","calendar-view","date","flutter","flutter-package","flutter-plugin","table","table-calendar","widget","2026-06-12 02:02:05","# TableCalendar\n\n[![Pub Package](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Ftable_calendar.svg?style=flat-square)](https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Ftable_calendar)\n[![Awesome Flutter](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAwesome-Flutter-52bdeb.svg?longCache=true&style=flat-square)](https:\u002F\u002Fgithub.com\u002FSolido\u002Fawesome-flutter)\n\nHighly customizable, feature-packed calendar widget for Flutter.\n\n| ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Ftable_calendar_styles.gif) | ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Ftable_calendar_builders.gif) |\n| :------------: | :------------: |\n| **TableCalendar** with custom styles | **TableCalendar** with custom builders |\n\n## Features\n\n* Extensive, yet easy to use API\n* Preconfigured UI with customizable styling\n* Custom selective builders for unlimited UI design\n* Locale support\n* Range selection support\n* Multiple selection support\n* Dynamic events and holidays\n* Vertical autosizing - fit the content, or fill the viewport\n* Multiple calendar formats (month, two weeks, week)\n* Horizontal swipe boundaries (first day, last day)\n\n## Usage\n\nMake sure to check out [examples](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Ftree\u002Fmaster\u002Fexample\u002Flib\u002Fpages) and [API docs](https:\u002F\u002Fpub.dev\u002Fdocumentation\u002Ftable_calendar\u002Flatest\u002F) for more details.\n\n### Installation\n\nAdd the following line to `pubspec.yaml`:\n\n```yaml\ndependencies:\n  table_calendar: ^3.2.0\n```\n\n### Basic setup\n\n*The complete example is available [here](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fblob\u002Fmaster\u002Fexample\u002Flib\u002Fpages\u002Fbasics_example.dart).*\n\n**TableCalendar** requires you to provide `firstDay`, `lastDay` and `focusedDay`:\n* `firstDay` is the first available day for the calendar. Users will not be able to access days before it.\n* `lastDay` is the last available day for the calendar. Users will not be able to access days after it.\n* `focusedDay` is the currently targeted day. Use this property to determine which month should be currently visible.\n\n```dart\nTableCalendar(\n  firstDay: DateTime.utc(2010, 10, 16),\n  lastDay: DateTime.utc(2030, 3, 14),\n  focusedDay: DateTime.now(),\n);\n```\n\n#### Adding interactivity\n\nYou will surely notice that previously set up calendar widget isn't quite interactive - you can only swipe it horizontally, to change the currently visible month. While it may be sufficient in certain situations, you can easily bring it to life by specifying a couple of callbacks.\n\nAdding the following code to the calendar widget will allow it to respond to user's taps, marking the tapped day as selected:\n\n```dart\nselectedDayPredicate: (day) {\n  return isSameDay(_selectedDay, day);\n},\nonDaySelected: (selectedDay, focusedDay) {\n  setState(() {\n    _selectedDay = selectedDay;\n    _focusedDay = focusedDay; \u002F\u002F update `_focusedDay` here as well\n  });\n},\n```\n\nIn order to dynamically update visible calendar format, add those lines to the widget:\n\n```dart\ncalendarFormat: _calendarFormat,\nonFormatChanged: (format) {\n  setState(() {\n    _calendarFormat = format;\n  });\n},\n```\n\nThose two changes will make the calendar interactive and responsive to user's input.\n\n#### Updating focusedDay\n\nSetting `focusedDay` to a static value means that whenever **TableCalendar** widget rebuilds, it will use that specific `focusedDay`. You can quickly test it by using hot reload: set `focusedDay` to `DateTime.now()`, swipe to next month and trigger a hot reload - the calendar will \"reset\" to its initial state. To prevent this from happening, you should store and update `focusedDay` whenever any callback exposes it.\n\nAdd this one callback to complete the basic setup:\n\n```dart\nonPageChanged: (focusedDay) {\n  _focusedDay = focusedDay;\n},\n```\n\nIt is worth noting that you don't need to call `setState()` inside `onPageChanged()` callback. You should just update the stored value, so that if the widget gets rebuilt later on, it will use the proper `focusedDay`.\n\n*The complete example is available [here](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fblob\u002Fmaster\u002Fexample\u002Flib\u002Fpages\u002Fbasics_example.dart). You can find other examples [here](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Ftree\u002Fmaster\u002Fexample\u002Flib\u002Fpages).*\n\n### Events\n\n*The complete example is available [here](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fblob\u002Fmaster\u002Fexample\u002Flib\u002Fpages\u002Fevents_example.dart).*\n\nYou can supply custom events to **TableCalendar** widget. To do so, use `eventLoader` property - you will be given a `DateTime` object, to which you need to assign a list of events.\n\n```dart\neventLoader: (day) {\n  return _getEventsForDay(day);\n},\n```\n\n`_getEventsForDay()` can be of any implementation. For example, a `Map\u003CDateTime, List\u003CT>>` can be used:\n\n```dart\nList\u003CEvent> _getEventsForDay(DateTime day) {\n  return events[day] ?? [];\n}\n```\n\nOne thing worth remembering is that `DateTime` objects consist of both date and time parts. In many cases this time part is redundant for calendar related aspects. \n\nIf you decide to use a `Map`, I suggest making it a `LinkedHashMap` - this will allow you to override equality comparison for two `DateTime` objects, comparing them just by their date parts:\n\n```dart\nfinal events = LinkedHashMap(\n  equals: isSameDay,\n  hashCode: getHashCode,\n)..addAll(eventSource);\n```\n\n#### Cyclic events\n\n`eventLoader` allows you to easily add events that repeat in a pattern. For example, this will add an event to every Monday:\n\n```dart\neventLoader: (day) {\n  if (day.weekday == DateTime.monday) {\n    return [Event('Cyclic event')];\n  }\n\n  return [];\n},\n```\n\n#### Events selected on tap\n\nOften times having a sublist of events that are selected by tapping on a day is desired. You can achieve that by using the same method you provided to `eventLoader` inside of `onDaySelected` callback:\n\n```dart\nvoid _onDaySelected(DateTime selectedDay, DateTime focusedDay) {\n  if (!isSameDay(_selectedDay, selectedDay)) {\n    setState(() {\n      _focusedDay = focusedDay;\n      _selectedDay = selectedDay;\n      _selectedEvents = _getEventsForDay(selectedDay);\n    });\n  }\n}\n```\n\n*The complete example is available [here](https:\u002F\u002Fgithub.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fblob\u002Fmaster\u002Fexample\u002Flib\u002Fpages\u002Fevents_example.dart).*\n\n### Custom UI with CalendarBuilders\n\nTo customize the UI with your own widgets, use [CalendarBuilders](https:\u002F\u002Fpub.dev\u002Fdocumentation\u002Ftable_calendar\u002Flatest\u002Ftable_calendar\u002FCalendarBuilders-class.html). Each builder can be used to selectively override the UI, allowing you to implement highly specific designs with minimal hassle.\n\nYou can return `null` from any builder to use the default style. For example, the following snippet will override only the Sunday's day of the week label (Sun), leaving other dow labels unchanged:\n\n```dart\ncalendarBuilders: CalendarBuilders(\n  dowBuilder: (context, day) {\n    if (day.weekday == DateTime.sunday) {\n      final text = DateFormat.E().format(day);\n\n      return Center(\n        child: Text(\n          text,\n          style: TextStyle(color: Colors.red),\n        ),\n      );\n    }\n  },\n),\n```\n\n### Locale\n\nTo display the calendar in desired language, use `locale` property. \nIf you don't specify it, a default locale will be used.\n\n#### Initialization\n\nBefore you can use a locale, you might need to initialize date formatting.\n\nA simple way of doing it is as follows:\n* First of all, add [intl](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fintl) package to your pubspec.yaml file\n* Then make modifications to your `main()`:\n\n```dart\nimport 'package:intl\u002Fdate_symbol_data_local.dart';\n\nvoid main() {\n  initializeDateFormatting().then((_) => runApp(MyApp()));\n}\n```\n\nAfter those two steps your app should be ready to use **TableCalendar** with different languages.\n\n#### Specifying a language\n\nTo specify a language, simply pass it as a String code to `locale` property.\n\nFor example, this will make **TableCalendar** use Polish language:\n\n```dart\nTableCalendar(\n  locale: 'pl_PL',\n),\n```\n\n| ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Fen_US.png) | ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Fpl_PL.png) | ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Ffr_FR.png) | ![Image](https:\u002F\u002Fraw.githubusercontent.com\u002Faleksanderwozniak\u002Ftable_calendar\u002Fassets\u002Fzh_CN.png) |\n| :------------: | :------------: | :------------: | :------------: |\n| `'en_US'` | `'pl_PL'` | `'fr_FR'` | `'zh_CN'` |\n\nNote, 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.\n\nYou can also hide the button altogether by setting `formatButtonVisible` to false.\n","TableCalendar 是一个适用于 Flutter 的高度可定制且功能丰富的日历组件。它提供了易于使用的 API 和预配置的 UI，支持自定义样式和构建器，以实现无限的界面设计。此外，还具备多语言支持、范围选择、多选、动态事件与节假日显示以及多种日历格式（如月视图、双周视图、周视图）等功能。特别适合需要在移动应用中集成复杂日历功能的开发者使用，无论是个人项目还是企业级应用都能从中受益。",2,"2026-06-11 03:21:58","top_language"]