Introduction

An elegant calendar widget for your Flutter app named after a river in Vietnam (Nha Be river).

Features

• Navigation between the months (buttons & gesture)
• Event indicator for specific days of a month
• Specific UI customizations (weekday labels, first day of week, month picker, 3rd-party header ...)
• Wanna have a feature? Just open a ticket here

Getting Started

1. Declare the dependency in pubspec.yaml:

dependencies: 
    nhabe: <version>

2. Import the package:

import 'package:nhabe/nhabe.dart';

3. Add the component to your screen by creating a new NBCalendar widget:

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

class SimpleCalendar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SimpleCalendarState();
}

class _SimpleCalendarState extends State<SimpleCalendar> {
  @override
  Widget build(_) => Scaffold(
        appBar: AppBar(
          title: Text('Simple Calendar Demo'),
        ),
        body: SafeArea(
          child: Container(
            child: NBCalendar(),
          ),
        ),
      );
}

Example screenshots:

4. More examples could be found at: https://github.com/jeebb/nhabe/tree/master/example

Widget Properties

Property	Type	Description	Default Value
titleBuilder	CalendarTitleBuilder	custom builder for the header title. e.g. changing the date format	nhabe/lib/src/nb_calendar.dart Line 231 in c465645 final defaultTitleBuilder = (MonthAndYear selectedMonth) =>
showHeader	bool	whether to show the calendar header	true
weekDayLabels	Map<int, String>	label for the weekdays	M, T, W, T, F, S, S
firstDayOfWeek	int	specify the first day of week: DateTime.monday / DateTime.tuesday / ... / DateTime.sunday	DateTime.sunday
monthPickerMode	MonthPickerMode	switch between two different UIs for month picker (simple view & grid view)	grid view
selectedMonthAndYear	MonthAndYear	selected month & year	current month
selectedDate	DateTime	selected date	today
circleSelectedDay	bool	draw a circle around the selected day	true
showInActiveMonthDays	bool	show the days from previous / next month	true
dayEventIndicator	Map<Date, int>	indicate which day contains the event	nhabe/lib/src/nb_calendar.dart Line 67 in c465645 this.weekDayLabels = const {
eventIndicatorColor	Color	color of the event indicator	primary theme color
onMonthChanged	MonthChangedCallBack	callback for month-changed event
onDateSelected	OnDateSelected	callback for date-selected event
swipeToNavigate	bool	wipe left / right to change the month	true