The table_calendar provides many features, which are given below:<\/p>\n\n\n\n
- It is easy to use API.<\/li>
- It provides Custom Builders for UI control.<\/li>
- It has vertical auto-sizing.<\/li>
- It provides beautiful animations.<\/li>
- It provides gesture handling.<\/li>
- It provides multiple calendar formats such as a month, weak, year, etc.<\/li>
- We can also use multiple days of the week formats.<\/li><\/ul>\n\n\n\n
Let see step by step to create and display the calendar.<\/p>\n\n\n\n
Step 1:<\/strong>\u00a0Create a new Flutter project in the\u00a0IDE\u00a0you are using and give its title as Flutter Calendar Example.<\/p>\n\n\n\n
Step 2:<\/strong> Open the project, navigate to the lib folder, and open the pubspec.yaml<\/strong> file. In this file, we need to add the table_calendar dependency as below:<\/a><\/a><\/a><\/p>\n\n\n\n
- dependencies: <\/li>
- flutter: <\/li>
- sdk: flutter <\/li>
- table_calendar: ^2.1.0 <\/li><\/ol>\n\n\n\n
Step 3:<\/strong> After adding the above dependency, we need to run the below command to get the required packages:<\/a><\/a><\/a><\/p>\n\n\n\n
- $ flutter pub get <\/li><\/ol>\n\n\n\n
Step 4:<\/strong> Next, import the dependency in the dart file as below:<\/a><\/a><\/a><\/p>\n\n\n\n
- import<\/strong> ‘package:syncfusion_flutter_calendar\/calendar.dart’; <\/li><\/ol>\n\n\n\n
Step 5:<\/strong>\u00a0After this, we need a calendar controller and initialize the calendar as\u00a0CalendarController<\/strong>.<\/p>\n\n\n\n
<\/a><\/a><\/a><\/p>\n\n\n\n
CalendarController _controller; \n \n@override \nvoid initState() { \n super.initState(); \n _controller = CalendarController(); \n} <\/code><\/pre>\n\n\n\nStep 6:<\/strong>\u00a0Next, we have to add the\u00a0calendar widget<\/strong>\u00a0as a child of any\u00a0widget. Here, we are going to add the calendar widget as a child of the scaffold widget.<\/a><\/a><\/a><\/p>\n\n\n\n
\u00a0<\/span><\/p>\n\n\n\n
@override \nWidget build(BuildContext context) { \n return Scaffold( \n body: SingleChildScrollView( \n child: Column( \n children: <Widget>[ \n TableCalendar() \n ], \n ), \n ), \n ); <\/code><\/pre>\n\n\n\nStep 7:<\/strong> Now, we can write our logic and add styling to display the calendar.<\/p>\n\n\n\n
Example<\/h3>\n\n\n\n
Below is the complete code to display the calendar in the app.<\/a><\/a><\/a><\/p>\n\n\n\n
import 'package:flutter\/material.dart'; \nimport 'package:table_calendar\/table_calendar.dart'; \n \nvoid main() => runApp(MyApp()); \n \nclass MyApp extends StatelessWidget { \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n theme: ThemeData( \n primarySwatch: Colors.green, \n ), \n home: HomeCalendarPage(), \n ); \n } \n} \n \nclass HomeCalendarPage extends StatefulWidget { \n @override \n _HomeCalendarPageState createState() => _HomeCalendarPageState(); \n} \n \nclass _HomeCalendarPageState extends State<HomeCalendarPage> { \n CalendarController _controller; \n \n @override \n void initState() { \n super.initState(); \n _controller = CalendarController(); \n } \n \n @override \n Widget build(BuildContext context) { \n return Scaffold( \n appBar: AppBar( \n title: Text('Flutter Calendar Example'), \n ), \n body: SingleChildScrollView( \n child: Column( \n crossAxisAlignment: CrossAxisAlignment.start, \n children: <Widget>[ \n TableCalendar( \n initialCalendarFormat: CalendarFormat.month, \n calendarStyle: CalendarStyle( \n todayColor: Colors.blue, \n selectedColor: Theme.of(context).primaryColor, \n todayStyle: TextStyle( \n fontWeight: FontWeight.bold, \n fontSize: 22.0, \n color: Colors.white) \n ), \n headerStyle: HeaderStyle( \n centerHeaderTitle: true, \n formatButtonDecoration: BoxDecoration( \n color: Colors.brown, \n borderRadius: BorderRadius.circular(22.0), \n ), \n formatButtonTextStyle: TextStyle(color: Colors.white), \n formatButtonShowsNext: false, \n ), \n startingDayOfWeek: StartingDayOfWeek.monday, \n onDaySelected: (date, events) { \n print(date.toUtc()); \n }, \n builders: CalendarBuilders( \n selectedDayBuilder: (context, date, events) => Container( \n margin: const EdgeInsets.all(5.0), \n alignment: Alignment.center, \n decoration: BoxDecoration( \n color: Theme.of(context).primaryColor, \n borderRadius: BorderRadius.circular(8.0)), \n child: Text( \n date.day.toString(), \n style: TextStyle(color: Colors.white), \n )), \n todayDayBuilder: (context, date, events) => Container( \n margin: const EdgeInsets.all(5.0), \n alignment: Alignment.center, \n decoration: BoxDecoration( \n color: Colors.blue, \n borderRadius: BorderRadius.circular(8.0)), \n child: Text( \n date.day.toString(), \n style: TextStyle(color: Colors.white), \n )), \n ), \n calendarController: _controller, \n ) \n ], \n ), \n ), \n ); \n } \n}<\/code><\/pre>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\n
When we run the app in the device or emulator, we should see the UI similar to the below screenshot. Here, we can see the previous and next arrow icon to display the month. The week starts from Monday, and date 14 is my current date.<\/p>\n\n\n\n
![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-calendar.png\")
<\/figure>\n\n\n\nIf we select another date, we can see that the current date and selected date are in a different color. See the below image.<\/p>\n\n\n\n
![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-calendar2.png\")
<\/figure>\n\n\n\nWe can also display the week of the month, as shown in this image.<\/p>\n\n\n\n
![\"Flutter](\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-calendar3.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"A calendar is a system used to organize the days, weeks, or months for commercial, religious, social, or administrative purposes. It keeps a record about which events fall on a particular date and when the special events will happen. In this section, we are going to explain how to display and use the calendar widget […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[585],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2128"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2128"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2128\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- import<\/strong> ‘package:syncfusion_flutter_calendar\/calendar.dart’; <\/li><\/ol>\n\n\n\n
- $ flutter pub get <\/li><\/ol>\n\n\n\n