{"id":16382754,"url":"https://github.com/newtadev/calendar_builder","last_synced_at":"2026-06-25T05:31:16.630Z","repository":{"id":56826859,"uuid":"373713363","full_name":"newtaDev/calendar_builder","owner":"newtaDev","description":"Fully customizable calendar package for flutter. Also supports for disabling dates, highlighting dates and displaying events inside calendar.","archived":false,"fork":false,"pushed_at":"2022-04-20T16:55:19.000Z","size":302,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-02T02:43:29.736Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/calendar_builder","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/newtaDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-04T03:51:10.000Z","updated_at":"2024-05-12T15:01:23.000Z","dependencies_parsed_at":"2022-09-13T08:12:36.873Z","dependency_job_id":null,"html_url":"https://github.com/newtaDev/calendar_builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtaDev%2Fcalendar_builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtaDev%2Fcalendar_builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtaDev%2Fcalendar_builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newtaDev%2Fcalendar_builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newtaDev","download_url":"https://codeload.github.com/newtaDev/calendar_builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240073776,"owners_count":19743810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T04:06:16.116Z","updated_at":"2026-05-01T09:30:20.629Z","avatar_url":"https://github.com/newtaDev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# calendar_builder\n\nFully customizable calendar package for flutter.\nAlso supports for disabling dates, highlighting dates and displaying events inside calendar.\n\n## Features\n\n- Fully customisable widgets\n- Add Events\n- Highlight dates\n- Disable dates\n- Starting week can be changed\n- ✅ MonthBuilder\n- [TODO] DayBuilder\n- [TODO] WeekBuilder\n\n\n|                                               Month Builder                                                |                                          Customised Month Builder                                          |\n| :--------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |\n| ![](https://user-images.githubusercontent.com/85326522/160266643-9802e763-cf66-43cb-880f-2f861e93c208.jpg) | ![](https://user-images.githubusercontent.com/85326522/160266640-9cb71c30-9354-42bc-8b99-06f7f33518f6.jpg) |\n\n|                                            Custom Month Builder                                            |                                        Month Builder with callbacks                                        |\n| :--------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |\n| ![](https://user-images.githubusercontent.com/85326522/160266644-3d0b66ff-3ded-4f47-92a7-291cebc7957c.jpg) | ![](https://user-images.githubusercontent.com/85326522/160266642-9cb04737-7182-4f42-b7c1-dd0804f7aa03.jpg) |\n\n---\n\n### Support Light and Dark theme\n\n![](https://user-images.githubusercontent.com/85326522/160261784-e1df931e-5e9a-475c-8bc9-a3957290de1e.gif)\n\n\n## Installation\n\n\nIn your `pubspec.yaml` file within your Flutter Project:\n\n```yaml\ndependencies:\n  calendar_builder: \u003clatest_version\u003e\n```\n\n\n## How to use\n\n\n```dart\nimport 'package:calendar_builder/calendar_builder.dart';\nimport 'package:flutter/material.dart';\n\nclass MonthBuilderScreen extends StatelessWidget {\n  const MonthBuilderScreen({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: SafeArea(\n        child: Column(\n          children: [\n            Expanded(\n              child: CbMonthBuilder(\n                cbConfig: CbConfig(\n                  startDate: DateTime(2020),\n                  endDate: DateTime(2026),\n                  selectedDate: DateTime(2021,3,4),\n                  selectedYear: DateTime(2021),\n                ),\n              ),\n            )\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n```\n\n### Demo\n\n![](https://user-images.githubusercontent.com/85326522/160261779-9b11b4df-24c7-48e4-b3b3-d56b3d36d0e5.gif)\n## Customised Month Builder\n----\n### Output\n\n---\n\n![](https://user-images.githubusercontent.com/85326522/160266642-9cb04737-7182-4f42-b7c1-dd0804f7aa03.jpg)\n\n### code\n\n---\n\n```dart\nCbMonthBuilder(\n      cbConfig: CbConfig(\n          startDate: DateTime(2020),\n          endDate: DateTime(2123),\n          selectedDate: DateTime(2022, 3, 4),\n          selectedYear: DateTime(2022),\n          weekStartsFrom: WeekStartsFrom.wednesday,\n          disabledDates: [\n            DateTime(2022, 1, 7),\n            DateTime(2022, 1, 9),\n          ],\n          eventDates: [\n            DateTime(2022, 1, 2),\n            DateTime(2022, 1, 2),\n            DateTime(2022, 1, 3)\n          ],\n          highlightedDates: [\n            DateTime(2022, 1, 6),\n            DateTime(2022, 1, 3)\n          ]),\n      monthCustomizer: MonthCustomizer(\n          padding: const EdgeInsets.all(20),\n          monthHeaderCustomizer: MonthHeaderCustomizer(\n            textStyle: const TextStyle(\n              color: Colors.red,\n              fontSize: 22,\n              fontWeight: FontWeight.bold,\n            ),\n          ),\n          monthButtonCustomizer: MonthButtonCustomizer(\n              currentDayColor: Colors.orange,\n              borderStrokeWidth: 2,\n              textStyleOnDisabled: const TextStyle(color: Colors.red),\n              highlightedColor: const Color.fromARGB(255, 255, 174, 0)),\n          monthWeekCustomizer: MonthWeekCustomizer(\n              textStyle:\n                  const TextStyle(color: Color.fromARGB(255, 255, 174, 0)))\n          // monthWidth: 500,\n          // monthHeight: 200\n          ),\n      yearDropDownCustomizer: YearDropDownCustomizer(\n          yearButtonCustomizer: YearButtonCustomizer(\n            borderColorOnSelected: Colors.red,\n          ),\n          yearHeaderCustomizer: YearHeaderCustomizer(\n              titleTextStyle:\n                  const TextStyle(color: Color.fromARGB(255, 255, 174, 0)))),\n      onYearHeaderExpanded: (isExpanded) {\n        print('isExpanded ' + isExpanded.toString());\n      },\n      onDateClicked: (onDateClicked) {\n        print('selected date' +\n            onDateClicked.selectedDate.toString() +\n            '\\n' +\n            'isSelected ' +\n            onDateClicked.isSelected.toString() +\n            '\\n' +\n            'isHighlighted ' +\n            onDateClicked.isHighlighted.toString() +\n            '\\n' +\n            'hasEvent ' +\n            onDateClicked.hasEvent.toString() +\n            '\\n' +\n            'isCurrentDate ' +\n            onDateClicked.isCurrentDate.toString() +\n            '\\n' +\n            'isDisabled ' +\n            onDateClicked.isDisabled.toString());\n      },\n      onYearButtonClicked: (year, isSelected) {\n        print('selected year ' +\n            year.toString() +\n            '\\n' +\n            'isSelected ' +\n            isSelected.toString());\n      },\n    )\n```\n\n## Custom Month Builder\n---\n### Output\n\n---\n\n![](https://user-images.githubusercontent.com/85326522/160266644-3d0b66ff-3ded-4f47-92a7-291cebc7957c.jpg)\n\n### code\n\n---\n\n```dart\n\nCbMonthBuilder(\n      cbConfig: CbConfig(\n          startDate: DateTime(2020),\n          endDate: DateTime(2123),\n          selectedDate: DateTime(2022),\n          selectedYear: DateTime(2022),\n          weekStartsFrom: WeekStartsFrom.sunday,\n          eventDates: [\n            DateTime(2022, 1, 2),\n            DateTime(2022, 1, 2),\n            DateTime(2022, 1, 3)\n          ],\n          highlightedDates: [\n            DateTime(2022, 1, 6),\n            DateTime(2022, 1, 3)\n          ]),\n      yearDropDownCustomizer: YearDropDownCustomizer(\n        yearHeaderBuilder:\n            (isYearPickerExpanded, selectedDate, selectedYear, year) {\n          return Container(\n            height: 40,\n            color: Colors.yellow,\n            child: Row(\n              mainAxisAlignment: MainAxisAlignment.center,\n              crossAxisAlignment: CrossAxisAlignment.center,\n              children: [\n                Text(\n                  year,\n                  style: const TextStyle(fontWeight: FontWeight.bold),\n                ),\n                Icon(!isYearPickerExpanded\n                    ? Icons.arrow_drop_down_outlined\n                    : Icons.arrow_drop_up_outlined)\n              ],\n            ),\n          );\n        },\n      ),\n      monthCustomizer: MonthCustomizer(\n        montMinhHeight: 200,\n        monthMinWidth: 450,\n        padding: const EdgeInsets.all(20),\n        monthHeaderBuilder: (month, headerHeight, headerWidth, paddingLeft) {\n          return Container(\n            color: Colors.grey[200],\n            height: headerHeight,\n            width: headerWidth,\n            child: Padding(\n              padding: EdgeInsets.only(left: paddingLeft),\n              child: Align(\n                alignment: Alignment.center,\n                child: Text(\n                  month,\n                  style: const TextStyle(\n                    fontSize: 22,\n                    fontWeight: FontWeight.w600,\n                  ),\n                ),\n              ),\n            ),\n          );\n        },\n        monthWeekBuilder: (index, weeks, weekHeight, weekWidth) {\n          return SizedBox(\n            height: weekHeight,\n            width: weekWidth,\n            child: Padding(\n              padding: const EdgeInsets.all(4.0),\n              child: Container(\n                decoration: BoxDecoration(\n                    color: Colors.red.withOpacity(0.1),\n                    borderRadius: BorderRadius.circular(10),\n                    border: Border.all(color: Colors.red)),\n                child: Align(\n                  child: Text(\n                    weeks,\n                    style: const TextStyle(\n                      fontSize: 14,\n                      color: Colors.red,\n                      fontWeight: FontWeight.w500,\n                    ),\n                    overflow: TextOverflow.ellipsis,\n                    maxLines: 1,\n                  ),\n                ),\n              ),\n            ),\n          );\n        },\n        monthButtonBuilder: (dateTime, childHeight, childWidth, isSelected,\n            isDisabled, hasEvent, isHighlighted, isCurrentDay) {\n          //Text Theme\n          final txtTheme = Theme.of(context).textTheme;\n          //color theme\n          final colorTheme = Theme.of(context);\n\n          var daysText = Align(\n            child: Text(\n              '${dateTime.day}',\n              style: isDisabled\n                  ? txtTheme.caption\n                  : isSelected\n                      ? txtTheme.bodyText1!.copyWith(\n                          fontWeight: FontWeight.bold,\n                          color: colorTheme.brightness == Brightness.dark\n                              ? Colors.black\n                              : Colors.white)\n                      : isHighlighted\n                          ? txtTheme.bodyText2 //Highlighted TextStyle\n                          : isCurrentDay\n                              ? txtTheme.bodyText2 //CurrentDay TextStyle\n                              : txtTheme.bodyText2,\n            ),\n          );\n          if (isSelected) {\n            return Container(\n              decoration: const BoxDecoration(\n                color: Colors.red,\n                shape: BoxShape.rectangle,\n              ),\n              margin: const EdgeInsets.all(2),\n              child: daysText,\n            );\n          }\n          return Container(\n            decoration: BoxDecoration(\n                color: isDisabled ? Colors.grey[200] : Colors.yellow,\n                shape: BoxShape.rectangle,\n                border: hasEvent || isHighlighted\n                    ? Border.all(\n                        color: isHighlighted ? Colors.red : Colors.blue,\n                        width: 2)\n                    : null),\n            margin: const EdgeInsets.all(2),\n            child: daysText,\n          );\n        },\n      ),\n    )\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewtadev%2Fcalendar_builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewtadev%2Fcalendar_builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewtadev%2Fcalendar_builder/lists"}