Customized Calendar in Flutter
In mobile apps, there are lots of cases where a user needs to enter the date like date of birth, book a ticket, scheduling a meeting, etc.
In this article, we’ll create a custom calendar using the flutter_calendar_carousel package. This calendar widget is swappable horizontally. This widget can help you build your own calendar widget highly customizable. Now you can even add your icon for each event
Table of Contents :
Introduction
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. It fulfills all the custom needs and requirements.
A calendar is a system to organize dates, meetings, etc. It keeps a record of all the events which will happen on particular dates.
Setup
This section explains the steps required to use the calendar and its basic features.
Add dependency
Start by adding the dependency to the pubspec.yml file
dependencies:
flutter_calendar_carousel: ^latest version
import package in the code
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';Code implementation
Create variables for storing current date-time, target-date time, and current month and also make a reference of CalendarCarousel.
DateTime _currentDate = DateTime.now();
DateTime _currentDate2 = DateTime.now();
String _currentMonth = DateFormat.yMMM().format(DateTime.now());
DateTime _targetDateTime = DateTime.now();
CalendarCarousel _calendarCarouselNoHeader;
Now initializing the object of _calendarCarouselNoHeader
Now add the next and previous button and on click of button change calendar date month.
In this snippet, we are using a carousel calendar and we can also customize our calendar.
Code file
import 'package:flutter/material.dart';
import 'package:flutter_calendar_carousel/classes/event.dart';
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';
import 'package:intl/intl.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
DateTime _currentDate = DateTime.now();
DateTime _currentDate2 = DateTime.now();
String _currentMonth = DateFormat.yMMM().format(DateTime.now());
DateTime _targetDateTime = DateTime.now();
CalendarCarousel _calendarCarouselNoHeader;
static Widget _eventIcon = new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(1000)),
border: Border.all(color: Colors.blue, width: 2.0)),
child: new Icon(
Icons.person,
color: Colors.amber,
),
);
EventList<Event> _markedDateMap = new EventList<Event>(
events: {
new DateTime(2020, 2, 10): [
new Event(
date: new DateTime(2020, 2, 14),
title: 'Event 1',
icon: _eventIcon,
dot: Container(
margin: EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.red,
height: 5.0,
width: 5.0,
),
),
new Event(
date: new DateTime(2020, 2, 10),
title: 'Event 2',
icon: _eventIcon,
),
new Event(
date: new DateTime(2020, 2, 15),
title: 'Event 3',
icon: _eventIcon,
),
],
},
);
@override
void initState() {
_markedDateMap.add(
new DateTime(2020, 2, 25),
new Event(
date: new DateTime(2020, 2, 25),
title: 'Event 5',
icon: _eventIcon,
));
_markedDateMap.add(
new DateTime(2020, 2, 10),
new Event(
date: new DateTime(2020, 2, 10),
title: 'Event 4',
icon: _eventIcon,
));
_markedDateMap.addAll(new DateTime(2019, 2, 11), [
new Event(
date: new DateTime(2019, 2, 11),
title: 'Event 1',
icon: _eventIcon,
),
new Event(
date: new DateTime(2019, 2, 11),
title: 'Event 2',
icon: _eventIcon,
),
new Event(
date: new DateTime(2019, 2, 11),
title: 'Event 3',
icon: _eventIcon,
),
]);
super.initState();
}
@override
Widget build(BuildContext context) {
_calendarCarouselNoHeader = CalendarCarousel<Event>(
todayBorderColor: Colors.green,
onDayPressed: (DateTime date, List<Event> events) {
this.setState(() => _currentDate2 = date);
events.forEach((event) => print(event.title));
},
daysHaveCircularBorder: true,
showOnlyCurrentMonthDate: false,
weekendTextStyle: TextStyle(
color: Colors.red,
),
thisMonthDayBorderColor: Colors.grey,
weekFormat: false,
// firstDayOfWeek: 4,
markedDatesMap: _markedDateMap,
height: 420.0,
selectedDateTime: _currentDate2,
targetDateTime: _targetDateTime,
customGridViewPhysics: NeverScrollableScrollPhysics(),
markedDateCustomShapeBorder:
CircleBorder(side: BorderSide(color: Colors.yellow)),
markedDateCustomTextStyle: TextStyle(
fontSize: 18,
color: Colors.blue,
),
showHeader: false,
todayTextStyle: TextStyle(
color: Colors.blue,
),
todayButtonColor: Colors.yellow,
selectedDayTextStyle: TextStyle(
color: Colors.yellow,
),
minSelectedDate: _currentDate.subtract(Duration(days: 360)),
maxSelectedDate: _currentDate.add(Duration(days: 360)),
prevDaysTextStyle: TextStyle(
fontSize: 16,
color: Colors.pinkAccent,
),
inactiveDaysTextStyle: TextStyle(
color: Colors.tealAccent,
fontSize: 16,
),
onCalendarChanged: (DateTime date) {
this.setState(() {
_targetDateTime = date;
_currentMonth = DateFormat.yMMM().format(_targetDateTime);
});
},
onDayLongPressed: (DateTime date) {
print('long pressed date $date');
},
);
return new Scaffold(
appBar: new AppBar(
title: new Text('Calendar'),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
//custom icon
Container(
margin: EdgeInsets.only(
top: 30.0,
bottom: 16.0,
left: 16.0,
right: 16.0,
),
child: new Row(
children: <Widget>[
Expanded(
child: Text(
_currentMonth,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
)),
FlatButton(
child: Text('PREV'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month - 1);
_currentMonth =
DateFormat.yMMM().format(_targetDateTime);
});
},
),
FlatButton(
child: Text('NEXT'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month + 1);
_currentMonth =
DateFormat.yMMM().format(_targetDateTime);
});
},
)
],
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16.0),
child: _calendarCarouselNoHeader,
), //
],
),
));
}
}
Output
Conclusion
In this article, I have explained the custom calendar package demo which you can modify and experiment with according to your own. This little introduction was about making a custom calendar.
I hope this blog will provide you with sufficient information in trying up to use the custom calendar in your flutter projects. We will show this demo program for working custom calendars in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
