Here's the updated version of the README, reflecting the changes and structure according to your package:

# CrCalendar

A highly customizable Flutter calendar widget inspired by Google Calendar, supporting advanced features like date selection dialogs and customizable month views.

### Features:
- **Horizontal Scrollable Month View**: CrCalendar displays months horizontally with event lines over the days.
- **Date Selection Dialog**: Uses CrCalendar in range selection mode with full customization of buttons, texts, and the look of the CrCalendar widget.
- **Customizable Event Widgets**: Tailor how events are displayed over each day.

### Screenshots from the [example app](https://github.com/Cleveroad/cr_calendar/tree/main/example):
<img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-1.png" height="500">  <img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-2.png" height="500">  <img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-3.png" height="500">

<img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-4.png" height="500">  <img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-5.png" height="500">  <img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-6.png" height="500">

<img src="https://raw.githubusercontent.com/Cleveroad/cr_calendar/main/screenshots/screenshot-7.png" height="322">

---

### Installation
Add `cr_calendar` as a dependency in your `pubspec.yaml`.

```yaml
dependencies:
  cr_calendar: latest_version

Then import the package:

import 'package:cr_calendar/cr_calendar.dart';

CrCalendar Parameters

Type Name Description Default Value
CrCalendarController controller The calendar's controller -
DateTime initialDate Initial date to be displayed when the calendar is created -
OnTapCallback onDayClicked Callback for tapping a day in singleTap touch mode -
WeekDays firstDayOfWeek Defines which day the week starts from WeekDays.sunday
WeekDaysBuilder weekDaysBuilder Custom builder for the week days row at the top of the calendar -
DayItemBuilder dayItemBuilder Custom builder for day cells -
bool forceSixWeek Force the calendar to always display six rows false
Color backgroundColor Background color of the calendar -
int maxEventLines Maximum number of events to show on a day 4
EventBuilder eventBuilder Custom builder for event widgets -
TouchMode touchMode Defines the touch mode of the calendar (e.g., singleTap, range selection) -
double eventsTopPadding Padding for event widgets -
OnRangeSelectedCallback onRangeSelected Callback for receiving the selected range in date picker mode -
int onSwipeCallbackDebounceMs Debounce time for swipe callback (in ms) -
DateTime minDate Earliest allowable date -
DateTime maxDate Latest allowable date -

Basic Usage

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final CrCalendarController _controller = CrCalendarController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CrCalendar(
          initialDate: DateTime.now(),
          controller: _controller,
        ),
      ),
    );
  }
}

Note: Avoid frequent setState calls on the page where the CrCalendar widget is used to maintain performance.

CrCalendar Date Picker Dialog

The CrCalendar date picker dialog allows users to select a date range for events with customizable options.

DatePickerProperties Parameters

Type Name Description Default Value
Color backgroundColor Background color for the date picker and year selection Colors.white
DateTime initialPickerDate Initial date shown when the dialog opens -
EdgeInsets padding Padding for the picker dialog EdgeInsets.all(8)
DayItemBuilder dayItemBuilder Builder for individual day items -
TouchMode pickerMode Mode for date selection (e.g., singleTap, range selection) -
WeekDaysBuilder weekDaysBuilder Builder for the week days row -
DateTitleBuilder pickerTitleBuilder Title builder for the picker widget -
Alignment pickerTitleAlignInLandscape Alignment of the picker title in landscape mode Alignment.centerLeft
Widget backButton Back button for the control bar -
Widget forwardButton Forward button for the control bar -
DateTitleBuilder controlBarTitleBuilder Title for the control bar between back and forward buttons -
bool showControlBar Whether to show the control bar true
YearPickerItemBuilder yearPickerItemBuilder Custom builder for year selection items -
PickerButtonBuilder okButtonBuilder Builder for the confirm selection button -
PickerButtonBuilder cancelButtonBuilder Builder for the cancel button -
bool forceSixWeek Forces six weeks to be displayed in month view false
WeekDays firstWeekDay First day of the week for the date picker calendar WeekDays.sunday
DateTime minDate Earliest selectable date -
DateTime maxDate Latest selectable date -
LandscapeDaysResizeMode landscapeDaysResizeMode Mode for resizing day cells in landscape (adaptive or scrollable) LandscapeDaysResizeMode.adaptive

Example Usage

void _showDatePicker(BuildContext context) {
  showCrDatePicker(
    context,
    properties: DatePickerProperties(
      firstWeekDay: WeekDays.monday,
      okButtonBuilder: (onPress) =>
          ElevatedButton(child: const Text('OK'), onPressed: onPress),
      cancelButtonBuilder: (onPress) =>
          OutlinedButton(child: const Text('CANCEL'), onPressed: onPress),
      initialPickerDate: DateTime.now(),
    ),
  );
}

For more information, visit the documentation.


This version aligns with your package updates and provides a clearer structure and descriptions for the features and usage examples.

Libraries

as_calendar