syncfusion_flutter_calendar 18.2.44

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

syncfusion_flutter_calendar_banner

Syncfusion Flutter Calendar #

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

Disclaimer: This is a commercial package. To use this package, you need to have either a Syncfusion commercial license or the Syncfusion Community LICENSE. For more details, please check the LICENSE file.

Note: Our packages are now compatible with Flutter for Web. However, this will be in Beta until Flutter for Web becomes stable.

Table of contents #

Calendar features #

  • Multiple calendar views - A wide range of built-in view modes are available: day, week, workweek, month, schedule, timeline day, timeline week, timeline workweek. The control allows you to conveniently customize every view with unique, view-specific options.

multiple_calenda_views

  • Appointments - Appointments contain information on events scheduled at specific times. In addition to default appointments, users can use their own collections to connect a business entity to an appointment by mapping their fields, such as start time, end time, subject, notes, and recurrence.

appointments

  • Recurring appointments - Easily configure recurring events to be repeated on a daily, weekly, monthly, or yearly basis with optimized recurrence options. You can also skip or change the occurrence of a recurring appointment.

recurring_events

  • Time zone - Regardless of the time zone in your device, Calendar supports setting any required time zone for the control itself, as well as individual events.

time_zone

  • 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

  • Special time regions - Disable interactions and selections for specific time ranges. This is useful when you want to block user interaction during holidays or another special events and to highlight those time slots.

special_time_regions

  • Flexible working days - Customize the work days in a workweek so that the remaining days will be hidden from view.

flexible_working_days

  • First day of the week - Customize the first day of the week as needed. The default is Sunday.

first_day_of_the_week

  • Custom start and end hours - Display the event calendar timeslot views with specific time durations by hiding the unwanted hours.

  • Month agenda view - Display appointments in a list as shown in the following month view by clicking on a day.

month_agenda_view

  • Appearance customization or Theming - Provide a uniform and consistent look to the Calendar’s appearance and format. Theming support to provide a consistent look to the calendar.

appearance_customization

  • Localization and Gloablization - Display the current date and time by following the globalized date and time formats, and localize all available static texts in calendar..

localization

  • Accessibility - The Calendar can easily be accessed by screen readers.

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

right_to_left

  • Programmatic navigation - Programmatic navigation to the previous/next views by using the calendar controller.

  • Minimum and maximum dates - Restrict the date navigation for end users by using the minimum and maximum dates.

min_max_dates

  • Web layout - Web layout improved for better experience, and now the mouse hovering effect has been applied to all the calendar elements.

Coming soon #

  • Blackout dates
  • Resource
  • Drag and drop
  • Remainder

Get the demo application #

Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.

Take a look at the following to learn more about the Syncfusion Flutter Calendar.

Installation #

Install the latest version from pub.

Getting started #

Import the following package.

import 'package:syncfusion_flutter_calendar/calendar.dart';

Add Calendar to the widget tree #

Add the Calendar widget as a child of any widget. Here, the calendar widget is added as a child of the scaffold widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Container(
    child: SfCalendar(),
  ));
}

Change different calendar views #

The SfCalendar widget provides seven different types of views to display dates. It can be assigned to the widget constructor by using view property. By default, the widget is assigned day View. The current date will be displayed initially for all the Calendar views.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.month,
  ));
}

Add flexible working days and working hours #

The default values for startHour and endHour are 0 and 24 to show all the time slots in time slot views. You can to set the startHour and endHour properties of timeSlotViewSettings to show only the required time duration for end users. You can set startHour and endHour in time duration to show the required time duration in minutes. You can also customize the nonworking days of a week by using the nonWorkingDays property of timeSlotViewSettings to show only the required days for the end users.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.workWeek,
    timeSlotViewSettings: TimeSlotViewSettings(
        startHour: 9,
        endHour: 16,
        nonWorkingDays: <int>[DateTime.friday, DateTime.saturday]),
  ));
}

Change first day of week #

The Calendar widget will be rendered with Sunday as the first day of the week, but you can customize it to any day by using the firstDayOfWeek property.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.week,
    firstDayOfWeek: 1,
  ));
}

Add month agenda view #

The Calendar month view displays a divided agenda view that is used to show the selected date’s appointments below the month. You can show the agenda view by setting showAgenda property to true in monthViewSettings.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.month,
    monthViewSettings: MonthViewSettings(showAgenda: true),
  ));
}

Add data source #

The Calendar widget has a built-in capability to handle appointment arrangement internally based on the appointment collections. You need to assign the created collection to the dataSource property. You can also map custom appointment data to our calendar.

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

  List<Meeting> _getDataSource() {
    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;
}

Support and Feedback #

  • For any other queries, reach our Syncfusion support team or post the queries through the Community forums and submit a feature request or a bug through our Feedback portal.
  • To renew the subscription, click renew or contact our sales team at salessupport@syncfusion.com | Toll Free: 1-888-9 DOTNET.

About Syncfusion #

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1,000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Blazor, mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (WinForms, WPF, and UWP). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[18.2.44] - 07/07/2020 #

Features

  • The long press callback support
  • Schedule view support
  • Special time regions support
  • Navigation arrow support
  • Mouse hovering for all calendar elements [web]

[18.1.59-beta] - 06/23/2020 #

No changes.

[18.1.56-beta] - 06/10/2020 #

No changes.

[18.1.55-beta] - 06/03/2020 #

Bug fixes

  • Now, the month cell dates are aligned properly with the Flutter latest beta channel.

[18.1.54-beta] - 05/26/2020 #

No changes.

[18.1.53-beta] - 05/19/2020 #

Bug fixes

  • Now, the recurrence properties show the correct interval value in the parseRRule() of SfCalendar.

[18.1.52-beta] - 05/14/2020 #

Bug fixes

  • Now, the visible dates do not show the repeated dates when the local time zone has daylight saving in SfCalendar.

[18.1.48-beta] - 05/05/2020 #

No changes.

[18.1.46-beta] - 04/28/2020 #

Bug fixes

  • The error No file or variants found for assert:packages/timezone/data/2019c.tzf now cleared.

[18.1.45-beta] - 04/21/2020 #

No changes.

[18.1.44-beta] - 04/14/2020 #

Bug fixes

  • The parseRRule now works without the count value in SfCalendar.

[18.1.43-beta] - 04/07/2020 #

No changes.

[18.1.42-beta] - 04/01/2020 #

No changes.

[18.1.36-beta] - 03/19/2020 #

Features

  • Right-to-left direction support.
  • Localization support.
  • Accessibility support.
  • Calendar web support.
  • Minimum and maximum date support.
  • Theme support.
  • Calendar controller for programmatic date selection and date navigation.

[17.4.51-beta] - 02/25/2020 #

No changes.

[17.4.50-beta] - 02/19/2020 #

No changes.

[17.4.46-beta] - 01/30/2020 #

Features

  • Provided the all-day appointment expander support in day/week/work week views.
  • Provided the appointments property setter in CalendarDataSource.

[17.4.43-beta] - 01/14/2020 #

No changes.

[17.4.40-beta] - 12/18/2019 #

Breaking changes

  • Renamed the dataSource property as appointments in CalendarDataSource abstract class.
  • The appointmentMapper implementation replaced by override methods for custom appointments.
  • The timeZone package updated to latest version and its database updated.
  • The enum properties in CalendarDataSourceAction renamed as add, remove and reset instead of Add, Remove and Reset.

[17.4.39-beta] - 12/17/2019 #

Initial release.

Features

  • Day, week, workweek, timeline day, timeline week, timeline workweek, and month. Seven built-in calendar views.
  • Appointment scheduling. Default and custom appointments supported.
  • Recursive appointments with daily, weekly, monthly, and yearly recurrence types.
  • Time zones support for events and calendar.
  • Different nonworking days.
  • Different first day of week for all applicable views.
  • Flexible start and end hours for time slot views.
  • Agenda view support in calendar month view.
  • Additional features like customizable calendar appearance and format.

example/lib/main.dart

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

void main() {
  // Register your license here
  SyncfusionLicense.registerLicense('ADD YOUR LICENCE KEY HERE');
  return runApp(CalendarApp());
}

class CalendarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Calendar Demo', home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  // ignore: prefer_const_constructors_in_immutables
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  List<Meeting> meetings;

  @override
  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: MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
    ));
  }

  List<Meeting> _getDataSource() {
    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;
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  syncfusion_flutter_calendar: ^18.2.44

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:syncfusion_flutter_calendar/calendar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
92
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform windows

Because:

  • package:syncfusion_flutter_calendar/calendar.dart that imports:
  • package:syncfusion_flutter_core/core.dart that imports:
  • package:url_launcher/url_launcher.dart that declares support for platforms: android, ios, linux, macos, web

Package not compatible with SDK dart

Because:

  • syncfusion_flutter_calendar that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
intl >=0.15.0 <0.17.0 0.16.1
syncfusion_flutter_core ^18.2.44 18.2.44
timezone 0.5.7 0.5.7
Transitive dependencies
collection 1.14.12 1.14.13
flutter_web_plugins 0.0.0
meta 1.1.8 1.2.2
path 1.7.0
platform_detect 1.4.0
plugin_platform_interface 1.0.2
pub_semver 1.4.4
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
url_launcher 5.5.0
url_launcher_linux 0.0.1+1
url_launcher_macos 0.0.1+7
url_launcher_platform_interface 1.0.7
url_launcher_web 0.1.2
utf 0.9.0+5
vector_math 2.0.8 2.1.0-nullsafety