How can I create a custom calendar in Flutter? - flutter

Question

I want to create a custom calendar, like this:
How can I do this?

Answer 1

You can design your own custom Calendar Widget as follows
import 'package:flutter/material.dart';
class Calendar extends StatefulWidget {
#override
_CalendarState createState() => _CalendarState();
}
class _CalendarState extends State<Calendar> {
DateTime selectedDate = DateTime.now(); // TO tracking date
int currentDateSelectedIndex = 0; //For Horizontal Date
ScrollController scrollController =
ScrollController(); //To Track Scroll of ListView
List<String> listOfMonths = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
List<String> listOfDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
automaticallyImplyLeading: false,
title: Text('My Calendar'),
),
body: Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
child: Text(
selectedDate.day.toString() +
'-' +
listOfMonths[selectedDate.month - 1] +
', ' +
selectedDate.year.toString(),
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.indigo[700]),
)),
SizedBox(height: 10),
//To show Calendar Widget
Container(
height: 80,
child: Container(
child: ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(width: 10);
},
itemCount: 365,
controller: scrollController,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
setState(() {
currentDateSelectedIndex = index;
selectedDate =
DateTime.now().add(Duration(days: index));
});
},
child: Container(
height: 80,
width: 60,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
offset: Offset(3, 3),
blurRadius: 5)
],
color: currentDateSelectedIndex == index
? Colors.black
: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
listOfMonths[DateTime.now()
.add(Duration(days: index))
.month -
1]
.toString(),
style: TextStyle(
fontSize: 16,
color: currentDateSelectedIndex == index
? Colors.white
: Colors.grey),
),
SizedBox(
height: 5,
),
Text(
DateTime.now()
.add(Duration(days: index))
.day
.toString(),
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: currentDateSelectedIndex == index
? Colors.white
: Colors.grey),
),
SizedBox(
height: 5,
),
Text(
listOfDays[DateTime.now()
.add(Duration(days: index))
.weekday -
1]
.toString(),
style: TextStyle(
fontSize: 16,
color: currentDateSelectedIndex == index
? Colors.white
: Colors.grey),
),
],
),
),
);
},
))),
],
),
));
}
}

Answer 2

Flutter Table Calendar
Fully Customisable as per requirement

Answer 3

You can copy paste run full code below
You can reference source code of package https://pub.dev/packages/calendar_timeline or directly use it
code snippet
CalendarTimeline(
initialDate: DateTime(2020, 2, 20),
firstDate: DateTime(2020, 2, 15),
lastDate: DateTime(2021, 11, 20),
onDateSelected: (date) => print(date),
leftMargin: 20,
monthColor: Colors.white70,
dayColor: Colors.teal[200],
//dayNameColor: Color(0xFF333A47),
activeDayColor: Colors.white,
activeBackgroundDayColor: Colors.redAccent[100],
dotsColor: Color(0xFF333A47),
selectableDayPredicate: (date) => date.day != 23,
),
working demo
full code
import 'package:calendar_timeline/calendar_timeline.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF333A47),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16),
child: Text(
'Calendar Timeline',
style: Theme.of(context).textTheme.title.copyWith(color: Colors.tealAccent[100]),
),
),
CalendarTimeline(
initialDate: DateTime(2020, 2, 20),
firstDate: DateTime(2020, 2, 15),
lastDate: DateTime(2021, 11, 20),
onDateSelected: (date) => print(date),
leftMargin: 20,
monthColor: Colors.white70,
dayColor: Colors.teal[200],
//dayNameColor: Color(0xFF333A47),
activeDayColor: Colors.white,
activeBackgroundDayColor: Colors.redAccent[100],
dotsColor: Color(0xFF333A47),
selectableDayPredicate: (date) => date.day != 23,
),
],
),
),
);
}
}