Custom Calendar Carousel in Flutter
In this article, we are going to create custom calendar carousel to display events in flutter application. You can also check out flutter calendar related articles.
We are using flutter_calendar_carousel package to integrate carousel calendar UI in flutter app. People are generally used calendar to see holidays and schedule a reminder for event, meeting etc. We can swap carousel calendar horizontally. In this type of calendar widget, we can also change UI of day event.
We can also set border style of days in calendar with rectangular or circular style. We can also change icon of particular event in calendar using icon property in Event widget. Using dot property in Event widget, we can set width, height and background color of event UI.
We can also restrict calendar for specific years, months or days using minSelectedDate and maxSelectedDate properties. We can also set custom height of calendar carousel widget using height property. We can also customize today button UI. We can also change UI of selected day using selectedDayTextStyle. We can also customize UI of saturday and sunday using weekendTextStyle property.
Add required package in pubspec.yaml file
Add Custom Calendar Events in Array
events: {}
);
@override
void initState() {
listEvents.add(
DateTime(2021, 10, 05),
Event(
title: ‘Event 1’,
dot: Container(
width: 4,
height: 4,
color: Colors.pinkAccent,
),
),
);
listEvents.add(
DateTime(2021, 10, 05),
Event(
title: ‘Event 2’,
));
listEvents.add(
DateTime(2021, 10, 11),
Event(
title: ‘Event 3’,
));
listEvents.add(
DateTime(2021, 10, 16),
Event(
title: ‘Event 4’,
));
listEvents.add(
DateTime(2021, 10, 23),
Event(
title: ‘Event 5’,
));
super.initState();
}
Customize Flutter Calendar Widget
DateTime currentDate = DateTime.now();
DateTime selectedDate = DateTime.now();
String selectedMonth = DateFormat.yMMM().format(DateTime.now());
DateTime targetDateTime = DateTime.now();
myCalendarCarousel = CalendarCarousel<Event>(
height: 425,
selectedDateTime: selectedDate,
targetDateTime: targetDateTime,
minSelectedDate: currentDate.subtract(Duration(days: 360)),
maxSelectedDate: currentDate.add(Duration(days: 360)),
todayBorderColor: Colors.lightGreenAccent,
thisMonthDayBorderColor: Colors.purpleAccent,
daysHaveCircularBorder: true,
markedDateCustomShapeBorder: CircleBorder(side: BorderSide(color: Colors.orangeAccent)),
markedDateCustomTextStyle: TextStyle(
fontSize: 18,
color: Colors.blue,
),
showOnlyCurrentMonthDate: false,
weekendTextStyle: TextStyle(
color: Colors.red,
),
customGridViewPhysics: NeverScrollableScrollPhysics(),
showHeader: false,
weekFormat: false,
markedDatesMap: listEvents,
inactiveDaysTextStyle: TextStyle(
color: Colors.tealAccent,
fontSize: 16,
),
prevDaysTextStyle: TextStyle(
fontSize: 16,
color: Colors.pinkAccent,
),
todayTextStyle: TextStyle(
color: Colors.blue,
),
todayButtonColor: Colors.yellow,
selectedDayTextStyle: TextStyle(
color: Colors.yellow,
),
onDayPressed: (DateTime date, List<Event> events) {
this.setState(() => selectedDate = date);
events.forEach((event) => print(event.title));
},
onCalendarChanged: (DateTime date) {
this.setState(() {
targetDateTime = date;
selectedMonth = DateFormat.yMMM().format(targetDateTime);
});
},
onDayLongPressed: (DateTime date) {},
);
Display Custom Calendar Carousel
appBar: AppBar(title: Text(‘Flutter Calendar Carousel Sample’)),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
horizontal: 16,
vertical: 30,
),
child: Row(
children: <Widget>[
Expanded(
child: Text(
selectedMonth,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
)),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent),
onPressed: () {
setState(() {
targetDateTime = DateTime(
targetDateTime.year, targetDateTime.month – 1);
selectedMonth =
DateFormat.yMMM().format(targetDateTime);
});
},
child: Text(‘PREV’)),
SizedBox(width: 15),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent),
onPressed: () {
setState(() {
targetDateTime = DateTime(
targetDateTime.year, targetDateTime.month + 1);
selectedMonth =
DateFormat.yMMM().format(targetDateTime);
});
},
child: Text(‘NEXT’),
),
],
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 15),
child: myCalendarCarousel,
), //
],
),
));
Pingback: Widget Calendar Strip Flutter - CodingWithDhrumil