The flutter_calendar_widget is highly customizable calendar widget.

Overview

flutter_calendar_widget

GitHub Pub Version

logo

The flutter_calendar_widget is highly customizable calendar widget.

Not only can you change the style, but you can also change the widget in the calendar, so you can customize it freely if you want.

Features

  • Supports multiple date selections such as single, range, multiple, etc
  • Can register events in the calendar
  • Advanced customizable; all widgets in the calendar can be changed.
  • Multilingual translation support.
  • Calendar size changes dynamically depending on content.
  • Can add calendar navigation header.
  • Can change the icon in the navigation header.
  • Calendar style can be changed.
  • All text in the calendar can be changed.

Installation

flutter pub add flutter_calendar_widget

Usage

Make sure to check out examples and API docs for more details.

Selection Mode

Depending on the selection mode, you can specify the following three selection methods.

1. CalendarSelectionMode.single for selecting one date.

Allows to select a single date, selecting a new date will remove the selection for previous date and updates selection to the new selected date.

Preview

single_demo

Example

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    onDayPressed: (DateTime date) {
        print(date);
    }
)

2. CalendarSelectionMode.multiple for selection of multiple dates.

Allows multiple date selection, selecting a new date will not remove the selection for previous dates, allows to select as many dates as possible.

Preview

multiple_demo

Example

FlutterCalendar(
    selectionMode: CalendarSelectionMode.multiple,
    onMultipleDates: (List<DateTime> dates) {
        for (var date in dates) {
            print(date);
        }
    },
)

3. CalendarSelectionMode.range Allows to select a single range of dates.

Preview

range_demo

Example

FlutterCalendar(
    selectionMode: CalendarSelectionMode.range,
    onRageDate: (CalendarDateRange dateRange) {
        print(
            'start: ${dateRange.start}, end: ${dateRange.end}',
        );
    },
)

How to change style

There are two main ways to style that calendar widget.

1. To change the style of text.

You can change the text style by injecting a CalendarTextStyle instance.

Example

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    textStyle: const CalendarTextStyle(
        dayFontSize: 16,
        dayTextColor: Colors.blue,
    ),
)

2. To change the style except for text.

Styles other than text styles can be changed by injecting an instance of CalendarStyle.

Example

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    style: const CalendarStyle(
        markerColor: Colors.green,
    ),
)

How to change widgets

All widgets in the calendar can be changed. All widgets are built in the inheritance of the CalendarBuilder abstract class, and you can make changes to the required widgets via method override.

Preview

custom_demo

Example

import 'package:flutter/material.dart';
import 'package:flutter_calendar_widget/flutter_calendar_widget.dart';

class CustomCalenderBuilder extends CalendarBuilder {
  @override
  Widget buildRangeDay(DateTime dateTime) {
    return Container();
  }

  @override
  Widget buildRangeDayLine(BoxConstraints constraints) {
    return SizedBox(
      child: Container(
        alignment: Alignment.center,
        color: Colors.greenAccent,
        child: const Text(
          '😀',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
    );
  }

  @override
  Widget buildRangeStartLine(BoxConstraints constraints) {
    return Align(
      alignment: Alignment.centerRight,
      child: Container(
        width: constraints.maxWidth / 2,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.greenAccent),
          color: Colors.greenAccent,
        ),
      ),
    );
  }

  @override
  Widget buildRangeEndLine(BoxConstraints constraints) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        width: constraints.maxWidth / 2,
        decoration: BoxDecoration(
          border: Border.all(width: 0, color: Colors.greenAccent),
          color: Colors.greenAccent,
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom demo screen'),
      ),
      body: SafeArea(
        child: FlutterCalendar(
          selectionMode: CalendarSelectionMode.range,
          calendarBuilder: CustomCalenderBuilder(),

        ),
      ),
    );
  }
}

How to register events

You can create an event and register it in the calendar.

Preview

event_demo

Usages

Create an EventList to register events. If you put the type in General, you can distinguish the type during the onDayPressed callback.

Example

EventList<Event> events = EventList(
    events: {
        DateTime(2022, 6, 7): [
            const Event('Event 1),
            const Event('Event 2),
        ]
    }
);

...

FlutterCalendar(
    selectionMode: CalendarSelectionMode.single,
    focusedDate: DateTime.now(),
    events: events,
    onDayPressed: (DateTime day) {
        Event event = events.get(day);
        print(event);
    },
),

See also: event_demo_screen

How to set localization

The project is being localized using the intl package.

The default is the language value set on the device. You can refer to the value that can be entered in locale here.

Example

FlutterCalendar(
    locale: 'en',
)

Contributors

Please make sure to read the Contributing Guide before making a pull request. Thank you to all the people who helped to maintain and upgrade this project!

Thanks goes to these wonderful people (emoji key):

J-flow
J-flow

💻 ⚠️ 📖
You might also like...

A highly customisable and simple widget for having iOS 13 style tab bars.

cupertino_tabbar A highly customisable and simple widget for having iOS 13 style tab bars. It is highly recommended to read the documentation and run

Oct 31, 2022

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock loader - Highly versatile Widget display the smooth and creative loader named as clock loader

Clock Loader Highly versatile Widget display the smooth and creative loader name

Dec 30, 2022

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

A Flutter slidable widget that provides an easy to use configuration. Highly customisable. Just as you want it!

Dec 8, 2022

Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

some calendar Custom calendar with Multi-select & range configurable calendar New Features Added View Mode Somecalendar #15 Help Maintenance I've take

Jan 3, 2023

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

Nov 26, 2022

Speed Share is a highly available file sharing terminal on LAN(local area network) developed by flutter framework.

Speed Share is a highly available file sharing terminal on LAN(local area network) developed by flutter framework.

速享 Language: 中文简体 | English 这是一款完全基于局域网的文件互传终端,速享不使用任何服务器,不使用您的移动流量,不收集任何用户数据,完全的点对点传输。 可以快速共享文本消息,图片或其他文件,文件夹。 适用于局域网中的文件互传,解决 QQ,微信等上传文件会经过服务器的问题,或者

Dec 31, 2022

Code Snippets of highly interactive Flutter Templates that can be implemented in a Native Flutter App.

Code Snippets of highly interactive Flutter Templates that can be implemented in a Native Flutter App.

Native Frontend Flutter About the Repository We are on a mission to make things easy and convenient for all the users who just want to save their time

Sep 5, 2022

An Event-based system, highly inspired by NodeJS's Event Emitter

An Event-based system, highly inspired by NodeJS's Event Emitter. This implementation uses generic types to allow for multiple data types, while still being intuitive.

Dec 1, 2022

无第三方依赖的公历(阳历)和农历(阴历、老黄历)工具,支持节假日、星座、儒略日、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋凶煞宜忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道黑道日及吉凶等。lunar is a calendar library for Solar and Chinese Lunar.

lunar lunar是一款无第三方依赖的公历(阳历)和农历(阴历、老黄历)工具,支持星座、儒略日、干支、生肖、节气、节日、彭祖百忌、吉神(喜神/福神/财神/阳贵神/阴贵神)方位、胎神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶、法定节假日及调休等。 Eng

Dec 27, 2022
Releases(0.0.2)
Owner
dooboolab
dooboolab community - https://dooboolab.com/joinSlack
dooboolab
Ali Türkay AVCI 1 Jan 20, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Adam Jonsson 364 Dec 6, 2022
A highly customizable Flutter widget to render and interact with JSON objects.

The spreadsheet with superpowers ✨ ! JSON Data Explorer A highly customizable widget to render and interact with JSON objects. Features Expand and col

rows 15 Dec 21, 2022
📅 Customizable flutter calendar widget including day and week views

?? Customizable, animated calendar widget including day, week, and month views. Navigation Animation Callbacks Changing the VisibleDateRange Available

Jonas Wanke 276 Jan 1, 2023
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 21 Oct 18, 2022
Powerful, helpfull, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server with boilerplate code free.

flutter_axelor_sdk Powerful, helpful, extensible and highly customizable API's that wrap http client to make communication easier with Axelor server w

Abd al-Rahman al-Ktefane 5 Dec 25, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
⚡️A highly customizable, powerful and easy-to-use alerting library for Flutter.

Flash ⚡️ A highly customizable, powerful and easy-to-use alerting library for Flutter. Website: https://sososdk.github.io/flash Specs This library all

null 368 Jan 5, 2023
Add beautiful animated effects & builders in Flutter, via an easy, highly customizable unified API.

Flutter Animate A performant library that makes it simple to add almost any kind of animated effect in Flutter. Pre-built effects, like fade, scale, s

Grant Skinner 352 Dec 25, 2022