iamvivekkaushik/datepickertimelineflutter

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 file

import 'package:date_picker_timeline/date_picker_timeline.dart';

Usage

This version is breaking backwards compatibility

Use the DatePicker Widget

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      DatePicker(
        DateTime.now(),
        initialSelectedDate: DateTime.now(),
        selectionColor: Colors.black,
        selectedTextColor: Colors.white,
        onDateChange: (date) {
          // New date selected
          setState(() {
            _selectedValue = date;
          });
        },
      ),
    ],
)

Constructor:

DatePicker(
    this.startDate, {
    Key key,
    this.width,
    this.height,
    this.controller,
    this.monthTextStyle,
    this.dayTextStyle,
    this.dateTextStyle,
    this.selectedTextColor,
    this.selectionColor,
    this.deactivatedColor,
    this.initialSelectedDate,
    this.activeDates,
    this.inactiveDates,
    this.daysCount,
    this.onDateChange,
    this.locale = "en_US",
    this.calendarType = CalendarType.gregorianDate,
}) : super(key: key);

Author

• Vivek Kaushik

Contributors

• BradInTheUSA
• Roger

datepickertimelineflutter's Issues

Can we deactivate all the future dates from next month?

Currently we can deactivate a list of datetimes, how can we deactivate all the future dates from next month?
How can I achieve it in this plugin? if not possible can you add this feature? Or add an end date to show only 30 days from today.

here is the code.

  List<DateTime> deactivatedDates() {
    return [
      DateTime.now().add(Duration(days: 31)),
      DateTime.now().add(Duration(days: 32)),
      DateTime.now().add(Duration(days: 33)),
      DateTime.now().add(Duration(days: 34)),
      DateTime.now().add(Duration(days: 35)),
...
..
..
    ];
  }

Thanks,

Add widget into date

I am looking for the way to add two color circle contain to who that there is event. So that user will know that there are events in that date. Then click the date show the event detail under the timeline.

Is there a way to add widget into date?

Submit to https://pub.dev/

Hi

Are you planning on adding this to https://pub.dev/. If so I'll wait otherwise I'll grab it now.

Brad (scrbrd.com)

Jump back to today's date

I was wondering if we can add a button and on tap that button can make the selected date back to Today's date?
Or if this feature is already available? How can I implement that?

Vivek many thanks for the package! very useful!!

What's the use of setDatePickerState ? and how to use it

Actually I'm trying to set the date programatically by clicking from a button

Add feature to disable past days

when i move to date with animateToDate, selection color still remain. How can I fix it?

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.

Weeks / Months Support

Is it possible to pick type of the time?

for example. type.daily / type.weekly / type.monthly

JumpToSelection() offset has issues.

Describe the bug

the JumpToSelection() function takes the time into consideration causing offset values to change during different times.

To Reproduce

Create a startDate to be of the format "YYYY-MM-DD 00:00:00"
select initialSelectedDate as DateTime.now()
over the course of the day, on calling the JumpToSelection() for the first time via a separate button, the timeline will jump from to the date +1 value ( ex: if today is may 11th, JumpToSelection() will jump to May 12th after a period of the day has passed)

Expected behavior

A clear and concise description of what you expected to happen.
on initial jump, the timeline should jump to the initialSelectedDate Value

Screenshots

If applicable, add screenshots to help explain your problem.

also, this weird thing happens, I'm not sure why :

Additional context
Add any other context about the problem here.

code used by me :

  DateTime _selectedDate = DateTime.now();
.
.
.
DatePickerController _dpc = new DatePickerController();
.
.
.
DatePicker(
                          _startDate,
                          controller: _dpc,
                          initialSelectedDate: _selectedDate,
                          width: Size_Config.blockSizeHorizontal * 15,
                          height: Size_Config.blockSizeVertical * 12,
                          monthTextStyle: TextStyle(
                              fontFamily: 'Montserrat',
                              color: Colors.white54,
                              fontSize: Size_Config.blockSizeHorizontal * 3),
                          dateTextStyle: TextStyle(
                              fontFamily: 'MontSerrat',
                              fontSize: Size_Config.blockSizeHorizontal * 5,
                              fontWeight: FontWeight.bold,
                              color: Colors.white54),
                          dayTextStyle: TextStyle(
                              fontFamily: 'Montserrat',
                              color: Colors.white54,
                              fontSize: Size_Config.blockSizeHorizontal * 3),
                          onDateChange: (date) {
                            _pc.open();
                            setState(() {
                              _selectedDate = date;
                            });
                          },
                        ),
.
.
.
IconButton(
                                  onPressed: () {
                                    _dpc.animateToSelection();
                                  },
                                  icon: Icon(CustomIcons.filter),
                                  color: Colors.white54,
                                  //iconSize: 40,
                                ),

Animate to page not working on iOS

Describe the bug
Animate to page not working, it just scroll to the given date

To Reproduce
Here is the code

class ScheduleScreen extends StatefulWidget {
  const ScheduleScreen({Key? key}) : super(key: key);

  @override
  _ScheduleScreenState createState() => _ScheduleScreenState();
}

class _ScheduleScreenState extends State<ScheduleScreen> {
  DateTime _selectedDate = DateTime.now();
  final DatePickerController _controller = DatePickerController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      _controller.animateToDate(_selectedDate);
    });
  }

  @override
  Widget build(BuildContext context) {
    final _theme = Theme.of(context);
    SizeConfiguration().init(context);
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          CustomSliverAppBar(
            title:
                "${DateFormat().add_MMMM().format(_selectedDate)} ${DateFormat().add_y().format(_selectedDate)}",
            children: [
              Padding(
                padding: EdgeInsets.only(
                  right: paddingX(5),
                  top: paddingX(2),
                  bottom: paddingX(2),
                ),
                child: ButtonPrimary(
                  paddingVertical: 1.5,
                  buttonColor: _theme.primaryColor,
                  buttonTextColor: AppColors.white,
                  buttonText: "Today",
                  onPressed: () {
                    _controller.animateToDate(DateTime.now());
                    setState(() {
                      _selectedDate = DateTime.now();
                    });
                  },
                ),
              ),
            ],
          ),
          SliverGap(
            height: paddingX(1),
          ),
          SliverToBoxAdapter(
            child: DatePicker(
              DateTime.now().subtract(const Duration(days: 365)),
              controller: _controller,
              initialSelectedDate: DateTime.now(),
              selectionColor: _theme.primaryColor,
              onDateChange: (date) {
                setState(() {
                  _selectedDate = date;
                });
              },
            ),
          ),
          SliverGap(
            height: paddingX(1),
          ),
        ],
      ),
    );
  }
}

Expected behavior
21 October should be active date

Recording
https://user-images.githubusercontent.com/77736118/138221572-91e3c9c0-19f3-434e-8358-ac71675ce777.mov

Smartphone (please complete the following information):

• Device: iPhone SE 1st Gen
• OS: iOS 15

I add a ScrollBar in flutter but it doesn't work

My code:

SizedBox(
          height: 100,
          width: 500,
          child: Scrollbar(
            controller: _dateScrollController,
            child: DatePicker(
              DateTime(2023, 10, 20),
              initialSelectedDate: DateTime.now(),
              selectionColor: Colors.black,
              locale: 'vi-VN',
              selectedTextColor: Colors.white,
              onDateChange: (date) {
                // New date selected
                setState(() {
                  // _selectedValue = date;
                });
              },
            ),
          ),
        ),

Result:

Error when scroll using scroll Bar:

Select dates from the past

Is your feature request related to a problem? Please describe.
I am wanting to use this fantastic widget to select dates from the past. At present it seems to only work for future dates.

Describe the solution you'd like
Perhaps you could add a stateDate parameter that is set to today by default.

Describe alternatives you've considered
Fork the code and add the feature.

Additional context

Jump to specific date?

Hey guys,

first we really enjoy your work and love the datepicker timeline.

We are searching for a feature to jump to a specific date.
Example: timeline is on 01.01.2020, users press a button with "12.12.2020" and the timeline jumps to this date immediately.

Do you have any idea or implementation for this?
Would be very helpful for lots of users we think.

Thanks for your attention.

Add button to slide back to Today's date

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

I want to ask if the package has the feature where we can have a button to automatically slide back straight to today's date after sliding to some date far away from today's one.

Describe the solution you'd like

If the feature does not exist, please I am requesting to add it.

Describe alternatives you've considered

If the proposed feature is not worth to be implemented, I would like to get some tips on how I can do it myself with my custom methods without altering the package.

Additional context

N/A

This Date Picker dependancy not working on latest flutter version

The current Dart SDK version is 3.0.2.

Because date_picker_timeline >=1.2.3 depends on intl ^0.17.0 and date_picker_timeline <1.2.3 doesn't support null safety, every version of date_picker_timeline requires intl ^0.17.0.
So, because prarthi depends on both intl ^0.18.1 and date_picker_timeline any, version solving failed.

The lower bound of "sdk: '>=2.1.0 <3.0.0'" must be 2.12.0 or higher to enable null safety.
For details, see https://dart.dev/null-safety
exit code 1

The contents text color of the DatePicker(day, date, month) dont react to night(dark) mode

Describe the bug
When you are in light mode the color of the contents is black as opposed to its white background wich is great, however when you switch to dark mode, the text color is still black and its very bad for the ui obviously, i mean you can manually change the color of the text by checking the theme mode, but its seems pointless to do that, and it would be great if the datepicker could react on its own.

Multiple date selection

Multiple date selection feature should be added in this so that can user can select multiple dates at a time.Thanks

please add minDate & maxDate option

Is your feature request related to a problem? Please describe.
Yes, I need to set min & max dates to show in the list, not confused with currentDate. For example, I want today must be the max date, thus user can only scroll to past dates and prevent user from selecting future dates.

Describe the solution you'd like
Please add minDate and maxdate in the constructor as optional.

Describe alternatives you've considered
Or maybe as an alternative also add type with value "future" (calendar will show current & future dates) or "past" (calendar will show current & past dates).

Additional context
Nothing.

Add support to display Holidays Integration to Calendar Timeline Flutter.

Currently, implementing holiday API in the Calendar Timeline Flutter has proven to be difficult. As a result, I propose the addition of a built-in holiday API integration to simplify the process for users.

The feature should include the ability to easily access and integrate popular holiday APIs such as Google Calendar API, Holiday API, or any other commonly used holiday API. This would allow users to automatically display holiday events on their calendar timeline without the need for complex coding or manual input.

Overall, this feature would greatly enhance the usability and convenience of the Calendar Timeline Flutter for users looking to display holidays on their timeline.

work-a-bit.mp4

Provide a `lastDate` option

It will be nice to be able to provide a last date. It will be an efficient option to prevent performance issue on low end devices due to the infinite scrolling.

initialSelectedDate as an optional parameter

is it possible to change the initialSelectedDate parameter as optional parameter? I would like to display the date picker without any date preselected.

I've tried initialize DatePicker without initialSelectedDate but it produce this following error

The getter 'day' was called on null.
Receiver: null
Tried calling: day

quick view within the code, it seems initialSelectedDate is used to initialize _curDate variable that is being used throughout the code.

also if it really is required, I think it should be marked as @required.

Text color not changing on dark mode

Describe the bug
Dark mode do not change the black text color of dates. Also there is no option to change color of dates which are not selected.

/removed

/removed

Persian(Jalali) Calendar

Is it possible for you to add a Persian calendar option to it?
Example for a simple Persian calendar:
https://pub.dev/packages/persian_datepicker#-readme-tab-

Left padding without clipping?

Is your feature request related to a problem? Please describe.
A timeline should occupy the entire width of the screen since it is continuous. Placing the control without any margins however result in looking not so good, because it still should have some space to the left on the first day:

This is also a problem with the last date and padding to the right, when I have limited numbers of days.

If I decide to just put a margin around things will clip:

Describe the solution you'd like
I think a margin to the ListView.Builder should be sufficient. Anything really to make the first day start farer and the last day earlier on the X axis, a setting to set an EdgeInset for the padding of the control.

Describe alternatives you've considered
Starting a day earlier and making it inactive while showing one day too much and making the last day inactive can work out when the initial day is the 2nd day (today), but it feels hacky and shall confuses the user thinking the first day might be today, which wouldn't be the case.

I really prefer to have the first day to be today.

style the selected date

I can change the font of the unselected date but how to change the font size of the selected date?

previous days

Is it possible to implement that we can select the previous days by swiping right?

Add disabled option for specific dates

Hi There,
I want to make a specific date to be disabled in the middle of enabled dates. How this could be a possibility?

Hello how to implement a last date?

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.

error with new verison of intl package

conflict when using latest intl: ^0.18.0 (https://pub.dev/packages/intl)
please update it with latest verison

Using `notifyListeners()` inside `onDateChange` not working

Describe the bug

Whenever the user changes the calendar date, something should happen in my program. At least a class I created to store my screen's data should change. In order to do so, I'm calling a method that changes the internal data and then calling notifyListeners() to update other fields. However, if I use notifyListeners(), the selected date on the calendar doesn't change; the data does change, but not the selected rectangle on the screen.

To Reproduce

The code in my app is quite long, but I believe the following should suffice...

The DatePickerTimeline call:

DatePickerTimeline(
  DateTime.now(),
  onDateChange: (newDate){
    data.changeDay(date: newDate);
  }

The method to update the data is something like:

void changeDay({DateTime date}){
  this.day = date;
  notifyListeners();
}

Expected behavior

Why is the selected rectangle not being selected? I've also tried to refactor the code to use the Provider package instead of setState() but it didn't work either.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox

Smartphone (please complete the following information):

• Device: Nexus 6
• OS: Android 9.0

Current date without focus

Describe the bug
I am trying to create a calendar, initializing with DateTime.now().add(Duration(days: -7)) , but it is focusing on the first date and not the current date.

Expected behavior
I would like it to start with the current date, with the possibility for the user to select earlier dates by scrolling to the left.

Screenshots
It is initializing this way, with the focus of the dates 7 days ago.

I would like it to initialize with the focus on DateTime.now()

DatePicker(
            DateTime.now().add(Duration(days: -7)),
            locale: 'pt_BR',
            initialSelectedDate: DateTime.now(),
            selectionColor: Colors.black,
            selectedTextColor: Colors.white,
            controller: _controller,
            onDateChange: (date) {
              setState(() {
                _selectDate = date;
              });
            },
          ),

Unselected card style

Hello,
Can we change the unselected color for the card ?
I want to make it white, but it seems the default color is transparent

Thank you

Locale data has not been initialized

Hi, thanks for very good library. But I have the issue. I am new in Flutter, so maybe doing smth wrong.

Implemented the last library version with locale, but get an error

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following LocaleDataException was thrown building DateWidget(dirty):
Locale data has not been initialized, call initializeDateFormatting().

https://pasteboard.co/IzOhjdB.png

selection color is not changing on date selection

when i am using setState() date is changing but selection color is not changing. if i am doing something wrong please let me know.

child: DatePickerTimeline(
DateTime.now(),
onDateChange: (date) {

                    setState(() {
                      _date = date;
                    });
                  }, 

Scroll doesn't work in desktop windows

horizontal scroll doesn't work in desktop windows with no error

Select Date Perimeters.

Is your feature request related to a problem? Please describe.
Thanks for creating this Vivek. An issue I have is that the dates are continuous. It will be great if we are able to specify the dates we want the date picker to run for.

Describe the solution you'd like
A function that allows to specify the number of days, weeks, months from DateTime.now().
Or the function the allows us to add or subtract days from DateTime.now()

Describe alternatives you've considered
Using a different picker. or creating a selector on my own. Which is not efficient, as we already have such a sick date picker here, we just need to have more options.

Additional context
A little tweaks here and there and it'll be amazing. Thanks for creating this once again.

Minimum and maximum date limmits

can not select dates previous than current date, plus there shall be a min and max limmit like other calendars

JumpToSelection

Is your feature request related to a problem? Please describe.
The problem is in the beginning because users must go in the selected date when the DatePicker has appeared and for the moment we only can go in the selected date after we use _controller.jumpToSelection(); in DatePicker View.

Describe the solution you'd like
Maybe we can call _controller.jumpToSelection() in initState

Width issues between android and ios

I have the calendar selector in a simple Container, on iOS is fits perfect, on Android Pixel 3 Simulator, the width is too small

@override
  Widget build(BuildContext context) {

    return Container(
      height:90,
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      padding: const EdgeInsets.only(top: 4, bottom:5, left: 10, right: 10),

      child: DatePickerTimeline(
        _currentSelection,
        dateSize: 20,
        daySize: 10,
        monthSize: 10,
        selectionColor: Colors.grey[200],
        monthColor: Colors.grey[500],
        onDateChange: (date) {
          _selectDate(date);
        },
      )
    );
  }

Expected behavior

Between both devices I expected the same edge to edge layout,. It doesnt seem to be inheriting font styles on Android either (right screen)

Screenshots

https://pasteboard.co/IxHH3qh.jpg

SelectedTextColor was responding to user's entry

the bug
In the constructor, the parameter 'selectedTextColor' was not responding to the user's entered choice.

Line 72 was: 'this.selectedTextColor = Colors.white,'

Changing line 72 to ' this.selectedTextColor = selectedTextColor ?? Colors.white,' and
line 25 to 'final Color? selectedTextColor;' fixed the issue.

Using date_picker_timeline: ^1.2.3

Is this project dead ?

seems nothing happened since spring, and loads of PR's etc ?

is the maintainer around ? is there more than one commiter ?

change format locale

how do i change the format language, for example, i'm from brazil, how do i show up the week in brazilian format

why don't you do focus center when date clicked?

Is your feature request related to a problem? Please describe.
I want to focus center when date clicked and focus initialSelectedDate when entered page.

Show dates in reverse order

This is my code

child: DatePicker(
                DateTime.now().subtract(Duration(days: 5)),
                initialSelectedDate: DateTime.now(),
                selectionColor: Colors.black,
                selectedTextColor: Colors.white,
                daysCount: 6,
                onDateChange: (date) {
                  // New date selected
                }
            )

This code shows me Dates from April 1st to April 6th,
But what I want is to see dates in reverse order,

April 6 must be displayed first and then 5, 4, 3, 2, 1

Make selected date always the middle one

Hi, I'd like to make it so that if you have a timeline with 7 days, selected date is always in the middle (fourth day), and you slide left/right between them.

Passing date to DatePickerTimeline does not work

DateTime _currentSelection = new DateTime.now().add(Duration(days: 2))

DatePickerTimeline(
        _currentSelection,
        dateSize: 20,
        daySize: 10,
        monthSize: 10,
        selectionColor: Colors.grey[200],
        monthColor: Colors.grey[500],
        onDateChange: (date) {
          _selectDate(date);
        },
      )

Selector does not change, it stays on today

Enable previous month

Enable previous month
Can you add a feature to Enable the previous month, that would be a great help?

The solution you'd like
If you can give numberOfPreviousMonths as an option It is very useful to enable previous months too. If you can add a feature to Enable the previous month, that would be a great help?

Bottom Overflowed by 4.0 Pixel on Small Device

I tested your package, I like that design very much. But when I test the package on a small device. It's showing a overflowed error. So I hope you can fix it.

add locale 'pt-br'