Widget Calendar Strip Flutter
In this article, we are going to integrate widget calendar strip in flutter applications through example. We already implemented table calendar with events in flutter applications.
In this flutter calendar example, we are using calendar_strip package to implement widget calendar strip in mobile applications. Using this widget, we can indicate or highlight particular date in calendar.
Widget Calendar Strip
import ‘my_calendar_strip.dart’;
class MyCalendarScreen extends StatefulWidget {
@override
_MyCalendarScreenState createState() => _MyCalendarScreenState();
}
class _MyCalendarScreenState extends State<MyCalendarScreen> {
DateTime dateStart = DateTime.now().subtract(Duration(days: 2));
DateTime dateEnd = DateTime.now().add(Duration(days: 2));
DateTime dateSelected = DateTime.now().subtract(Duration(days: 2));
List<DateTime> listMarkedDates = [
DateTime.now().subtract(Duration(days: 1)),
DateTime.now().subtract(Duration(days: 2)),
DateTime.now().add(Duration(days: 4))
];
onSelectDate(data) {
print(“Selected Date -> $data”);
}
widgetMonthName(monthName) {
return Container(
child: Text(monthName,
style:
TextStyle(fontSize: 17, fontWeight: FontWeight.w600, color: Colors.black87, fontStyle: FontStyle.italic)),
padding: EdgeInsets.only(top: 8, bottom: 4),
);
}
widgetMarkedIndicator() {
return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
margin: EdgeInsets.only(left: 1, right: 1),
width: 7,
height: 7,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
),
Container(
width: 7,
height: 7,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)
]);
}
builderDateTile(date, selectedDate, rowIndex, dayName, isDateMarked, isDateOutOfRange) {
bool isSelectedDate = date.compareTo(selectedDate) == 0;
Color fontColor = isDateOutOfRange ? Colors.black26 : Colors.black87;
TextStyle styleNormal = TextStyle(fontSize: 17, fontWeight: FontWeight.w800, color: fontColor);
TextStyle styleSelected = TextStyle(fontSize: 17, fontWeight: FontWeight.w800, color: Colors.black87);
TextStyle styleDayName = TextStyle(fontSize: 14.5, color: fontColor);
List<Widget> listChildren = [
Text(dayName, style: styleDayName),
Text(date.day.toString(), style: !isSelectedDate ? styleNormal : styleSelected),
];
if (isDateMarked == true) {
listChildren.add(widgetMarkedIndicator());
}
return AnimatedContainer(
duration: Duration(milliseconds: 150),
alignment: Alignment.center,
padding: EdgeInsets.only(top: 8, left: 5, right: 5, bottom: 5),
decoration: BoxDecoration(
color: !isSelectedDate ? Colors.transparent : Colors.white70,
borderRadius: BorderRadius.all(Radius.circular(60)),
),
child: Column(
children: listChildren,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Calendar Strip Sample’),),
body: Container(
child: MyCalendarStrip(
dateStart: dateStart,
dateEnd: dateEnd,
onSelectedDate: onSelectDate,
builderDateTile: builderDateTile,
iconColor: Colors.black87,
widgetMonthName: widgetMonthName,
listMarkedDates: listMarkedDates,
containerDecor: BoxDecoration(color: Colors.white),
),
),
);
}
}
Create Date Utils Class
static DateTime toMidnight(DateTime dateTime) {
return DateTime(dateTime.year, dateTime.month, dateTime.day);
}
static bool isWeekend(DateTime date) {
return date.weekday == DateTime.saturday || date.weekday == DateTime.sunday;
}
static bool isToday(DateTime date) {
var now = DateTime.now();
return date.day == now.day &&
date.month == now.month &&
date.year == now.year;
}
static bool isPastDay(DateTime date) {
var today = toMidnight(DateTime.now());
return date.isBefore(today);
}
static DateTime addDaysToDate(DateTime date, int days) {
DateTime newDate = date.add(Duration(days: days));
if (date.hour != newDate.hour) {
var hoursDifference = date.hour – newDate.hour;
if (hoursDifference <= 3 && hoursDifference >= -3) {
newDate = newDate.add(Duration(hours: hoursDifference));
} else if (hoursDifference <= -21) {
newDate = newDate.add(Duration(hours: 24 + hoursDifference));
} else if (hoursDifference >= 21) {
newDate = newDate.add(Duration(hours: hoursDifference – 24));
}
}
return newDate;
}
static bool isSpecialPastDay(DateTime date) {
return isPastDay(date) || (isToday(date) && DateTime.now().hour >= 12);
}
static DateTime getFirstDayOfCurrentMonth() {
var dateTime = DateTime.now();
dateTime = getFirstDayOfMonth(dateTime);
return dateTime;
}
static DateTime getFirstDayOfNextMonth() {
var dateTime = getFirstDayOfCurrentMonth();
dateTime = addDaysToDate(dateTime, 31);
dateTime = getFirstDayOfMonth(dateTime);
return dateTime;
}
static DateTime getLastDayOfCurrentMonth() {
return getLastDayOfMonth(DateTime.now());
}
static DateTime getLastDayOfNextMonth() {
return getLastDayOfMonth(getFirstDayOfNextMonth());
}
static DateTime addMonths(DateTime fromMonth, int months) {
DateTime firstDayOfCurrentMonth = fromMonth;
for (int i = 0; i < months; i++) {
firstDayOfCurrentMonth =
getLastDayOfMonth(firstDayOfCurrentMonth).add(Duration(days: 1));
}
return firstDayOfCurrentMonth;
}
static DateTime getFirstDayOfMonth(DateTime month) {
return DateTime(month.year, month.month);
}
static DateTime getLastDayOfMonth(DateTime month) {
DateTime firstDayOfMonth = DateTime(month.year, month.month);
DateTime nextMonth = firstDayOfMonth.add(Duration(days: 32));
DateTime firstDayOfNextMonth = DateTime(nextMonth.year, nextMonth.month);
return firstDayOfNextMonth.subtract(Duration(days: 1));
}
static bool isSameDay(DateTime date1, DateTime date2) {
return date1.day == date2.day &&
date1.month == date2.month &&
date1.year == date2.year;
}
static bool isCurrentMonth(DateTime date) {
var now = DateTime.now();
return date.month == now.month && date.year == now.year;
}
static int calculateMaxWeeksNumberMonthly(
DateTime startDate, DateTime endDate) {
int monthsNumber = calculateMonthsDifference(startDate, endDate);
List<int> weeksNumbersMonthly = List();
if (monthsNumber == 0) {
return calculateWeeksNumber(startDate, endDate);
} else {
weeksNumbersMonthly
.add(calculateWeeksNumber(startDate, getLastDayOfMonth(startDate)));
DateTime firstDateOfMonth = getFirstDayOfMonth(startDate);
for (int i = 1; i <= monthsNumber – 2; i++) {
firstDateOfMonth = firstDateOfMonth.add(Duration(days: 31));
weeksNumbersMonthly.add(calculateWeeksNumber(
firstDateOfMonth, getLastDayOfMonth(firstDateOfMonth)));
}
weeksNumbersMonthly
.add(calculateWeeksNumber(getFirstDayOfMonth(endDate), endDate));
weeksNumbersMonthly.sort((a, b) => b.compareTo(a));
return weeksNumbersMonthly[0];
}
}
static int calculateMonthsDifference(DateTime startDate, DateTime endDate) {
var yearsDifference = endDate.year – startDate.year;
return 12 * yearsDifference + endDate.month – startDate.month;
}
static int calculateWeeksNumber(
DateTime monthStartDate, DateTime monthEndDate) {
int rowsNumber = 1;
DateTime currentDay = monthStartDate;
while (currentDay.isBefore(monthEndDate)) {
currentDay = currentDay.add(Duration(days: 1));
if (currentDay.weekday == DateTime.monday) {
rowsNumber += 1;
}
}
return rowsNumber;
}
}
Integrate Calendar Strip
import ‘my_calendar_strip.dart’;
class MyCalendarScreen extends StatefulWidget {
@override
_MyCalendarScreenState createState() => _MyCalendarScreenState();
}
class _MyCalendarScreenState extends State<MyCalendarScreen> {
DateTime dateStart = DateTime.now().subtract(Duration(days: 2));
DateTime dateEnd = DateTime.now().add(Duration(days: 2));
DateTime dateSelected = DateTime.now().subtract(Duration(days: 2));
List<DateTime> listMarkedDates = [
DateTime.now().subtract(Duration(days: 1)),
DateTime.now().subtract(Duration(days: 2)),
DateTime.now().add(Duration(days: 4))
];
onSelectDate(data) {
print(“Selected Date -> $data”);
}
widgetMonthName(monthName) {
return Container(
child: Text(monthName,
style:TextStyle(fontSize: 17, fontWeight: FontWeight.w600, color: Colors.black87, fontStyle: FontStyle.italic)),
padding: EdgeInsets.only(top: 8, bottom: 4),
);
}
widgetMarkedIndicator() {
return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
Container(
margin: EdgeInsets.only(left: 1, right: 1),
width: 7,
height: 7,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
),
Container(
width: 7,
height: 7,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
)
]);
}
builderDateTile(date, selectedDate, rowIndex, dayName, isDateMarked, isDateOutOfRange) {
bool isSelectedDate = date.compareTo(selectedDate) == 0;
Color fontColor = isDateOutOfRange ? Colors.black26 : Colors.black87;
TextStyle styleNormal = TextStyle(fontSize: 17, fontWeight: FontWeight.w800, color: fontColor);
TextStyle styleSelected = TextStyle(fontSize: 17, fontWeight: FontWeight.w800, color: Colors.black87);
TextStyle styleDayName = TextStyle(fontSize: 14.5, color: fontColor);
List<Widget> listChildren = [
Text(dayName, style: styleDayName),
Text(date.day.toString(), style: !isSelectedDate ? styleNormal : styleSelected),
];
if (isDateMarked == true) {
listChildren.add(widgetMarkedIndicator());
}
return AnimatedContainer(
duration: Duration(milliseconds: 150),
alignment: Alignment.center,
padding: EdgeInsets.only(top: 8, left: 5, right: 5, bottom: 5),
decoration: BoxDecoration(
color: !isSelectedDate ? Colors.transparent : Colors.white70,
borderRadius: BorderRadius.all(Radius.circular(60)),
),
child: Column(
children: listChildren,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Calendar Strip Sample’),),
body: Container(
child: MyCalendarStrip(
dateStart: dateStart,
dateEnd: dateEnd,
onSelectedDate: onSelectDate,
builderDateTile: builderDateTile,
iconColor: Colors.black87,
widgetMonthName: widgetMonthName,
listMarkedDates: listMarkedDates,
containerDecor: BoxDecoration(color: Colors.white),
),
),
);
}
}
Pingback: Custom Calendar Carousel in Flutter - CodingWithDhrumil
Pingback: Draw Graph in Flutter with Example - CodingWithDhrumil