iamvivekkaushik / datepickertimelineflutter Goto Github PK
View Code? Open in Web Editor NEWFlutter Date Picker Library that provides a calendar as a horizontal timeline
License: Apache License 2.0
Flutter Date Picker Library that provides a calendar as a horizontal timeline
License: Apache License 2.0
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.
Hi There,
I want to make a specific date to be disabled in the middle of enabled dates. How this could be a possibility?
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.
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
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().
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
Smartphone (please complete the following information):
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,
),
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-
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
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?
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
.
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.
how do i change the format language, for example, i'm from brazil, how do i show up the week in brazilian format
horizontal scroll doesn't work in desktop windows with no error
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.
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.
Is it possible to pick type of the time?
for example. type.daily / type.weekly / type.monthly
seems nothing happened since spring, and loads of PR's etc ?
is the maintainer around ? is there more than one commiter ?
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;
});
},
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!!
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;
});
},
),
conflict when using latest intl: ^0.18.0 (https://pub.dev/packages/intl)
please update it with latest verison
Actually I'm trying to set the date programatically by clicking from a button
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
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.
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;
});
},
),
),
),
I can change the font of the unselected date but how to change the font size of the selected date?
Multiple date selection feature should be added in this so that can user can select multiple dates at a time.Thanks
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
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)
/removed
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.
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
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):
Smartphone (please complete the following information):
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.
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.
If the feature does not exist, please I am requesting to add it.
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.
N/A
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,
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.
Is your feature request related to a problem? Please describe.
I want to focus center when date clicked and focus initialSelectedDate when entered page.
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.
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?
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 it possible to implement that we can select the previous days by swiping right?
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.
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
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
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.
can not select dates previous than current date, plus there shall be a min and max limmit like other calendars
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.