theideasaler / calendar_date_picker2 Goto Github PK

Describe the bug
If the state is updated when choosing a date, the selected date(s) are deleted.
For example, I want to let the user select a date range and display in real time the range selected by the user.
In this case I store the dates from onValueChanged(dates) in variables and use setState((){}) to update the UI.

Minimum Reproduceable Example

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

class DebugScreen extends StatefulWidget {
  DebugScreen();

  @override
  DebugScreenBuild createState() => new DebugScreenBuild();
}

class DebugScreenBuild extends State<DebugScreen> {
  DateTime start = DateTime.now();
  DateTime end = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
      children: [
        Text(start.toString()),
        Text(end.toString()),
        CalendarDatePicker2(
          config: CalendarDatePicker2Config(
            calendarType: CalendarDatePicker2Type.range,
            firstDate: DateTime.now().subtract(Duration(days: 1)),
            lastDate: DateTime.now().add(Duration(days: 360)),
          ),
          onValueChanged: (dates) {
            setState(() {
              if (dates.length == 1) {
                start = dates[0]!;
              } else if (dates.length == 2) {
                end = dates[1]!;
              }
            });
          },
          initialValue: [],
        )
      ],
    )));
  }
}

Expected behavior
When the first date is selected, the first text display the date and the date is selected in the calendar

Actual Behaviour
The date is not selected in the calendar

Hello, I request feature.
Thanks for considering my request.

1.) Button (Today) => Automatic date picker today.
2.) Button (Clear) => Clear selection

When days are disabled, the text style of disabled days cannot be set. Is it possible to add text style for disable days?

Is your feature request related to a problem? Please describe.
This is something that my UX designer asked for.

Describe the feature you'd like
Right now, the range date picker allows only selecting the date range by selecting a date, and then a date following that one (or the same). I'd like to have the ability for the users to select any two dates, even date A, and then date B that's before date A.

Those dates could still be normalized in onValueChanged, so that they appear in a correct (chronological) order.

I'd be willing to make a Pull Request for that, so if you're okay with that just give me a heads-up :)

I could either modify the existing behavior of the range calendar type, or introduce a rangeBidirectional value for CalendarDatePicker2Type with a correct behavior and docs. Or maybe something else that you'd propose?

Cheers!

Can you add a border radius for day indicator, thanks.

Thank you for your hard work, the calendar is really simple to config and works smooth.

Is your feature request related to a problem? Please describe.
Most european calendars starting on monday. I've seen no api for this feature so it's propably missing.

Describe the feature you'd like
A option to define monday as first day of week would be very nice.

hi bro,
I have seen the source code of this lib, great.
sure it came from CalendarDatePicker in material lib

how about support weekView
in the mode of DatePickerMode.day, to be exact，is the monthView, show all day of the month

with weekView, just show all day of current week, just use new pageView and controller, likee _CalendarView did

Hi! I'm trying to use calendar_date_picker2 for my web application and got the errors:

SliverGeometry is not valid: The "scrollExtent" is negative.
The RenderSliver that returned the offending geometry was: _RenderSliverFractionalPadding#c2f34 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  creator: _SliverFractionalPadding ← SliverFillViewport ← Viewport ← IgnorePointer-[GlobalKey#17ad9] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#62556] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#119b9] ← NotificationListener<ScrollMetricsNotification> ← ⋯
  parentData: paintOffset=Offset(0.0, 0.0) (can use size)
  constraints: SliverConstraints(AxisDirection.right, GrowthDirection.forward, ScrollDirection.idle, scrollOffset: 333.3, remainingPaintExtent: 333.3, crossAxisExtent: 294.0, crossAxisDirection: AxisDirection.down, viewportMainAxisExtent: 333.3, remainingCacheExtent: 333.3, cacheOrigin: -0.0)
  geometry: SliverGeometry(scrollExtent: -7000.0, hidden, maxPaintExtent: -7000.0)
SliverGeometry is not valid: The "scrollExtent" is negative.

My code is the following:

final dateList = await showCalendarDatePicker2Dialog(
      context: context,
      config: CalendarDatePicker2WithActionButtonsConfig(
        calendarType: CalendarDatePicker2Type.range,
        firstDate: firstDate,
        lastDate: lastDate,
        currentDate: today,
        shouldCloseDialogAfterCancelTapped: true,
        weekdayLabelTextStyle: AppFonts.commonText,
        selectedDayHighlightColor: AppColors.green_0,
        selectedDayTextStyle: AppFonts.commonText,
        dayTextStyle: AppFonts.commonText,
      ),
      dialogSize: Size(
        500.w,
        500.h,
      ),
    );

and it shows empty dialog window:

what I did wrong?

Thanks!

Use cases
I have one usecase like select date and update calender UI based on filters like Last Week, Last Month, etc. So Based on filter I want to reflect current month. which is not achievable in the current version.

Describe the feature you'd like
Provide extra param feasibility like initialDate. and will update accordingly

This package seems promising, it would be great if we added default dark mode color scheme and make the current default theme as light mode.

Also the capability of changing the background color of the dialog should be added.

Thank you for your wonderful library!

Describe the bug
Error occurs when moving the focus with the keyboard.
It is reproduced by pressing the left/right key after moving the focus to the calendar section with the Tab key.

════════ Exception caught by services library ══════════════════════════════════
The following assertion was thrown while processing the key message handler:
'package:calendar_date_picker2/src/widgets/calendar_date_picker2.dart': Failed assertion: line 680 pos 12: '_focusedDay != null': is not true.

When the exception was thrown, this was the stack
#2      _MonthPickerState._handleDirectionFocus
#3      CallbackAction.invoke
#4      ActionDispatcher.invokeAction
#5      ShortcutManager.handleKeypress
#6      _ShortcutsState._handleOnKey
#7      FocusManager._handleKeyMessage
#8      KeyEventManager._dispatchKeyMessage
#9      KeyEventManager.handleRawKeyMessage
#10     BasicMessageChannel.setMessageHandler.<anonymous closure>
#11     BasicMessageChannel.setMessageHandler.<anonymous closure>
#12     _DefaultBinaryMessenger.setMessageHandler.<anonymous closure>
#13     _DefaultBinaryMessenger.setMessageHandler.<anonymous closure>
#14     _invoke2.<anonymous closure> (dart:ui/hooks.dart:190:15)
#18     _invoke2 (dart:ui/hooks.dart:189:10)
#19     _ChannelCallbackRecord.invoke (dart:ui/channel_buffers.dart:42:5)
#20     _Channel.push (dart:ui/channel_buffers.dart:132:31)
#21     ChannelBuffers.push (dart:ui/channel_buffers.dart:329:17)
#22     PlatformDispatcher._dispatchPlatformMessage (dart:ui/platform_dispatcher.dart:589:22)
#23     _dispatchPlatformMessage (dart:ui/hooks.dart:89:31)
(elided 5 frames from class _AssertionError and dart:async)
KeyMessage: KeyMessage([KeyDownEvent#fc994(physicalKey: PhysicalKeyboardKey#7004f(usbHidUsage: "0x0007004f", debugName: "Arrow Right"), logicalKey: LogicalKeyboardKey#00303(keyId: "0x100000303", keyLabel: "Arrow Right", debugName: "Arrow Right"), character: "UIKeyInputRightArrow", timeStamp: 64:51:42.543241)])
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by services library ══════════════════════════════════
'package:calendar_date_picker2/src/widgets/calendar_date_picker2.dart': Failed assertion: line 680 pos 12: '_focusedDay != null': is not true.
════════════════════════════════════════════════════════════════════════════════

Platforms (please complete the following information):

• Platforms: [iOS, Mac]

Minimum Reproduceable Repo

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _selected = ValueNotifier('pick!');
  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: ValueListenableBuilder<String>(
                valueListenable: _selected,
                builder: (_, selected, __) {
                  return Text(selected);
                })),
        floatingActionButton: Builder(builder: (context) {
          return FloatingActionButton(
            child: const Icon(Icons.calendar_today),
            onPressed: () async {
              final results = await showCalendarDatePicker2Dialog(
                context: context,
                config: CalendarDatePicker2WithActionButtonsConfig(
                  calendarType: CalendarDatePicker2Type.range,
                  shouldCloseDialogAfterCancelTapped: true,
                ),
                dialogSize: const Size(325, 400),
                borderRadius: 15,
              );
              if (results != null) {
                _selected.value = results.toString();
              }
            },
          );
        }),
      ),
    );
  }
}

Does this plugin support japanese locale ?

Greetings,
is it possible to display the current week number next to the row?

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 feature you'd like
A clear and concise description of what you want to happen.

Use cases
Add use cases for the feature you're requested

i use the methdo showCalendarDatePicker2Dialog to show the calendar dialog,
when the phone in landscape mode, the dialog can't show full ui, can i have any attention?

Is your feature request related to a problem? Please describe.
nope

Describe the feature you'd like
I would like to use showCalendarDatePicker2Dialog without ActionButtons, so would appreciate using CalendarDatePicker2Config instead of CalendarDatePicker2WithActionButtonsConfig as well as onValueChanged

Use cases
Add use cases for the feature you're requested

When i use CalendarDatePicker2() not in ListView. Layout of Calendar is error. Spacing between header and calendar is very large.

Describe the bug
When using range selector mode. If the user selects any day and tries to go to next month using the next month icon. The already selected day gets deselected.

As you can see in second image the date was deselected on hovering.

To Reproduce
This can be reproduced when using entry overlay with the calendar.

Try using this component.

class CustomDatePicker extends StatefulWidget {
  const CustomDatePicker({
    super.key,
  });

  @override
  State<CustomDatePicker> createState() => _CustomDatePickerState();
}

class _CustomDatePickerState extends State<CustomDatePicker> {
  OverlayEntry? _overlayEntry;

  OverlayEntry _createOverlayEntry() {
    if (_overlayEntry != null) {
      _overlayEntry?.remove();
      _overlayEntry = null;
    }
    final renderBox = context.findRenderObject()! as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(
      Offset.zero,
      ancestor: Navigator.of(context).context.findRenderObject(),
    );

    return OverlayEntry(
      builder: (context) => Positioned(
        left: offset.dx - 400,
        top: offset.dy + size.height + 5.0,
        width: size.width + 400,
        child: Material(
          color: PrimaryThemeData.get(context).primaryColor,
          elevation: 8,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 2,
                    child: CalendarDatePicker2(
                      config: CalendarDatePicker2Config(
                        calendarType: CalendarDatePicker2Type.range,
                        selectedDayHighlightColor: Colors.purple[800],
                        centerAlignModePicker: true,
                      ),
                      onDisplayedMonthChanged: (date) {},
                      value: [],
                    ),
                  ),
                  Flexible(
                    child: ListView(
                      padding: EdgeInsets.zero,
                      shrinkWrap: true,
                      children: [
                        ListTile(
                          title: Text(
                            'Today',
                          ),
                        ),
                        ListTile(
                          title: Text(
                            'Yesterday',
                          ),
                        ),
                        ListTile(
                          title: Text(
                            'This Week',
                          ),
                        ),
                        ListTile(
                          title: Text(
                            'Custom',
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
              TextButton(
                onPressed: () {
                  if (_overlayEntry != null) {
                    _overlayEntry?.remove();
                    _overlayEntry = null;
                  }
                },
                child: const Text('Apply'),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _overlayEntry = _createOverlayEntry();
        Overlay.of(context).insert(_overlayEntry!);
      },
      child: FocusableActionDetector(
        mouseCursor: SystemMouseCursors.click,
        onFocusChange: (focus) {
          if (focus) {
            _overlayEntry = _createOverlayEntry();
            Overlay.of(context).insert(_overlayEntry!);
          } else {
            _overlayEntry?.remove();
          }
        },
        child: SizedBox(
          height: 40,
          width: 160,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.calendar_month_outlined,
              ),
              const SizedBox(width: 8),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Custom Range',
                  ),
                  const SizedBox(height: 4),
                  Text(
                    'Oct 11 - Nov 10',
                  ),
                ],
              ),
              const SizedBox(width: 4),
              Icon(
                Icons.arrow_drop_down,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Platforms (please complete the following information):

• Tested on macOS
• Flutter 3.7.9
• calendar_date_picker2: ^0.5.1

Describe the bug
Changing year does not call onValueChanged

To Reproduce
Steps to reproduce the behavior:
Run sample, try to change year, log value

Expected behavior
onValueChanged would fire when select year

Actual Behaviour
onValueChanged does not fire when select year

Screenshots
If applicable, add screenshots to help explain your problem.

Describe the bug
Divider is visible between rows of the month grid. Need to calculate tileWidth accurately enough.

Expected behavior

Actual Behaviour

Using 'CalendarDatePicker2WithActionButtons' widget when you tap OK button 'widget.onCancelTapped?.call();' is called.

Screenshots

How can I get a date range before 1970 ? which is the default

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 feature you'd like
A clear and concise description of what you want to happen.

Use cases
Add use cases for the feature you're requested

Can i change it

padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),

in _buildOkButton and _buildCancelButton

Describe the bug
If in config you select firstDate it setup the Calendar to that specific date but it won't allow you to select it again as it marks it as disable.
i.e firstDate: DateTime.now() // -> 7/03/2023
The calendar will setup this date but it won't allow you to select it anymore
To Reproduce
Steps to reproduce the behavior:

1. Create a new Calendar and in the config setup a firstDate.
2. open the Calendar
3. You'll see the firstDate on grey and it won't allow you to click it again so if for example you click on the 8th by error it won't allow you to comeback to the 7th.
4. See error

CalendarDatePicker2( initialValue: [], onValueChanged: (value) => dateChanged(value), config: CalendarDatePicker2WithActionButtonsConfig( firstDate: DateTime.now(), calendarType: CalendarDatePicker2Type.single)

Expected behavior
The firstDate should be enable and ready to be selected by the user
Actual Behaviour
the firstDate is disabled and it does not allow the user to select it.
Screenshots

Platforms (please complete the following information):

• Platforms: tested just on iOS simulator haven't tried on other platforms yet

Minimum Reproduceable Example
CalendarDatePicker2( initialValue: [], onValueChanged: (value) => {}, config: CalendarDatePicker2WithActionButtonsConfig( firstDate: minDate, calendarType: CalendarDatePicker2Type.single)

I am using the selectableDayPredicate to prevent selection of blocked days in my app as a range
but user can select before and after the blocked days e,g
if the blocked days is between [20/9 and 24/9]
now user can select for [18/9 to 25/9]
i would like to prevent this scenario

Steps to reproduce the behavior:

1. add calendar_date_picker2
2. implement selectableDayPredicate
3. select before and after the blocked days
4. the blocked days can be easily selected inside the range

Expected behavior
i was expecting not to be able to select these days

Actual Behaviour
the days can be selected

Screenshots

please add custom margin padding.

Hello author, I hope you can support customizing the position of the year and month display centered, please consider it back?

Maybe can we have year builder

你好，我想将年月直接设置为中文形式例如 “2023年3月”，该怎么操作

var results = await showCalendarDatePicker2Dialog(
context: context,
config: CalendarDatePicker2WithActionButtonsConfig(
calendarType: CalendarDatePicker2Type.range,
lastDate: DateTime.now(),
shouldCloseDialogAfterCancelTapped: true,
okButton: InkWell(
onTap: () {
print('Get Selection Date=====>>>');
},
child: Text('OK'),
dialogSize: Size(400, 400),
borderRadius: BorderRadius.circular(15),
);

this is my code.

Please, anyone let me know if any idea. 
Thank you in advance.

Would love to be able to configure the physics of the horizontal scroll between months.

Describe the feature you'd like
Can you add an optional Today button? This is to quickly select today's date.

Use cases
User wants to quickly select today's date after he drifted to the past (or the future).

Hey bro, really nice plugin. Can you please add possibility to display current month when loading calendar?
So the thing is, when I set firstDate to 1 January 2023 and lastDate to 31 December 2023, when calendar loads it first shows me January month, and now is April, I would like initially to display April month.

Can I custom this one because I use yearBuilder well and change year value but the value on Modepicker not same like this

This error occures using your package

======== Exception caught by widgets library =======================================================
The following UnsupportedError was thrown building:
Unsupported operation: Cannot remove from an unmodifiable list

When the exception was thrown, this was the stack:
#0 UnmodifiableListMixin.removeWhere (dart:_internal/list.dart:139:5)
#1 _MonthPickerState._buildItems (package:calendar_date_picker2/src/widgets/calendar_date_picker2.dart:764:45)
#2 SliverChildBuilderDelegate.build (package:flutter/src/widgets/sliver.dart:487:22)
#3 SliverMultiBoxAdaptorElement._build (package:flutter/src/widgets/sliver.dart:1422:28)
#4 SliverMultiBoxAdaptorElement.performRebuild.processElement (package:flutter/src/widgets/sliver.dart:1352:67)
#5 Iterable.forEach (dart:core/iterable.dart:325:35)
#6 SliverMultiBoxAdaptorElement.performRebuild (package:flutter/src/widgets/sliver.dart:1399:24)
#7 SliverMultiBoxAdaptorElement.update (package:flutter/src/widgets/sliver.dart:1328:7)

Is possible to add months preview like as year preview?...

I couldn't find a way to clear the date selection.
I use range mode, and I use the first date in the selectableDayPredicate.
In the initial state I enable all the days that aren't booked, but when one date is selected I disable all dates that comes after a booked date. The issue is that there's no way to get back to the initial state.

It would be nice if selecting the selected date again would deselect it. Alternatively I could add a reset button underneath the calendar, but then I need a way to modify the selection.

First of all, I'd like to thank you for the work you are doing with this package. It helps a lot.

Is your feature request related to a problem? Please describe.
I'd like to customize okButton on the dialog with showCalendarDatePicker2Dialog.
This can be done with the okButton argument which overrides the okButton widget but it doesn't seem to be possible to get the selected values and return it like the default okButton does.

Describe the feature you'd like
I'd like to customize the okButton of the dialog withtout necessarily change its behavior.

Use cases
Customize the button's decoration.
Change label's language.

Thank you !

Describe the feature you'd like
Can we have the feasibility of displaying months in the vertical list view?
There are a couple of other packages which give this kind of view. But this package is pretty much fulfilling another requirement also. So, personally prefer to use this package on my end. So It would be very helpful to have list view support.

Hi I saw this widget only have the onChange callback to send selected value but in my case I need to implement date range by auto select end date so I think I have issue with this case.

Hello everyone i try to find the option to disable a day for the calendar. Do you have any example for this please ?

As the title says, can I change the color of the ripple effect when a day is selected and if so how?

I tried to change the ripple color in the ThemeData but it doesn't work.

Thanks.

Is your feature request related to a problem? Please describe.
At the moment the selectable date range is unlimited.

Describe the feature you'd like
An API with limitRangeInDays or similar would be nice to limit the user in max selectable days. When user is clicking a Start-Date, the days outside the limit would get slighty more gray or a custom color and they cant be selected.

Use cases
We have an statistics service which provides only data für 31 days. More days will result in heavy server load. This feature could give the user a direct feedback instead of an error message.

range date: [2023-10-19 00:00:00.000, 2023-10-20 00:00:00.000]

Describe the bug
I am looking to implement a multi select. If I include a list of dates for when the widget loads they appear but I am then unable to select (or deselect) any dates. If I do not include an initial list of dates I can select and deselect dates.

Expected behavior
I am expecting to be able to select and unselect multiple dates.

Platforms (please complete the following information):

• Platforms: Web

Minimum Reproduceable Example

import 'package:calendar_date_picker2/calendar_date_picker2.dart';

final today = DateUtils.dateOnly(DateTime.now());

class InstallerDatePickerV1 extends StatefulWidget {
const InstallerDatePickerV1({
Key? key,
this.width,
this.height,
}) : super(key: key);

final double? width;
final double? height;

@OverRide
_InstallerDatePickerV1State createState() => _InstallerDatePickerV1State();
}

class _InstallerDatePickerV1State extends State {
List<DateTime?> _dates = FFAppState().installerAvailCallBack;

int convertDateTimeToIsoInt(DateTime date) {
int year = date.year;
int month = date.month;
int day = date.day;
return year * 10000 + month * 100 + day;
}

void _onValueChanged(dynamic value) {
if (value is List<DateTime?>) {
setState(() {
_dates = value;
List isoIntDates = _dates
.where((date) => date != null)
.map((date) => convertDateTimeToIsoInt(date!))
.toList();
FFAppState().installerAvailability = isoIntDates;
});
}
}

@OverRide
Widget build(BuildContext context) {
return CalendarDatePicker2(
config: CalendarDatePicker2Config(
calendarType: CalendarDatePicker2Type.multi,
firstDate:
DateTime.now().subtract(Duration(days: 1)), // Updated this line
selectedDayHighlightColor: FlutterFlowTheme.of(context).primary,
),
value: _dates,
onValueChanged: (dates) {
_onValueChanged(dates);
},
);
}
}

I am not able to close the dialog using the cancel button.

Describe the bug
It seems that the package ignore the apps locale when displaying the datepicker and shows it in english.

To Reproduce
Steps to reproduce the behavior:

1. Set other than english locale for the app.
2. Implement CalendarDatePicker2Dialog

var results = await showCalendarDatePicker2Dialog(
                              context: context,
                              config: CalendarDatePicker2WithActionButtonsConfig(
                                calendarType: CalendarDatePicker2Type.range,
                                selectedDayHighlightColor:
                                    Color(AppColors.yellow),
                                okButton: Text('Выбрать'),
                                cancelButton: Text('Отмена'),
                              ),
                              dialogSize: Size(
                                  MediaQuery.of(context).size.width * 0.9, 400),
                              initialValue: [],
                              borderRadius: 10,
                            );

3. Call the function and open date picker

Expected behavior
Open the date picker and see that the days, months and weeks format is shown in the language of the apps locale.

Actual Behaviour
The datepicker shows everything in english.

I can see inside the CalendarDatePicker2 widget that you use MaterialLocalizations _localizations, however, it ignores the app's locale.

I even called print(MaterialLocalizations.of(context).narrowWeekdays); in the same widget I call the date picker and the print result is as expected - it shows the days in the language of the app, but the date picker is still in english.

Screenshots

Platforms (please complete the following information):

• Platforms: both IOS and Android