Simple calendar widget with modified ui based on flutter_neat_and_clean_calendar package.
You can use this calendar widget just like any other flutter widget.
dependencies:
calendar_widget:
git:
https://github.com/bhavishassai/calendar_widget.git
flutter pub get
import 'package:calendar_widget/calendar_widget.dart';class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Calendar Widget Demo',
home: CalendarScreen(),
);
}
}
class CalendarScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CalendarScreenState();
}
}
class _CalendarScreenState extends State<CalendarScreen> {
final Map<DateTime, List<NeatCleanCalendarEvent>> _events = {
DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day): [
NeatCleanCalendarEvent('Event A',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 10, 0),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 12, 0),
description: 'A special event',
color: Colors.blue[700]),
],
DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 2):
[
NeatCleanCalendarEvent('Event B',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 10, 0),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 12, 0),
color: Colors.orange),
NeatCleanCalendarEvent('Event C',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.pink),
],
DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 3):
[
NeatCleanCalendarEvent('Event B',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 10, 0),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 12, 0),
color: Colors.orange),
NeatCleanCalendarEvent('Event C',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.pink),
NeatCleanCalendarEvent('Event D',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.amber),
NeatCleanCalendarEvent('Event E',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.deepOrange),
NeatCleanCalendarEvent('Event F',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.green),
NeatCleanCalendarEvent('Event G',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.indigo),
NeatCleanCalendarEvent('Event H',
startTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 14, 30),
endTime: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day + 2, 17, 0),
color: Colors.brown),
],
};
@override
void initState() {
super.initState();
// Force selection of today on first load, so that the list of today's events gets shown.
_handleNewDate(DateTime(
DateTime.now().year, DateTime.now().month, DateTime.now().day));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 8),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
child: Calendar(
// displayMonthTextStyle: TextStyle(),
hideTodayIcon: true,
startOnMonday: true,
weekDays: const ['M', 'T', 'W', 'T', 'Fr', 'Sa', 'Su'],
events: _events,
isExpandable: true,
eventDoneColor: Colors.green,
selectedColor: Colors.pink,
todayColor: Colors.blue,
eventColor: Colors.grey,
locale: 'en_US',
isExpanded: true,
onDateSelected: (DateTime date) {},
dayBuilder: (BuildContext context, DateTime date) {
return Padding(
padding:
const EdgeInsets.symmetric(horizontal: 5.0, vertical: 4),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Utils.isSameDay(date, DateTime.now())
? Colors.purpleAccent
: Colors.black.withAlpha(25),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
date != null ? DateFormat("d").format(date) : '',
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: Utils.isSameDay(date, DateTime.now())
? Colors.purpleAccent
: date.month == DateTime.now().month
? Colors.black
: Colors.grey,
),
),
if (_events.containsKey(
DateTime(date.year, date.month, date.day)))
Container(
width: 17,
height: 17,
decoration: BoxDecoration(
color: Colors.red.withAlpha(50),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.grey.withAlpha(25), width: 0.5),
),
)
else
Container(
width: 17,
height: 17,
decoration: BoxDecoration(
color: Colors.grey.withAlpha(25),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Colors.grey.withAlpha(25),
width: 0.5,
),
),
),
],
),
),
);
},
expandableDateFormat: 'EEEE, dd. MMMM yyyy',
dayOfWeekStyle: const TextStyle(
color: Colors.grey,
// fontWeight: FontWeight.w800,
fontSize: 12,
),
),
),
),
),
);
}
void _handleNewDate(date) {
print('Date selected: $date');
}
}