Solvedtable_calendar Multiple Initial Dates

Are there any work arounds for Multiple Initial dates

21 Answers

βœ”οΈAccepted Answer

@mees-brenzie
v3.0.0 update is definitely a big one. I will be writing a proper guide for it, to explain some stuff. Examples are also a great way to have a look at new API.

Although it may seem like migrating would require a lot of work, it actually should be a rather straightforward and quick process. Many concepts from previous versions still apply, but are used in more flexible and performant ways.

Here is a list of some key features I thought were worth mentioning. You will find a list of most important API modifications underneath it.


Key features:

  • Improved horizontal scrolling animation (no 'blank page' in between two pages).
  • Horizontal swipe boundaries (firstDay and lastDay).
  • Date range selection + background highlight.
  • Multiple date selection.
  • Selective builders - you can now return null in a builder, which will in turn make the widget use a default style. This allows you to selectively override day cell UI - more on that coming soon in examples. This also regards any builder - be it a day cell, a dow cell or a marker.
  • Improved widget performance.
  • Proper state handling on widget rebuilds - CalendarController posed some problems in previous versions.
  • In general, more concise API.

Key modifications:

  • CalendarController is gone. This results in a couple of changes:
    • initialSelectedDay became selectedDayPredicate. This allows to select multiple dates at once. Note that you also can have no selected date now. Basic usage is to store a _selectedDay field and update it via onDaySelected callback.
      selectedDayPredicate: (day) {
      // Use `selectedDayPredicate` to determine which day is currently selected.
      // If this returns true, then `day` will be marked as selected.
      // Using `isSameDay` is recommended to disregard
      // the time-part of compared DateTime objects.
      return isSameDay(_selectedDay, day);
      },
      selectedDayPredicate: (day) {
      // Use values from Set to mark multiple days as selected
      return _selectedDays.contains(day);
      },
    • There is a new required property called focusedDay - it is used to determine which year/month should be currently in view.
    • initialCalendarFormat became calendarFormat. To set the current format manually, just rebuild the widget with updated value.
    • Methods like calendarController.previousPage() and calendarController.nextPage() are replaced by a PageController. You can obtain it from the widget by using onCalendarCreated callback. Its disposing is handled by the widget, so no need to do it manually.
    • You can no longer use properties like visibleDays, visibleEvents or visibleHolidays - this is something that you have to handle yourself if needed.
  • startDay and endDay are renamed to firstDay and lastDay respectively, and are both required. This allows to setup a range of available days; users will not be able to scroll past them.
  • events map is replaced by eventLoader, which gives you a DateTime object and expects you to return a list of events that you want to assign to that date. You can still use the original map for that - but you have much more freedom now. Note that LinkedHashMap is the recommended map type to use.
    eventLoader: _getEventsForDay,
    List<Event> _getEventsForDay(DateTime day) {
    // Implementation example
    return kEvents[day] ?? [];
    }
  • holidays map is replaced by holidayPredicate, which operates in the same manner that selectedDayPredicate does.
  • Callbacks don't return lists of events and holidays. If you need a list of events in onDaySelected, you can call the same thing you are using in eventLoader for single day selection, or you can adapt it for multiple day selection.
    void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
    // Update values in a Set
    setState(() {
    if (_selectedDays.contains(selectedDay)) {
    _selectedDays.remove(selectedDay);
    } else {
    _selectedDays.add(selectedDay);
    }
    });
    _selectedEvents.value = _getEventsForDays(_selectedDays);
    _focusedDay = focusedDay;
    }

Other Answers:

Ah I see... Unfortunately there is no built-in support for multiple date selection at this moment. I will be adding it in the future.

Before, onCalendarCreated returns the first day, last day. But now it returns a PageController. but there is no function or property in the page controller to get the first day and last day. Is this possible?

And ... the readme is fairly lacking. it does not mention about onVisibleDaysChanged and how to migrate to the new one.

I have added multiple selection in 3.0.0-beta branch πŸš€

Here is how it works. You can use either multi-selection by tapping on individual dates, or you can select a continuous range of dates by tapping on a startDate and endDate.

Multi-selection Range selection

To use multi-selection:

  • Use onDaySelected callback to get the selected day. Add it to a collection (I'd recommend a Set*).
  • Use selectedDayPredicate to tell the TableCalendar widget which days are selected. You will be given a DateTime object, so just check if it is present in your day collection - and return true/false.
  • To clean the selection, you just need to reset the data inside collection (use .clear() on it). Rebuild the widget afterwards.

* Actually, a LinkedHashSet with equality override would be even better - to compare just the date-part of DateTime object, as their time-part is redundant for us.

Here is a complete example containing all of this.

To use range selection:

  • Use rangeSelectionMode property. Set it to either RangeSelectionMode.toggledOn* or RangeSelectionMode.enforced.
  • Create rangeStart and rangeEnd DateTime fields. Pass them to TableCalendar widget.
  • Use onRangeSelected callback. Update both fields inside it. Rebuild the widget afterwards.

* Range selection can be toggled on/off by longpressing a day cell in TableCalendar. When range selection mode is on, tapping will return ranges (onRangeSelected). When range selection is off, tapping will return single days (onDaySelected). To disable toggling on longpress, use RangeSelectionMode.enforced (always on), or RangeSelectionMode.disabled (always off).

Here is a simple example. Here is a bit more complex example, starting in RangeSelectionMode.toggledOff state.


To use 3.0.0-beta branch, add this to pubspec.yaml:

  table_calendar:
    git:
      url: git://github.com/aleksanderwozniak/table_calendar.git
      ref: 3.0.0-beta

Related Issues:

12
table_calendar Multiple Initial Dates
@mees-brenzie v3.0.0 update is definitely a big one I will be writing a proper guide for it to expla...
40
react native calendars calendar view not refreshing
Hi I also had that problem The markedDates property from Calendar is an object a complex object ...
19
react native calendars Starting day and ending day styling issue
For the time being unless it gets fixed I am using the following workaround Description The starting...
19
react native calendars Changing state on onVisibleMonthChange in CalendarList
No need to change the package source code simply do this I had an issue that when I used setState on...
15
react native calendars How to update markedDates from onDayPress event
You can track the marked dates as state in a stateful React component here's an example I've based o...
7
angular calendar Style Guide
I've just cut a new beta with this in Is your feature request related to a problem? Please describe ...
6
react native calendars CalenderList in Agenda component doesn't show / render current week until scroll or choosing another date
in file /src/calender-list/index.js I wrapped the body of scrollToDay (line 70) function inside a se...
5
CompactCalendarView Show Event indicators to currently selected day
I've released a new beta version: Let me know if you have any feedback While Adding events to curren...
4
CompactCalendarView Remove First Day as SelectedDayBgColor
Added new xml property and method: Set that to false to not select first day of month Released anew ...
3
devextreme reactive How to change table border styles
Try this It worked for me. React Grid I checked the doc see how to style or create a custom theme fo...
3
devextreme reactive Fixed Header and Left / Right Column
Thank you for the clarification In your case you need to implement the VirtualTable plugin instead o...
3
react native calendars Locale using other packages
Ok ⚠️ it's a hack so use at your own risk ☠️ Hi Currently we do have the LocaleConfig where you can ...
262
date fns Can't resolve 'date-fns/_lib/format/longFormatters'
You probably forgot to install date-fns or Code: import DateFnsUtils from '@date-io/date-fns'; ...
73
dayjs TypeError: dayjs_1.default is not a function
Seems add esModuleInterop: true to tsconfig would solve this issue but should a better way. ...
31
dayjs Property 'fromNow' does not exist on type 'Dayjs'
This worked fine for me in case anyone still needs it I'm using the relativeTime plugin in my .ts fi...
23
flatpickr Ho to change lang?
In version 2.1.0 I wanted to use Japanese language file and finally I could did it I found Flatpickr...
19
dayjs Using DayJS with Typescript
I got the following error: `23:18 This expression is not callable Type 'typeof dayjs' has no call si...
16
flatpickr How can I disable the month dropdown?
Hadn't realized this might be such a big problem I want the month and year to be static values but m...
15
date fns Finalize API for v2.0.0-beta.1
Also since as of now I am working on date-fns alone I will update this comment with my progress so f...
5
react native modal datetime picker DatePickerIOS minuteInterval prop doesn't work.
Tried different options the only one that worked based on @temitope 's suggestion is: ...
5
pendulum ERROR: Failed building wheel for pendulum
@SriZbi84 one quick way to solve is use forced previous version which is not using PEP517 req ...
3
date fns Error when snapshotting in travis
You can override timezone using TZ environment variable i.e.: env TZ=utc npm test ...
381
flutterfire [firebase_core_web , firebase_auth_web, cloud_firestore_web ] Plugin project :firebase_auth_web not found. Please update settings.gradle.
Hi @gsusI Please add this in flutter app -> android -> settings.gradle if you disagree please write ...
252
provider A Product was used after being disposed. flutter: Once you have called dispose() on a Product, it can no longer be used.
Oh I see what you're doing Don't: DO: i have a ChangeNotifireProvider that such that i do pushReplac...
133
flutter intellij Can't wrap widget list with new widget assist by Alt+Enter
@wisit-phusi I thought you may disable Dart Quick Assists (Alt+Enter) from IDE To make sure please o...
99
flutter_svg Error: Type 'DiagnosticableMixin' not found
There are two ways to solve it if you are in an older version of flutter other than the last one (1....
95
bloc Close instances of dart.core.Sink.
Hi @zeucxb πŸ‘‹ Thanks for opening an issue! This is a false positive in the dart linter dart-lang/lin...
73
bloc Doc request: How to use bloc across pages?
If you want your Bloc to be accessible globally (across different routes) you need to make sure that...
60
flutterfire [FIREBASE_AUTH] 'UserAgent.h' file not found flutter firebase iOS
I changed dependencies try this Don't use ^ in version. I am working on flutter application with fir...
59
flutterfire [firebase_messaging] <Background push notification handling - no implementation found for method FcmDartService#initialized>
So in the new firebase_messaging version support for background messages was added Actually if you d...
59
provider Tried to listen to a value exposed with provider, from outside of the widget tree
listen:true being the default is logical It's not specifying listen: false inside an event handler t...
57
flutterfire [firebase_auth] iOS verifyPhoneNumber Token mismatch
Same problem with firebase_auth: 0.15.5+3: on the simulator I get the CAPTCHA code and it works ...
49
getx Persistent Bottom Bar
@arcas0803 I am putting here a complete example of using Navigator with bottomNavigationBar to be us...
47
bloc [Proposal] Replace mapEventToState with on<Event> in Bloc
What would an example that includes some basic async processing look like? It could look something l...
45
hive Version solving failed between hive_generator and dartx
Thanks for the info In the future I will release a new version of all the packages simultaneously Un...
37
flutterfire [firebase_auth] iOS doesn't build when upgrade to 1.15.x
I fixed this temporarily by running pod update in ios folder Describe the bug Flutter app doesn't bu...
36
flutterfire πŸ› [firebase_auth] Incompatible with latest flutter_localizations master channel.
For now you can simply add the following to your pubspec.yaml if you need to stay on dev channel and...
34
flutterfire [cloud_firestore] no visible @interface for 'FIRQuery' declares the selector ...
cd ios and run pod update Firebase/Firestore and run build command let me know ...
33
river_pod [RFC] Unifying syntax for listening to providers (v2)
I like most of it but I am not sure that I like the approach of a new ConsumerHookWidget ...
32
flutterfire [firebase_messaging] Application.kt: Type mismatch: inferred type is PluginRegistry but FlutterEngine was expected
There is a workaround mentioned in: #1613 Replace: To: Also temporary downgrade firebase_messaging t...
31
flutterfire Firebase messaging onResume and onMessage broken on iOS since Flutter 1.7.4
everybody: What would be possible other implications when removing that code? Removing those lines m...
29
flutterfire [firebase_auth] Method swizzling problem with phone auth iOS
@cielo Hi Yes i did I got Token mismatch too But when i fixed AppDelegate.swift i solved this error ...
29
flutterfire [firebase_admob 0.11.0+1] XCode Build Fails: Google-Mobile-Ads-SDK-fjgkwjemgangjofelixrcilvndtg
Hey guys I think this is because AdMob recently updated their SDK to 8.0.0(because of this firebase_...
28
flutter_cached_network_image using placeholder on CachedNetworkImageProvider or directly use CachedNetworkImage
@MahdiPishguy sorry for my late reaction ImageProviders can only return 1 image so this cannot retur...
28
flutterfire [firebase_messaging] Type mismatch: inferred type is PluginRegistry? but FlutterEngine was expected
Fixed by replace with: Following the instructions on pub.dev for handling background messages doesn'...
28
flutterfire [firebase_messaging] Android v2 embedding crashes
Why is this not labelled severe? This causes crash dialogs to show periodically when the application...
28
invoiceninja PHP 7.2 issues: count(): Parameter must be an array or an object that implements Countable
Since I was using PHP 7.2 locally but 5.6 on the production server I fixed this by casting an array ...