customizable_date_picker
A Customizable_date_picker

Features
- Fully Customizable with Custom Builders.
- Can Attach dynamic Data to each day.
- Default Version, Ready to Use.
Getting started
In the pubspec.yaml
of your flutter project, add the following dependency:
dependencies:
...
customizable_date_picker: "^0.0.3"
In your library add the following import:
import 'package:customizable_date_picker/customizable_date_picker.dart';
For help getting started with Flutter, view the online documentation.
Attributes
CustomDatePicker
attribute | type | description |
---|---|---|
controller | CustomDatePickerController | Widget controller |
activeDayTextStyle | TextStyle | normal day color |
hiddenDayTextStyle | TextStyle | hidden day color |
headerTextStyle | TextStyle | TextStyle of days abbreviations |
selectedDaysColor | Color | color of selected day |
headerBackgroundColor | Color | Color of the Header |
daysOfWeek | List | Days abbreviations |
background | Widget | Background widget,could be anything, Image,Animations,Colors... |
dayItemBuilder | Widget Function(CustomDay day, int index) | day item builder |
monthTitleBuilder | Widget Function(DateTime date) | month Title Item Builder |
Warning:
One you chose to use a builder, most other styling attributes will be ignored.
CustomDatePickerController
attribute | type | description |
---|---|---|
start | DateTime | first month in the calendar |
end | DateTime | last month in the calendar |
generateCustomDay | CustomDay Function(DateTime firstDate, DateTime lastDate) | generate dynamic for each Day |
Simple Use
CustomDatePickerController _controller = new CustomDatePickerController();
@override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Card(
child: CustomDatePicker(
_controller
),
),
),
);
}

You can find the complete example in the Example project.
Using Custom Builder
You can specify how every part of the Widget should be built:
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Card(
child: CustomDatePicker(
_controller,
dayItemBuilder: dayItemBuilder,
monthTitleBuilder: monthTitleBuilder,
headerBackgroundColor: Colors.red,
headerTextStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.w700),
),
),
),
);
}


You can find the complete example in the Example project.
PopUp using AlertDialog
void _showPopUp() {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Date Picker"),
content: Card(
child: CustomDatePicker(
_controller,
dayItemBuilder: dayItemBuilder,
monthTitleBuilder: monthTitleBuilder,
headerBackgroundColor: Colors.black,
headerTextStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.w700),
),
),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text("Okay"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

You can find the complete example in the Example project.
Using dynamic Data
You can use generateCustomDay to initialize CustomDay Objects with dynamic data.
CustomDatePickerController _controller = new CustomDatePickerController(
start: DateTime.now().add(Duration(days: -300)),
end: DateTime.now().add(Duration(days: 300)),
generateCustomDay: generateDay
);
static CustomDay generateDay(DateTime dateTime){
Random random = new Random();
int randomNumber = random.nextInt(200)+70;
int state = random.nextInt(3)*random.nextInt(2)*random.nextInt(2);
return CustomDay(dateTime, {"cost":randomNumber,"state":state});
}
You can also set Data using
controler.setDayData(DateTime date, dynamic data)

You can find the complete example in the Example project.
Changelog
Please see the Changelog page to know what's recently changed.
Contributions
Feel free to contribute to this project.
If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.