https://github.com/jeebb/nhabe
An elegant calendar widget for your Flutter app
https://github.com/jeebb/nhabe
Last synced: 4 months ago
JSON representation
An elegant calendar widget for your Flutter app
- Host: GitHub
- URL: https://github.com/jeebb/nhabe
- Owner: jeebb
- License: mit
- Created: 2020-07-17T14:33:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-04T14:31:10.000Z (almost 5 years ago)
- Last Synced: 2023-08-20T22:39:40.300Z (almost 3 years ago)
- Language: Dart
- Homepage:
- Size: 212 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## 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](https://github.com/jeebb/nhabe/issues)
## Getting Started
1\. Declare the dependency in **pubspec.yaml**:
```dart
dependencies:
nhabe:
```
2\. Import the package:
```dart
import 'package:nhabe/nhabe.dart';
```
3\. Add the component to your screen by creating a new **NBCalendar** widget:
```dart
import 'package:flutter/material.dart';
import 'package:nhabe/nhabe.dart';
class SimpleCalendar extends StatefulWidget {
@override
State createState() => _SimpleCalendarState();
}
class _SimpleCalendarState extends State {
@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](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 | https://github.com/jeebb/nhabe/blob/c465645cb2c8070c0402bb77b5ccf67ebe985a84/lib/src/nb_calendar.dart#L231 |
| showHeader | bool | whether to show the calendar header | true |
| weekDayLabels | Map | 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 | indicate which day contains the event | https://github.com/jeebb/nhabe/blob/c465645cb2c8070c0402bb77b5ccf67ebe985a84/lib/src/nb_calendar.dart#L67 |
| 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 |