# flutter_calendar_carousel [![Pub Version](https://img.shields.io/pub/v/flutter_calendar_carousel.svg?style=flat-square)](https://pub.dartlang.org/packages/flutter_calendar_carousel) [![Flutter CI](https://github.com/dooboolab/flutter_calendar_carousel/actions/workflows/ci.yml/badge.svg)](https://github.com/dooboolab/flutter_calendar_carousel/actions/workflows/ci.yml) [![Coverage Status](https://codecov.io/gh/dooboolab/flutter_calendar_carousel/branch/master/graph/badge.svg?token=KTrSs3fGsS)](https://codecov.io/gh/dooboolab/flutter_calendar_carousel) ![License](https://img.shields.io/badge/license-MIT-blue.svg) Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable. Now you can even add your icon for each event. ## Notice This widget is compatible with flutter V3 from version `2.4.+`. ## New Feature [2.0.3] - Multiple days selection using `addRange` method [#285](https://github.com/dooboolab/flutter_calendar_carousel/pull/285) - Check out great feature `customDayBuilder` work done by [maxgmer](https://github.com/maxgmer) :tada:. #### Rectangular style ![image](https://raw.githubusercontent.com/dooboolab/flutter_calendar_carousel/master/doc/calendar1.gif) #### Circular style ![image](https://raw.githubusercontent.com/dooboolab/flutter_calendar_carousel/master/doc/calendar2.gif) #### No border ![image](https://raw.githubusercontent.com/dooboolab/flutter_calendar_carousel/master/doc/calendar3.gif) #### Marked Dates ![image](https://raw.githubusercontent.com/dooboolab/flutter_calendar_carousel/master/doc/calendar4.gif) #### Custom Icon Events ![image](https://raw.githubusercontent.com/icemanbsi/flutter_calendar_carousel/master/doc/calendar5.gif) ## Getting Started For help getting started with Flutter, view our online [documentation](https://flutter.io/). ## Props | props | types | defaultValues | | :----------------------------- | :------------------------: | :---------------------------------------------------------------------------------------------------------: | | viewPortFraction | `double` | 1.0 | | prevDaysTextStyle | `TextStyle` | | | daysTextStyle | `TextStyle` | | | nextDaysTextStyle | `TextStyle` | | | prevMonthDayBorderColor | `Color` | Colors.transparent | | thisMonthDayBorderColor | `Color` | Colors.transparent | | nextMonthDayBorderColor | `Color` | Colors.transparent | | dayPadding | `double` | 2.0 | | height | `double` | double.infinity | | width | `double` | double.infinity | | todayTextStyle | `TextStyle` | `fontSize: 14.0, color: Colors.white` | | dayButtonColor | `Color` | Colors.red | | todayBorderColor | `Color` | Colors.red | | todayButtonColor | `Colors` | Colors.red | | selectedDateTime | `DateTime` | | | selectedDayTextStyle | `TextStyle` | `fontSize: 14.0, color: Colors.white` | | selectedDayBorderColor | `Color` | Colors.green | | selectedDayButtonColor | `Color` | Colors.green | | daysHaveCircularBorder | `bool` | | | onDayPressed | `Func` | | | weekdayTextStyle | `TextStyle` | `fontSize: 14.0, color: Colors.deepOrange` | | iconColor | `Color` | Colors.blueAccent | | headerTextStyle | `TextStyle` | `fontSize: 20.0, color: Colors.blue` | | headerText | `Text` | `Text('${DateFormat.yMMM().format(this._dates[1])}'`) | | weekendTextStyle | `TextStyle` | `fontSize: 14.0, color: Colors.pinkAccent` | | markedDatesMap | `Events` | `null` | | markedDateWidget | `Widget` | `Positioned(child: Container(color: Colors.blueAccent, height: 4.0, width: 4.0), bottom: 4.0, left: 18.0);` | | markedDateShowIcon | `bool` | false | | markedDateIconBorderColor | `Color` | | | markedDateIconMaxShown | `int` | 2 | | markedDateIconMargin | `double` | 5.0 | | markedDateIconBuilder | `MarkedDateIconBuilder` | | | markedDateIconOffset | `double` | 5.0 | | markedDateCustomShapeBorder | `ShapeBorder` | null | | markedDateCustomTextStyle | `TextStyle` | null | | markedDateMoreCustomDecoration | `Decoration` | | | markedDateMoreCustomTextStyle | `TextStyle` | | | headerMargin | `EdgetInsets` | `const EdgeInsets.symmetric(vertical: 16.0)` | | headerTitleTouchable | `bool` | `false` | | onHeaderTitlePressed | `Function` | `() => _selectDateFromPicker()` | | showHeader | `bool` | | | showHeaderButton | `bool` | | | childAspectRatio | `double` | `1.0` | | weekDayMargin | `EdgeInsets` | `const EdgeInsets.only(bottom: 4.0)` | | weekFormat | `bool` | `false` | | locale | `String` | `en` | | firstDayOfWeek | `int` | `null` | | onCalendarChanged | `Function(DateTime)` | | | minSelectedDate | `DateTime` | | | maxSelectedDate | `DateTime` | | | inactiveDaysTextStyle | `TextStyle` | | | inactiveWeekendTextStyle | `TextStyle` | | | weekDayFormat | `WeekdayFormat` | `short` | | staticSixWeekFormat | `bool` | `false` | | showOnlyCurrentMonthDate | `bool` | `false` | | dayCrossAxisAlignment | `CrossAxisAlignment` | `CrossAxisAlignment.center` | | dayMainAxisAlignment | `MainAxisAlignment` | `CrossAlignment.center` | | showIconBehindDayText | `bool` | `false` | | pageScrollPhysics | `ScrollPhysics` | `ScrollPhysics` | With `CalendarCarousel` and `EventList` you can specifiy a custom Event class. ## Install Add `flutter_calendar_carousel` as a dependency in pubspec.yaml For help on adding as a dependency, view the [documentation](https://flutter.io/using-packages/). ## Usage ```dart import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart' show CalendarCarousel; Widget widget() { return Container( margin: EdgeInsets.symmetric(horizontal: 16.0), child: CalendarCarousel( onDayPressed: (DateTime date, List events) { this.setState(() => _currentDate = date); }, weekendTextStyle: TextStyle( color: Colors.red, ), thisMonthDayBorderColor: Colors.grey, // weekDays: null, /// for pass null when you do not want to render weekDays // headerText: Container( /// Example for rendering custom header // child: Text('Custom Header'), // ), customDayBuilder: ( /// you can provide your own build function to make custom day containers bool isSelectable, int index, bool isSelectedDay, bool isToday, bool isPrevMonthDay, TextStyle textStyle, bool isNextMonthDay, bool isThisMonthDay, DateTime day, ) { /// If you return null, [CalendarCarousel] will build container for current [day] with default function. /// This way you can build custom containers for specific days only, leaving rest as default. // Example: every 15th of month, we have a flight, we can place an icon in the container like that: if (day.day == 15) { return Center( child: Icon(Icons.local_airport), ); } else { return null; } }, weekFormat: false, markedDatesMap: _markedDateMap, height: 420.0, selectedDateTime: _currentDate, daysHaveCircularBorder: false, /// null for not rendering any border, true for circular border, false for rectangular border ), ); } ``` ### TODO - [x] Render weekdays. - [x] Customizable headerWidget. - [x] Set weekdays visibility. - [x] Customizable textStyles for days in weekend. - [x] Marked Dates. - [x] Multiple Marked Dates. - [x] Customizable weekend days. - [x] Week Calendar. - [x] Carousel Week Calendar. - [ ] Multiple days selections. - [x] Widget test. ## Help Maintenance I've been maintaining quite many repos these days and burning out slowly. If you could help me cheer up, buying me a cup of coffee will make my life really happy and get much energy out of it.
Buy Me A Coffee [![Paypal](https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png)](https://paypal.me/dooboolab)