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
),
),
196 Dec 29, 2022
68 Dec 29, 2022
9 Mar 12, 2022
0 Oct 25, 2021
0 Nov 9, 2021
214 Jan 7, 2023
182 Dec 1, 2022
559 Dec 26, 2022
36 Dec 22, 2022
20 Jan 18, 2022