{"id":13551731,"url":"https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view","last_synced_at":"2025-04-03T02:31:31.557Z","repository":{"id":38298112,"uuid":"371005404","full_name":"SimformSolutionsPvtLtd/flutter_calendar_view","owner":"SimformSolutionsPvtLtd","description":"A Flutter package allows you to easily implement all calendar UI and calendar event functionality. 👌🔝🎉","archived":false,"fork":false,"pushed_at":"2024-10-29T13:25:18.000Z","size":9846,"stargazers_count":429,"open_issues_count":52,"forks_count":258,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T14:39:07.965Z","etag":null,"topics":["calendar","dart","flutter","package","plugin","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/calendar_view","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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-26T11:12:39.000Z","updated_at":"2024-10-29T09:28:26.000Z","dependencies_parsed_at":"2023-11-22T16:19:25.313Z","dependency_job_id":"76516ce9-c8b2-41bd-b77e-8e0932014ad0","html_url":"https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view","commit_stats":{"total_commits":155,"total_committers":34,"mean_commits":"4.5588235294117645","dds":0.864516129032258,"last_synced_commit":"f183169c7583a3b0e31ca00c5c560c2713924100"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_calendar_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_calendar_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_calendar_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_calendar_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246925317,"owners_count":20855870,"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":["calendar","dart","flutter","package","plugin","widget"],"created_at":"2024-08-01T12:01:52.828Z","updated_at":"2025-04-03T02:31:31.536Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"Dart","funding_links":[],"categories":["Dart","Flutter"],"sub_categories":["Jetpack-Compose"],"readme":"![Plugin Banner](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_calendar_view/master/readme_assets/plugin_banner.png)\n\n# calendar_view\n\n[![Build](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/workflows/Build/badge.svg?branch=master)](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/actions) [![calendar_view](https://img.shields.io/pub/v/calendar_view?label=calendar_view)](https://pub.dev/packages/calendar_view)\n\nA Flutter package allows you to easily implement all calendar UI and calendar\nevent functionality.\n\nFor web demo\nvisit [Calendar View Example](https://simformsolutionspvtltd.github.io/flutter_calendar_view/).\n\n## Preview\n\n![Preview](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_calendar_view/master/readme_assets/demo.gif)\n\n## Installing\n\n1. Add dependencies to `pubspec.yaml`\n\n   Get the latest version in the 'Installing' tab\n   on [pub.dev](https://pub.dev/packages/calendar_view/install)\n\n    ```yaml\n    dependencies:\n        calendar_view: \u003clatest-version\u003e\n    ```\n\n2. Run pub get.\n\n   ```shell\n   flutter pub get\n   ```\n\n3. Import package.\n\n    ```dart\n    import 'package:calendar_view/calendar_view.dart';\n    ```\n\n## Implementation\n\n1. Wrap `MaterialApp` with `CalendarControllerProvider` and\n   assign `EventController` to it.\n\n    ```dart\n    CalendarControllerProvider(\n        controller: EventController(),\n        child: MaterialApp(\n            // Your initialization for material app.\n        ),\n    )\n    ```\n\n2. Add calendar views.\n\n   For Month View\n\n    ```dart\n    Scaffold(\n        body: MonthView(),\n    );\n    ```\n\n   For Day View\n\n    ```dart\n    Scaffold(\n        body: DayView(),\n    );\n    ```\n\n   For Week view\n\n    ```dart\n    Scaffold(\n        body: WeekView(),\n    );\n    ```\n\n   For more info on properties\n   visit [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/calendar_view-library.html)\n   .\n\n3. Use `controller` to add or remove events.\n\n   To Add event:\n\n    ```dart\n    final event = CalendarEventData(\n        date: DateTime(2021, 8, 10),\n        event: \"Event 1\",\n    );\n\n    CalendarControllerProvider.of(context).controller.add(event);\n    ```\n\n   To Add events in range of dates:\n\n   ```dart\n   final event = CalendarEventData(\n           date: DateTime(2021, 8, 10),\n           endDate: DateTime(2021,8,15),\n           event: \"Event 1\",\n       );\n\n       CalendarControllerProvider.of(context).controller.add(event);\n   ```\n\n   To Remove event:\n\n    ```dart\n    CalendarControllerProvider.of(context).controller.remove(event);\n    ```\n\n   As soon as you add or remove events from the controller, it will\n   automatically update the\n   calendar view assigned to that controller.\n   See, [Use of EventController](#use-of-eventcontroller)\n   for more info\n\n4. Use `GlobalKey` to change the page or jump to a specific page or date.\n   See, [Use of GlobalKey](#use-of-globalkey) for more info.\n\n## More on the calendar view\n\n### Optional configurations/parameters in Calendar view\n\nFor month view\n\n```dart\nMonthView(\n    controller: EventController(),\n    // to provide custom UI for month cells.\n    cellBuilder: (\n      date, \n      events, \n      isToday, \n      isInMonth, \n      hideDaysNotInMonth,\n      ) {\n        // Return your widget to display as month cell.\n        return Container();\n    },\n    minMonth: DateTime(1990),\n    maxMonth: DateTime(2050),\n    initialMonth: DateTime(2021),\n    cellAspectRatio: 1,\n    onPageChange: (date, pageIndex) =\u003e print(\"$date, $pageIndex\"),\n    onCellTap: (events, date) {\n      // Implement callback when user taps on a cell.\n      print(events);\n    },\n    startDay: WeekDays.sunday, // To change the first day of the week.\n    // This callback will only work if cellBuilder is null.\n    onEventTap: (event, data) =\u003e print('on tap'),\n    onEventTapDetails: (event, data, details) =\u003e print('on tap details'),\n    onEventDoubleTap: (event, data) =\u003e print('on double tap'),\n    onEventDoubleTapDetails: (event, data, details) =\u003e\n      print('on double details'),\n    onEventLongTap: (event, data) =\u003e print('on long tap'),\n    onEventLongTapDetails: (event, data, details) =\u003e\n      print('on long tap details'),\n    onDateLongPress: (date) =\u003e print(date),\n    headerBuilder: MonthHeader.hidden, // To hide month header\n    showWeekTileBorder: false, // To show or hide header border\n    hideDaysNotInMonth: true, // To hide days or cell that are not in current month\n    showWeekends: false, // To hide weekends default value is true\n);\n```\n\nFor day view\n\n```dart\nDayView(\n    controller: EventController(),\n    eventTileBuilder: (date, events, boundry, start, end) {\n        // Return your widget to display as event tile.\n        return Container();\n    },\n    fullDayEventBuilder: (events, date) {\n        // Return your widget to display full day event view.\n        return Container();\n    },\n    showVerticalLine: true, // To display live time line in day view.\n    showLiveTimeLineInAllDays: true, // To display live time line in all pages in day view.\n    minDay: DateTime(1990),\n    maxDay: DateTime(2050),\n    initialDay: DateTime(2021),\n    heightPerMinute: 1, // height occupied by 1 minute time span.\n    eventArranger: SideEventArranger(), // To define how simultaneous events will be arranged.\n    onEventTap: (events, date) =\u003e print(events),\n    onEventDoubleTap: (events, date) =\u003e print(events),\n    onEventLongTap: (events, date) =\u003e print(events),\n    onDateLongPress: (date) =\u003e print(date),\n    startHour: 5 // To set the first hour displayed (ex: 05:00)\n    endHour:20, // To set the end hour displayed\n    hourLinePainter: (lineColor, lineHeight, offset, minuteHeight, showVerticalLine, verticalLineOffset) {\n        return //Your custom painter.\n    },\n    dayTitleBuilder: DayHeader.hidden, // To Hide day header\n    keepScrollOffset: true, // To maintain scroll offset when the page changes\n);\n```\n\nFor week view\n\n```dart\nWeekView(\n    controller: EventController(),\n    eventTileBuilder: (date, events, boundry, start, end) {\n      // Return your widget to display as event tile.\n      return Container();\n    },\n    fullDayEventBuilder: (events, date) {\n      // Return your widget to display full day event view.\n      return Container();\n    },\n    showLiveTimeLineInAllDays: true, // To display live time line in all pages in week view.\n    width: 400, // width of week view.\n    minDay: DateTime(1990),\n    maxDay: DateTime(2050),\n    initialDay: DateTime(2021),\n    heightPerMinute: 1, // height occupied by 1 minute time span.\n    eventArranger: SideEventArranger(), // To define how simultaneous events will be arranged.\n    onEventTap: (events, date) =\u003e print(events),\n    onEventDoubleTap: (events, date) =\u003e print(events),\n    onDateLongPress: (date) =\u003e print(date),\n    startDay: WeekDays.sunday, // To change the first day of the week.\n    startHour: 5, // To set the first hour displayed (ex: 05:00)\n    endHour:20, // To set the end hour displayed\n    showVerticalLines: false, // Show the vertical line between days.\n    hourLinePainter: (lineColor, lineHeight, offset, minuteHeight, showVerticalLine, verticalLineOffset) {\n        return //Your custom painter.\n    },\n    weekPageHeaderBuilder: WeekHeader.hidden, // To hide week header\n    fullDayHeaderTitle: 'All day', // To set full day events header title\n    fullDayHeaderTextConfig: FullDayHeaderTextConfig(\n      textAlign: TextAlign.center,\n      textOverflow: TextOverflow.ellipsis,\n      maxLines: 2,\n    ), // To set full day events header text config\n    keepScrollOffset: true, // To maintain scroll offset when the page changes\n);\n```\n\n\n\nTo see the list of all parameters and detailed description of parameters\nvisit [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/calendar_view-library.html)\n.\n\n### Use of `EventController`\n\n`EventController` is used to add or remove events from the calendar view. When\nwe add or remove\nevents from the controller, it will automatically update all the views to which\nthis controller is\nassigned.\n\nMethods provided by `EventController`\n\n| Name            | Parameters                                                   | Description                                                 |\n|-----------------|--------------------------------------------------------------|-------------------------------------------------------------|\n| add             | CalendarEventData\\\u003cT\\\u003e event                                 | Adds one event in controller and rebuilds view.             |\n| addAll          | List\\\u003cCalendarEventData\\\u003cT\\\u003e\\\u003e events                        | Adds list of events in controller and rebuilds view.        |\n| remove          | CalendarEventData\\\u003cT\\\u003e event                                 | Removes an event from controller and rebuilds view.         |\n| removeAll       | List\\\u003cCalendarEventData\\\u003cT\\\u003e\\\u003e events                        | Removes all event defined in the list and rebuilds the view |\n| clear           |                                                              | Removes events from the controller and rebuilds the view    |\n| removeWhere     | TestPredicate\\\u003cCalendarEventData\\\u003cT\\\u003e\\\u003e test                 | Removes all events for which test returns true.             |\n| update          | CalendarEventData\\\u003cT\\\u003e event, CalendarEventData\\\u003cT\\\u003e updated | Updates event with updated event.                           |\n| getFullDayEvent | DateTime date                                                | Returns the list of full day events stored in controller    |\n| updateFilter    | EventFilter\\\u003cT\\\u003e newFilter                                   | Updates the event filter of the controller.                 |\n| getEventsOnDay  | DateTime date                                                | Returns list of events on `date`                            |\n\nCheck [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/EventController-class.html) for more info.\n\n### Use of `GlobalKey`\n\nUser needs to define global keys to access functionalities like changing a page\nor jump to a\nspecific page or date. Users can also access the `controller` assigned to\nrespected view using the\nglobal key.\n\nBy assigning global keys to calendar views you can access methods and fields\ndefined by state class\nof respected views.\n\nMethods defined by `MonthViewState` class:\n\n| Name           | Parameters     | Description                                                          |\n|----------------|----------------|----------------------------------------------------------------------|\n| nextPage       | none           | Jumps to next page.                                                  |\n| previousPage   | none           | Jumps to the previous page.                                          |\n| jumpToPage     | int page       | Jumps to page index defined by `page`.                               |\n| animateToPage  | int page       | Animate to page index defined by `page`.                             |\n| jumpToMonth    | DateTime month | Jumps to the page that has a calendar for month defined by `month`   |\n| animateToMonth | DateTime month | Animate to the page that has a calendar for month defined by `month` |\n\nCheck [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/MonthViewState-class.html) for more info.\n\n\nMethods defined by `DayViewState` class.\n\n| Name              | Parameters              | Description                                                                                                |\n|-------------------|-------------------------|------------------------------------------------------------------------------------------------------------|\n| nextPage          | none                    | Jumps to next page.                                                                                        |\n| previousPage      | none                    | Jumps to the previous page.                                                                                |\n| jumpToPage        | int page                | Jumps to page index defined by `page`.                                                                     |\n| animateToPage     | int page                | Animate to page index defined by `page`.                                                                   |\n| jumpToDate        | DateTime date           | Jumps to the page that has a calendar for month defined by `date`                                          |\n| animateToDate     | DateTime date           | Animate to the page that has a calendar for month defined by `date`                                        |\n| animateToDuration | Duration duration       | Animate to the `duration` \u003cbr/\u003efrom where we want start the day DayView                                    |\n| animateToEvent    | CalendarEventData event | Animates to the page where a given `event` is and then scrolls to make that `event` visible on the screen. |\n| jumpToEvent       | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen.    |\n\nCheck [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/DayViewState-class.html) for more info.\n\nMethods defined by `WeekViewState` class.\n\n| Name           | Parameters              | Description                                                                                                |\n|----------------|-------------------------|------------------------------------------------------------------------------------------------------------|\n| nextPage       | none                    | Jumps to next page.                                                                                        |\n| previousPage   | none                    | Jumps to the previous page.                                                                                |\n| jumpToPage     | int page                | Jumps to page index defined by `page`.                                                                     |\n| animateToPage  | int page                | Animate to page index defined by `page`.                                                                   |\n| jumpToWeek     | DateTime week           | Jumps to the page that has a calendar for month defined by `week`                                          |\n| animateToWeek  | DateTime week           | Animate to the page that has a calendar for month defined by `week`                                        |\n| animateToEvent | CalendarEventData event | Animates to the page where a given `event` is and then scrolls to make that `event` visible on the screen. |\n| jumpToEvent    | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen.    |\n\nCheck [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/WeekViewState-class.html) for more info.\n\n### Synchronize events between calendar views\n\nThere are two ways to synchronize events between calendar views.\n\n1. Provide the same `controller` object to all calendar views used in the\n   project.\n2. Wrap MaterialApp with `CalendarControllerProvider` and provide controller as\n   argument as defined\n   in [Implementation](#implementation).\n\n### Show only working days in WeekView.\n\nYou can configure week view such that it displays only specific days. ex,\n\n```dart\nWeekView(\n  weekDays: [\n    WeekDays.monday,\n    WeekDays.tuesday,\n    WeekDays.wednesday,\n    WeekDays.thursday,\n    WeekDays.friday,\n  ],\n);\n```\n\nAbove code will create `WeekView` with only five days, from monday to friday.\n\n## Main Contributors\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/vatsaltanna\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25323183?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVatsal Tanna\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sanket-simform\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/65167856?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSanket Kachhela\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ParthBaraiya\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/36261739?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eParth Baraiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ujas-m-simformsolutions\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/76939001?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eUjas Majithiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/faiyaz-shaikh\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/89002539?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFaiyaz Shaikh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/DhavalRKansara\"\u003e\u003cimg \n    src=\"https://avatars.githubusercontent.com/u/44993081?v=4\" width=\"100px;\" \n    alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDhaval Kansara\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/apurva780\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/65003381?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eApurva Kanthraviya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ShubhamJitiya\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/72137369?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShubham Jitiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\u003cbr/\u003e\n\n## Awesome Mobile Libraries\n\n- Check out our other\n  available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n```text\nMIT License\n\nCopyright (c) 2021 Simform Solutions\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimformSolutionsPvtLtd%2Fflutter_calendar_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSimformSolutionsPvtLtd%2Fflutter_calendar_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSimformSolutionsPvtLtd%2Fflutter_calendar_view/lists"}