Flutter Calendar App Implement using Flutter Calendar Carousel Package
Welcome, all with another Flutter knowledge-sharing tutorial. We are at the beginning of the new year, so we all are interested in new calender applications these days. So I developed a simple calendar application in Flutter using Flutter Calender Carousel Package. There I showed the holidays as well. Here is my knowledge of how to do implementations and how I showed the holidays using the Flutter Datatable package. If you are trying to implement something Flutter Calender Carousel Package, you can do it easily by following the documentation. But here I am showing what the problems are when you are customizing the package and how to solve them.
Create the new Flutter Project
First, you have installed the Flutter SDK with Android Studio or VS code IDEs. I used Android Studio here. Then we can create a new Flutter project as usual.
Add the Dependencies
Here we will use two Flutter packages mainly. Add the into pubspec.yaml as follows.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_calendar_carousel: ^2.4.1Then run the flutter pub get to refresh the project with added dependencies.
Flutter Calendar App Implementation
So now we are ready to code. This is a single-page app. We want to display the calendar first, and then we need to show the holidays. First, I display the calendar carousel using the following snippet.
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.symmetric(horizontal: 16.0),
child: CalendarCarousel<Event>(
onDayPressed: (DateTime date, List<Event> events) {
setState(() => _currentDate = date);
},
weekendTextStyle: const TextStyle(
color: Colors.red,
),
thisMonthDayBorderColor: Colors.grey,
customDayBuilder: (
/// you can provide your own build function to make custom day containers
bool isSelectable,
int index,
bool isSelectedDay,
bool isToday,
bool isPrevMonthDay,
TextStyle textStyle,
bool isNextMonthDay,
bool isThisMonthDay,
DateTime day,
) {
return null;
},
weekFormat: false,
height: 360.0,
todayButtonColor: Colors.black54,
// selectedDateTime: _currentDate,
// markedDateShowIcon: true,
// markedDateIconMaxShown: 1,
daysHaveCircularBorder: false,
),
),
],
),
),
Add Holidays
How can we notify the holidays of the year? There have different types of holidays, such as public, bank, mercantile etc. This is the way I added them.
First, I created Events’ containers and the EventList as follows.
static final Container public_event = Container(
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.blue,
height: 5.0,
width: 5.0,
);
static final bank_event = Container(
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.green,
height: 5.0,
width: 5.0,
);
static final mercantile_event = Container(
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.red,
height: 5.0,
width: 5.0,
);
static final poya_event = Container(
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.yellow,
height: 5.0,
width: 5.0,
);
static final Widget _eventIcon = Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(const Radius.circular(1000)),
border: Border.all(color: Colors.blue, width: 2.0)),
child: const Icon(
Icons.person,
color: Colors.amber,
),
);
final EventList<Event> _markedDateMap = EventList<Event>(
events: {
DateTime(2023, 1, 6): [
Event(
date: DateTime(2023, 1, 6),
title: 'Event 1',
icon: _eventIcon,
dot: poya_event
)
],
DateTime(2023, 1, 15): [
Event(
date: DateTime(2023, 1, 15),
title: 'Event 1',
icon: _eventIcon,
dot: public_event
),
Event(
date: DateTime(2023, 1, 15),
title: 'Event 3',
icon: _eventIcon,
dot: bank_event
),
Event(
date: DateTime(2023, 1, 15),
title: 'Event 3',
icon: _eventIcon,
dot: mercantile_event
)
]
},
);Then you must add the event list in the CalendarCarousel as the markedDatesMap property.
markedDatesMap: _markedDateMap,Then add the chips to represent each holiday event.
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Wrap(
spacing: 8.0,
runSpacing: 4.0,
direction: Axis.horizontal,
children: const <Widget>[
Chip(backgroundColor: Colors.blue, label: Text('Public')),
Chip(backgroundColor: Colors.green, label: Text('Bank')),
Chip(backgroundColor: Colors.red, label: Text('Mercantile')),
Chip(backgroundColor: Colors.yellow, label: Text('Poya'))
],
)
],
),
Holidays Show in The DataTable
Finally, we will add the holidays with the name of the holiday and other details at the end of the page using Flutter Datatables.
DataTable(
columnSpacing: 30.0,
columns: const <DataColumn>[
DataColumn(
label: Expanded(
child: Text(
'Holiday',
style: TextStyle(fontSize: 10),
),
),
),
DataColumn(
label: Expanded(
child: Text(
'Public',
style: TextStyle(fontSize: 10),
),
),
),
DataColumn(
label: Expanded(
child: Text(
'Bank',
style: TextStyle(fontSize: 10),
),
),
),
DataColumn(
label: Expanded(
child: Text(
'Mercantile',
style: TextStyle(fontSize: 10),
),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Jan 6 - Duruthu Full Moon Poya Day')),
DataCell(Icon(Icons.check)),
DataCell(Icon(Icons.check)),
DataCell(Icon(Icons.check)),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Jan 15 - Tamil Thai Pongal Day')),
DataCell(Icon(Icons.check)),
DataCell(Icon(Icons.check)),
DataCell(Icon(Icons.check)),
],
)
]
),In the end, our app looks as follows.
Conclusion
This story teaches you how to build a simple calendar app using Flutter and Flutter Calendar Carousel. Please feel free to ask any questions you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)
