Flutter Calendar widget syncfusion_flutter_calendar

Step : 1 First, we'll need to add the Syncfusion Flutter Calendar dependency to our pubspec.yaml file:

dependencies:
  syncfusion_flutter_calendar: ^19.3.46

Step : 2 Next, we'll import the necessary packages in our Dart code:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart'
​​

Step : 3 Now, let's create a basic calendar widget that displays the current month:

class MyCalendar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Calendar'),
      ),
      body: SfCalendar(
        view: CalendarView.month,
      ),
    );
  }
}
 

Step : 4 In this code, we're using the Scaffold widget to create a basic layout with an AppBar and a body. Within the body, we're using the SfCalendar widget to display the calendar.

The view property of the SfCalendar widget specifies which view to display. In this case, we're using the CalendarView.month view to display the current month.

Now, let's add some events to our calendar:

class MyEvent {
  final String eventName;
  final DateTime from;
  final DateTime to;

  MyEvent(this.eventName, this.from, this.to);
}

class MyCalendar extends StatelessWidget {
  final List<MyEvent> _events = [
    MyEvent('Meeting', DateTime.now().add(Duration(hours: 2)), DateTime.now().add(Duration(hours: 3))),
    MyEvent('Lunch', DateTime.now().add(Duration(hours: 4)), DateTime.now().add(Duration(hours: 5))),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Calendar'),
      ),
      body: SfCalendar(
        view: CalendarView.month,
        dataSource: _getCalendarDataSource(),
      ),
    );
  }

  _DataSource _getCalendarDataSource() {
    List<Appointment> appointments = [];

    _events.forEach((event) {
      appointments.add(Appointment(
        startTime: event.from,
        endTime: event.to,
        subject: event.eventName,
      ));
    });

    return _DataSource(appointments);
  }
}

class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source) {
    appointments = source;
  }
}
 

In this code, we've defined a MyEvent class to represent our events. We've also added two events to the _events list.

We've then added a _getCalendarDataSource method that creates a List<Appointment> from our _events list. We're using the _DataSource class to create a CalendarDataSource object that we can pass to the dataSource property of the SfCalendar widget.

Finally, we've updated the SfCalendar widget to use our _getCalendarDataSource method as the data source.

With these changes, our calendar now displays the two events we've added