Flutter Calendar Widget - Flexible Event Scheduler

Overview

The Flutter Calendar, or scheduler library, was natively written in Dart and has eight built-in, configurable view modes that provide basic functionalities for scheduling, managing, and representing appointments efficiently. This Flutter Calendar widget exposes a clean and convenient user interface for custom working days and working hours, and basic calendar operations such as date navigation and selection.

Recurring events

Easily configure recurring events on a daily, weekly, monthly, or yearly basis. You can also skip or change an occurrence of a recurring appointment.

• Recurring appointments documentation

Resource view

Display resources as a discrete view integrated with a calendar to display the appointments of each resource in a timeline view and enhance viewability. You can customize the display name, resource panel size, background color, and image.

• Learn more about resource view

• Resource view documentation

Schedule view

Show a list of scheduled appointments grouped by week, between set minimum and maximum dates, with the schedule view. You can customize everything from the date and time formats to the styling of each header.

• Schedule view documentation

Resize and drag-and-drop appointments

Resize and drag-and-drop support have been added for rescheduling appointments in the event calendar.

Calendar details

Returns the calendar details based on the given offset passed through an argument by using the getCalendarDetailsAtOffset method.

Load more

Load appointments on-demand whenever users switch from one view to another or when scrolling to the start or end position of the schedule view.

• Load more documentation

Number of days in view

The number of days in view is used to customize the days count in a calendar. It is also applicable for day, week, workweek, timeline day, timeline week, and timeline workweek views.

• Number of days in view documentation

Appearance customization

Quick view navigation

Navigate among calendar views easily using buttons in the header for date-picker views and also by clicking the month cell and view headers.

• Date navigation documentation

Accessibility

Easily access the Calendar with screen readers.

• Accessibility documentation

Right to left (RTL)

Right-to-left direction support for users working in RTL languages like Hebrew and Arabic.

• RTL documentation

Navigation

Programmatically navigate to the previous and next views by using the calendar controller. Also, enable or disable view navigation using swipe interaction.

Flutter Calendar Code Example

Easily get started with the Flutter Calendar using a few simple lines of DART code example as demonstrated below. Also explore our Flutter Calendar Example that shows you how to render and configure the Calendar in Flutter.

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

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfCalendar(
    view: CalendarView.month,
    dataSource: MeetingDataSource(_getDataSource()),
    monthViewSettings: MonthViewSettings(
        appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
  ));
}

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


class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return appointments![index].from;
  }

  @override
  DateTime getEndTime(int index) {
    return appointments![index].to;
  }

  @override
  String getSubject(int index) {
    return appointments![index].eventName;
  }

  @override
  Color getColor(int index) {
    return appointments![index].background;
  }

  @override
  bool isAllDay(int index) {
    return appointments![index].isAllDay;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}