syncfusion_flutter_calendar 20.3.48 icon indicating copy to clipboard operation
syncfusion_flutter_calendar: ^20.3.48 copied to clipboard

The Flutter Calendar widget has nine built-in configurable views that provide basic functionalities for scheduling and representing appointments/events efficiently.


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

void main() {
  return runApp(CalendarApp());

/// The app which hosts the home page which contains the calendar on it.
class CalendarApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Calendar Demo', home: MyHomePage());

/// The hove page which hosts the calendar
class MyHomePage extends StatefulWidget {
  /// Creates the home page to display teh calendar widget.
  const MyHomePage({Key? key}) : super(key: key);

  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
        body: SfCalendar(
      view: CalendarView.month,
      dataSource: MeetingDataSource(_getDataSource()),
      // by default the month appointment display mode set as Indicator, we can
      // change the display mode as appointment using the appointment display
      // mode property
      monthViewSettings: const MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),

  List<Meeting> _getDataSource() {
    final List<Meeting> meetings = <Meeting>[];
    final DateTime today =;
    final DateTime startTime = DateTime(today.year, today.month,, 9);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
        'Conference', startTime, endTime, const Color(0xFF0F8644), false));
    return meetings;

/// An object to set the appointment collection data source to calendar, which
/// used to map the custom appointment data to the calendar appointment, and
/// allows to add, remove or reset the appointment collection.
class MeetingDataSource extends CalendarDataSource {
  /// Creates a meeting data source, which used to set the appointment
  /// collection to the calendar
  MeetingDataSource(List<Meeting> source) {
    appointments = source;

  DateTime getStartTime(int index) {
    return _getMeetingData(index).from;

  DateTime getEndTime(int index) {
    return _getMeetingData(index).to;

  String getSubject(int index) {
    return _getMeetingData(index).eventName;

  Color getColor(int index) {
    return _getMeetingData(index).background;

  bool isAllDay(int index) {
    return _getMeetingData(index).isAllDay;

  Meeting _getMeetingData(int index) {
    final dynamic meeting = appointments![index];
    late final Meeting meetingData;
    if (meeting is Meeting) {
      meetingData = meeting;

    return meetingData;

/// Custom business object class which contains properties to hold the detailed
/// information about the event data which will be rendered in calendar.
class Meeting {
  /// Creates a meeting class with required details.
  Meeting(this.eventName, this.from,, this.background, this.isAllDay);

  /// Event name which is equivalent to subject property of [Appointment].
  String eventName;

  /// From which is equivalent to start time property of [Appointment].
  DateTime from;

  /// To which is equivalent to end time property of [Appointment].
  DateTime to;

  /// Background which is equivalent to color property of [Appointment].
  Color background;

  /// IsAllDay which is equivalent to isAllDay property of [Appointment].
  bool isAllDay;
pub points


verified publisher

The Flutter Calendar widget has nine built-in configurable views that provide basic functionalities for scheduling and representing appointments/events efficiently.



API reference


Icon for licenses.unknown (LICENSE)


flutter, intl, syncfusion_flutter_core, syncfusion_flutter_datepicker, timezone


Packages that depend on syncfusion_flutter_calendar