first commit
This commit is contained in:
Hamza-Ayed
328
siro_rider/packages/calendar_builder/README.md
Normal file
328
siro_rider/packages/calendar_builder/README.md
Normal file
@@ -0,0 +1,328 @@
|
||||
# calendar_builder
|
||||
|
||||
Fully customizable calendar package for flutter.
|
||||
Also supports for disabling dates, highlighting dates and displaying events inside calendar.
|
||||
|
||||
## Features
|
||||
|
||||
- Fully customisable widgets
|
||||
- Add Events
|
||||
- Highlight dates
|
||||
- Disable dates
|
||||
- Starting week can be changed
|
||||
- ✅ MonthBuilder
|
||||
- [TODO] DayBuilder
|
||||
- [TODO] WeekBuilder
|
||||
|
||||
|
||||
| Month Builder | Customised Month Builder |
|
||||
| :--------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |
|
||||
|  |  |
|
||||
|
||||
| Custom Month Builder | Month Builder with callbacks |
|
||||
| :--------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |
|
||||
|  |  |
|
||||
|
||||
---
|
||||
|
||||
### Support Light and Dark theme
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
In your `pubspec.yaml` file within your Flutter Project:
|
||||
|
||||
```yaml
|
||||
dependencies:
|
||||
calendar_builder: <latest_version>
|
||||
```
|
||||
|
||||
|
||||
## How to use
|
||||
|
||||
|
||||
```dart
|
||||
import 'package:calendar_builder/calendar_builder.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class MonthBuilderScreen extends StatelessWidget {
|
||||
const MonthBuilderScreen({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: CbMonthBuilder(
|
||||
cbConfig: CbConfig(
|
||||
startDate: DateTime(2020),
|
||||
endDate: DateTime(2026),
|
||||
selectedDate: DateTime(2021,3,4),
|
||||
selectedYear: DateTime(2021),
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Demo
|
||||
|
||||
|
||||
## Customised Month Builder
|
||||
----
|
||||
### Output
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
### code
|
||||
|
||||
---
|
||||
|
||||
```dart
|
||||
CbMonthBuilder(
|
||||
cbConfig: CbConfig(
|
||||
startDate: DateTime(2020),
|
||||
endDate: DateTime(2123),
|
||||
selectedDate: DateTime(2022, 3, 4),
|
||||
selectedYear: DateTime(2022),
|
||||
weekStartsFrom: WeekStartsFrom.wednesday,
|
||||
disabledDates: [
|
||||
DateTime(2022, 1, 7),
|
||||
DateTime(2022, 1, 9),
|
||||
],
|
||||
eventDates: [
|
||||
DateTime(2022, 1, 2),
|
||||
DateTime(2022, 1, 2),
|
||||
DateTime(2022, 1, 3)
|
||||
],
|
||||
highlightedDates: [
|
||||
DateTime(2022, 1, 6),
|
||||
DateTime(2022, 1, 3)
|
||||
]),
|
||||
monthCustomizer: MonthCustomizer(
|
||||
padding: const EdgeInsets.all(20),
|
||||
monthHeaderCustomizer: MonthHeaderCustomizer(
|
||||
textStyle: const TextStyle(
|
||||
color: Colors.red,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
monthButtonCustomizer: MonthButtonCustomizer(
|
||||
currentDayColor: Colors.orange,
|
||||
borderStrokeWidth: 2,
|
||||
textStyleOnDisabled: const TextStyle(color: Colors.red),
|
||||
highlightedColor: const Color.fromARGB(255, 255, 174, 0)),
|
||||
monthWeekCustomizer: MonthWeekCustomizer(
|
||||
textStyle:
|
||||
const TextStyle(color: Color.fromARGB(255, 255, 174, 0)))
|
||||
// monthWidth: 500,
|
||||
// monthHeight: 200
|
||||
),
|
||||
yearDropDownCustomizer: YearDropDownCustomizer(
|
||||
yearButtonCustomizer: YearButtonCustomizer(
|
||||
borderColorOnSelected: Colors.red,
|
||||
),
|
||||
yearHeaderCustomizer: YearHeaderCustomizer(
|
||||
titleTextStyle:
|
||||
const TextStyle(color: Color.fromARGB(255, 255, 174, 0)))),
|
||||
onYearHeaderExpanded: (isExpanded) {
|
||||
print('isExpanded ' + isExpanded.toString());
|
||||
},
|
||||
onDateClicked: (onDateClicked) {
|
||||
print('selected date' +
|
||||
onDateClicked.selectedDate.toString() +
|
||||
'\n' +
|
||||
'isSelected ' +
|
||||
onDateClicked.isSelected.toString() +
|
||||
'\n' +
|
||||
'isHighlighted ' +
|
||||
onDateClicked.isHighlighted.toString() +
|
||||
'\n' +
|
||||
'hasEvent ' +
|
||||
onDateClicked.hasEvent.toString() +
|
||||
'\n' +
|
||||
'isCurrentDate ' +
|
||||
onDateClicked.isCurrentDate.toString() +
|
||||
'\n' +
|
||||
'isDisabled ' +
|
||||
onDateClicked.isDisabled.toString());
|
||||
},
|
||||
onYearButtonClicked: (year, isSelected) {
|
||||
print('selected year ' +
|
||||
year.toString() +
|
||||
'\n' +
|
||||
'isSelected ' +
|
||||
isSelected.toString());
|
||||
},
|
||||
)
|
||||
```
|
||||
|
||||
## Custom Month Builder
|
||||
---
|
||||
### Output
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
### code
|
||||
|
||||
---
|
||||
|
||||
```dart
|
||||
|
||||
CbMonthBuilder(
|
||||
cbConfig: CbConfig(
|
||||
startDate: DateTime(2020),
|
||||
endDate: DateTime(2123),
|
||||
selectedDate: DateTime(2022),
|
||||
selectedYear: DateTime(2022),
|
||||
weekStartsFrom: WeekStartsFrom.sunday,
|
||||
eventDates: [
|
||||
DateTime(2022, 1, 2),
|
||||
DateTime(2022, 1, 2),
|
||||
DateTime(2022, 1, 3)
|
||||
],
|
||||
highlightedDates: [
|
||||
DateTime(2022, 1, 6),
|
||||
DateTime(2022, 1, 3)
|
||||
]),
|
||||
yearDropDownCustomizer: YearDropDownCustomizer(
|
||||
yearHeaderBuilder:
|
||||
(isYearPickerExpanded, selectedDate, selectedYear, year) {
|
||||
return Container(
|
||||
height: 40,
|
||||
color: Colors.yellow,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
year,
|
||||
style: const TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
Icon(!isYearPickerExpanded
|
||||
? Icons.arrow_drop_down_outlined
|
||||
: Icons.arrow_drop_up_outlined)
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
monthCustomizer: MonthCustomizer(
|
||||
montMinhHeight: 200,
|
||||
monthMinWidth: 450,
|
||||
padding: const EdgeInsets.all(20),
|
||||
monthHeaderBuilder: (month, headerHeight, headerWidth, paddingLeft) {
|
||||
return Container(
|
||||
color: Colors.grey[200],
|
||||
height: headerHeight,
|
||||
width: headerWidth,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(left: paddingLeft),
|
||||
child: Align(
|
||||
alignment: Alignment.center,
|
||||
child: Text(
|
||||
month,
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
monthWeekBuilder: (index, weeks, weekHeight, weekWidth) {
|
||||
return SizedBox(
|
||||
height: weekHeight,
|
||||
width: weekWidth,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.red.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: Colors.red)),
|
||||
child: Align(
|
||||
child: Text(
|
||||
weeks,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.red,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
monthButtonBuilder: (dateTime, childHeight, childWidth, isSelected,
|
||||
isDisabled, hasEvent, isHighlighted, isCurrentDay) {
|
||||
//Text Theme
|
||||
final txtTheme = Theme.of(context).textTheme;
|
||||
//color theme
|
||||
final colorTheme = Theme.of(context);
|
||||
|
||||
var daysText = Align(
|
||||
child: Text(
|
||||
'${dateTime.day}',
|
||||
style: isDisabled
|
||||
? txtTheme.caption
|
||||
: isSelected
|
||||
? txtTheme.bodyText1!.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: colorTheme.brightness == Brightness.dark
|
||||
? Colors.black
|
||||
: Colors.white)
|
||||
: isHighlighted
|
||||
? txtTheme.bodyText2 //Highlighted TextStyle
|
||||
: isCurrentDay
|
||||
? txtTheme.bodyText2 //CurrentDay TextStyle
|
||||
: txtTheme.bodyText2,
|
||||
),
|
||||
);
|
||||
if (isSelected) {
|
||||
return Container(
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.red,
|
||||
shape: BoxShape.rectangle,
|
||||
),
|
||||
margin: const EdgeInsets.all(2),
|
||||
child: daysText,
|
||||
);
|
||||
}
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: isDisabled ? Colors.grey[200] : Colors.yellow,
|
||||
shape: BoxShape.rectangle,
|
||||
border: hasEvent || isHighlighted
|
||||
? Border.all(
|
||||
color: isHighlighted ? Colors.red : Colors.blue,
|
||||
width: 2)
|
||||
: null),
|
||||
margin: const EdgeInsets.all(2),
|
||||
child: daysText,
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user