Swipeable Horizontally Calendar

flutter calendar carousel

calendar widget for flutter that is swipeable horizontally. this widget can help you build your own widget highly customizable.

getting started

for help getting started with flutter, view our online documentation.

props

props	types	defaultvalues
weekdays		[‘sun’, ‘mon’, ‘tue’, ‘wed’, ‘thur’, ‘fri’, ‘sat’]
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
headertext	text	text('${dateformat.ymmm().format(this._dates[1])}')
weekendtextstyle	textstyle	fontsize: 14.0, color: colors.pinkaccent
markeddates	list<datetime	[]
markeddatecolor	color	colors.blueaccent
markeddatewidget	color	positioned(child: container(color: colors.blueaccent, height: 4.0, width: 4.0), bottom: 4.0, left: 18.0);
headermargin	edgetinsets	const edgeinsets.symmetric(vertical: 16.0)
childaspectratio	double	1.0
weekdaymargin	edgeinsets	const edgeinsets.only(bottom: 4.0)

install

add flutter_calendar_carousel as a dependency in pubspec.yaml
for help on adding as a dependency, view the documentation.

usage

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart' show calendarcarousel;
widget widget() {
  return container(
    margin: edgeinsets.symmetric(horizontal: 16.0),
    child: calendarcarousel(
      current: datetime.now(),
      ondaypressed: (datetime date) {
        this.setstate(() => _currentdate = date);
      },
      thismonthdaybordercolor: colors.grey,
      height: 420.0,
      selecteddatetime: _currentdate,
      dayshavecircularborder: false, /// null for not rendering any border, true for circular border, false for rectangular border
//          weekendstyle: textstyle(
//            color: colors.red,
//          ),
//          weekdays: null, /// for pass null when you do not want to render weekdays
//          headertext: container( /// example for rendering custom header
//            child: text('custom header'),
//          ),
    ),
  );
}

todo

• [x] render weekdays.
• [x] customizable headerwidget.
• [x] set weekdays visibility.
• [x] customizable textstyles for days in weekend.
• [x] marked dates.
• [ ] multiple days selections.
• [ ] widget test.

121

download the full project for this post from the following button

this source is fully free for all time

download as zip