A flutter calendar #2 package to allow users to scroll through given dates either

scrolling_day_calendar

a flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows. the active date is displayed as a heading and the tasks for that date are displayed underneath. this package can be used on android and ios

how it works

• pass in the widgets method
  you simply need to pass in a start date, an end date, the active date and widgets to display per day.
• setstate method
  you simply need to pass in a start date, an end date, the active date and a call-back function,
  the package will then allow the user to swipe between the dates using pageview,
  on each page change the call-back you have set will be called to allow you to update the page content for the given date.

screenshots

usage

to use the plugin:

• add the dependency to your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  scrolling_day_calendar: 2.0.1

• import the package

import 'package:scrolling_day_calendar/scrolling_day_calendar.dart';

how to use the widget pass-in method – recommended for better experience

datetime selecteddate = datetime.now();
datetime startdate = datetime.now().subtract(duration(days: 10));
datetime enddate = datetime.now().add(duration(days: 10));
map<string, widget> widgets = map();
string widgetkeyformat = "yyyy-mm-dd";

body: scrollingdaycalendar(
          startdate: startdate,
          enddate: enddate,
          selecteddate: selecteddate,
          datestyle: textstyle(
            fontweight: fontweight.bold,
            color: colors.white,
          ),
          displaydateformat: "dd, mmm yyyy",
          datebackgroundcolor: colors.grey,
          forwardicon: icons.arrow_forward,
          backwardicon: icons.arrow_back,
          pagechangeduration: duration(
            milliseconds: 700,
          ),
          widgets: widgets,
          widgetkeyformat: widgetkeyformat,
          noitemswidget: center(
            child: text("no items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),

how to use the setstate method

// set the initial page value
widget _pageitems = text("inital value");
datetime selecteddate = datetime.now();
datetime startdate = datetime.now().subtract(duration(days: 10));
datetime enddate = datetime.now().add(duration(days: 10));
string widgetkeyformat = "yyyy-mm-dd";

// add to body of a scaffold
body: scrollingdaycalendar(
          startdate: startdate,
          enddate: enddate,
          selecteddate: selecteddate,
          ondatechange: (direction, datetime selecteddate) {
            setstate(() {
              pageitems = _widgetbuilder(selecteddate);
            });
          },
          datestyle: textstyle(
            fontweight: fontweight.bold,
            color: colors.white,
          ),
          pageitems: pageitems,
          displaydateformat: "dd/mm/yyyy",
          datebackgroundcolor: colors.grey,
          forwardicon: icons.arrow_forward,
          backwardicon: icons.arrow_back,
          pagechangeduration: duration(
            milliseconds: 400,
          ),
          noitemswidget: center(
            child: text("no items have been added for this date"), // add buttons etc here to add new items for date
          ),
        ),