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


  • 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:

    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 {
  State<StatefulWidget> createState() => _SimpleCalendarState();

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

Example screenshots:

Example Image

4. More examples could be found at:

Example App

Widget Properties

PropertyTypeDescriptionDefault Value
titleBuilderCalendarTitleBuildercustom builder for the header title. e.g. changing the date format
showHeaderboolwhether to show the calendar headertrue
weekDayLabelsMap<int, String>label for the weekdaysM, T, W, T, F, S, S
firstDayOfWeekintspecify the first day of week: DateTime.monday / DateTime.tuesday / ... / DateTime.sundayDateTime.sunday
monthPickerModeMonthPickerModeswitch between two different UIs for month picker (simple view & grid view)grid view
selectedMonthAndYearMonthAndYearselected month & yearcurrent month
selectedDateDateTimeselected datetoday
circleSelectedDaybooldraw a circle around the selected daytrue
showInActiveMonthDaysboolshow the days from previous / next monthtrue
dayEventIndicatorMap<Date, int>indicate which day contains the event
eventIndicatorColorColorcolor of the event indicatorprimary theme color
onMonthChangedMonthChangedCallBackcallback for month-changed event
onDateSelectedOnDateSelectedcallback for date-selected event
swipeToNavigateboolwipe left / right to change the monthtrue