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

Getting started

TODO: List prerequisites and provide or point to information on how to start using the package.

Month Builder Customised Month Builder
Custom Month Builder Month Builder with callbacks

Installation

In your pubspec.yaml file within your Flutter Project:

dependencies:
  calendar_builder: <latest_version>

How to use

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),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Customised Month Builder

Code Output 




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) {
        snackBar('isExpanded ' + isExpanded.toString());
      },
      onDateClicked: (onDateClicked) {
        snackBar('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) {
        snackBar('selected year ' +
            year.toString() +
            '\n' +
            'isSelected ' +
            isSelected.toString());
      },
    )
month_builder

Customised Month Builder

Code Output 




 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,
      );
    },
  ),
)
month_builder

TODO: Include short and useful examples for package users. Add longer examples to /example folder.

const like = 'sample';

Additional information

TODO: Tell users more about the package: where to find more information, how to contribute to the package, how to file issues, what response they can expect from the package authors, and more.

Libraries

services/base
services/distant_google
location_geocoder
geocoder