nhabe 1.0.0

Flutter Android iOS web

An elegant calendar widget for Flutter app

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:

Example Image

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

Example App

Widget Properties #

PropertyTypeDescriptionDefault Value
titleBuilderCalendarTitleBuildercustom builder for the header title. e.g. changing the date formathttps://github.com/jeebb/nhabe/blob/c465645cb2c8070c0402bb77b5ccf67ebe985a84/lib/src/nb_calendar.dart#L231
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 eventhttps://github.com/jeebb/nhabe/blob/c465645cb2c8070c0402bb77b5ccf67ebe985a84/lib/src/nb_calendar.dart#L67
eventIndicatorColorColorcolor of the event indicatorprimary theme color
onMonthChangedMonthChangedCallBackcallback for month-changed event
onDateSelectedOnDateSelectedcallback for date-selected event
swipeToNavigateboolwipe left / right to change the monthtrue
0
likes
100
pub points
0%
popularity

An elegant calendar widget for Flutter app

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

jeenguyen.vn@gmail.com

License

MIT (LICENSE)

Dependencies

flutter, intl

More

Packages that depend on nhabe