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

Warning:

One you chose to use a builder, most other styling attributes will be ignored.

CustomDatePickerController

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.