Flutter Calendar Implementation Tutorial

Flutter Calendar :

Flutter tutorial on calendar let you code a calendar where you can mark events make user select a date and do actions according to the date.

Some apps will store information based on the date so it is used to select a date and set data to that particular date and can be accessible there after by clicking on the date.

Calendar is also used in the apps where online service booking based on availability i..e, movie tickets, bus tickets, rail tickets and more.

The best example is personal dairy app where user will note some information he does daily in his life and also money planning apps where you will store the daily transactions so that it is easier for you to calculate in future you expenditures versus income at a particular period of time.

Flutter Calendar Video Tutorial :

Go through the below tutorial for more details on implementation.

Project Structure :

This image depicts the implementation of the flutter calendar

pubspec.yaml :

Add a dependency flutter_calendar_carousel and update the version accordingly

dependencies:
  flutter:
    sdk: flutter
  flutter_calendar_carousel: 1.4.12

main.dart :

Initialize the app with void main() we are considering a default class MyApp

void main() => runApp(new MyApp());

Return a Material App declaring a MyHomePage class and also we have specified the theme data

MaterialApp(
  title: 'flutter calendar',
  theme: new ThemeData(

    primarySwatch: Colors.purple,
  ),
  home: new MyHomePage(title: 'Calendar'),
);

declare the variables

DateTime _currentDate = DateTime(2020, 8, 3);
DateTime _currentDate2 = DateTime(2020, 8, 4);
String _currentMonth = DateFormat.yMMM().format(DateTime(2020, 8, 3));
DateTime _targetDateTime = DateTime(2020, 8, 3);

Specify the event icon and specify the design by providing the color, radius border which needs to be displayed on calendar

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,
  ),
);

Whenever the date is marked then we can color the particular date using a green color.

EventList<Event> _markedDateMap = new EventList<Event>(
  events: {
    new DateTime(2020, 8, 5): [
      new Event(
        date: new DateTime(2020, 8, 5),
        title: 'Event 1',
        icon: _eventIcon,
        dot: Container(
          margin: EdgeInsets.symmetric(horizontal: 1.0),
          color: Colors.green,
          height: 5.0,
          width: 5.0,
        ),
      ),
      new Event(
        date: new DateTime(2020, 8, 5),
        title: 'Event 2',
        icon: _eventIcon,
      ),
    ],
  },
);

On initialization specify the dates according to the current day

@override
void initState() {
  
  _markedDateMap.addAll(new DateTime(2020, 8, 13), [
    new Event(
      date: new DateTime(2020, 8, 13),
      title: 'Event 1',
      icon: _eventIcon,
    ),
    new Event(
      date: new DateTime(2020, 8, 13),
      title: 'Event 2',
      icon: _eventIcon,
    ),
    new Event(
      date: new DateTime(2020, 8, 13),
      title: 'Event 3',
      icon: _eventIcon,
    ),
    new Event(
      date: new DateTime(2020, 8, 13),
      title: 'Event 3',
      icon: _eventIcon,
    ),
  ]);
  super.initState();
}

Declare a SingleChildScrollView to make the calendar scrollable

SingleChildScrollView(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
   
    ],
  ),
));

Previous and Next buttons to move forward and backward based on the current date, month.

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);
    });
  },
)

Specify the flutter calendar in a Container and providing the margin and specify the calendar with noheader.

Container(
  margin: EdgeInsets.symmetric(horizontal: 16.0),
  child: _calendarCarouselNoHeader,
),

FullCode :

Providing the full code for flutter calendar implementation.

import 'package:flutter/material.dart';

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart'
    show CalendarCarousel;
import 'package:flutter_calendar_carousel/classes/event.dart';
import 'package:flutter_calendar_carousel/classes/event_list.dart';
import 'package:intl/intl.dart' show DateFormat;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'flutter calendar',
      theme: new ThemeData(

        primarySwatch: Colors.purple,
      ),
      home: new MyHomePage(title: 'Calendar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _currentDate = DateTime(2020, 8, 3);
  DateTime _currentDate2 = DateTime(2020, 8, 4);
  String _currentMonth = DateFormat.yMMM().format(DateTime(2020, 8, 3));
  DateTime _targetDateTime = DateTime(2020, 8, 3);

  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, 8, 5): [
        new Event(
          date: new DateTime(2020, 8, 5),
          title: 'Event 1',
          icon: _eventIcon,
          dot: Container(
            margin: EdgeInsets.symmetric(horizontal: 1.0),
            color: Colors.green,
            height: 5.0,
            width: 5.0,
          ),
        ),
        new Event(
          date: new DateTime(2020, 8, 5),
          title: 'Event 2',
          icon: _eventIcon,
        ),
      ],
    },
  );

  CalendarCarousel _calendarCarousel, _calendarCarouselNoHeader;

  @override
  void initState() {

    _markedDateMap.addAll(new DateTime(2020, 8, 13), [
      new Event(
        date: new DateTime(2020, 8, 13),
        title: 'Event 1',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2020, 8, 13),
        title: 'Event 2',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2020, 8, 13),
        title: 'Event 3',
        icon: _eventIcon,
      ),
      new Event(
        date: new DateTime(2020, 8, 13),
        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: true,
      weekendTextStyle: TextStyle(
        color: Colors.black,
      ),
      thisMonthDayBorderColor: Colors.grey,
      weekFormat: false,
//      firstDayOfWeek: 4,
      markedDatesMap: _markedDateMap,
      height: 420.0,
      selectedDateTime: _currentDate2,
      targetDateTime: _targetDateTime,
      customGridViewPhysics: NeverScrollableScrollPhysics(),

      minSelectedDate: _currentDate.subtract(Duration(days: 360)),
      maxSelectedDate: _currentDate.add(Duration(days: 360)),

      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(widget.title),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              //custom icon
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16.0),
                child: _calendarCarousel,
              ), // This trailing comma makes auto-formatting nicer for build methods.
              //custom icon without header
              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 :

This screen depicts the usage of the flutter calendar implementation