Flutter UI #48: Fun with Calendar in Flutter

Tutorial and code of Calendar in Flutter. Copy and paste the below code as per your requirements.

syncfusion_flutter_calendar: ^19.4.56

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

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

class CalendarApp extends StatelessWidget {
  const CalendarApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const MaterialApp(debugShowCheckedModeBanner:false,title: 'Calendar', home: MyHomePage());
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Center(
        child: Text("Calendar"),
        body: SfCalendar(
          view: CalendarView.month,
          dataSource: MeetingDataSource(_getDataSource()),
          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, 0, 0);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
        'Conference', startTime, endTime, const Color(0xFF0F8644), false));
    return meetings;
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;
class Meeting {
  Meeting(this.eventName, this.from,, this.background, this.isAllDay);
  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;

No responses yet

Leave a Reply

Your email address will not be published.