as_calendar 1.2.2

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

Awesome calendar with customizations, range picking and event showing.

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.