calendar_builder 0.0.6

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 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:

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