calendar_builder 0.0.6 icon indicating copy to clipboard operation
calendar_builder: ^0.0.6 copied to clipboard

Fully customizable calendar package for flutter.Also supports for disabling dates, highlighting dates and displaying events inside calendar.

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 BuilderCustomised Month Builder
Custom Month BuilderMonth Builder with callbacks

Support Light and Dark theme #

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

Demo #

Customised Month Builder #


Output #


code #


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 #



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

14
likes
140
pub points
75%
popularity

Publisher

unverified uploader

Fully customizable calendar package for flutter.Also supports for disabling dates, highlighting dates and displaying events inside calendar.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, get

More

Packages that depend on calendar_builder