paged_vertical_calendar 1.1.8 copy "paged_vertical_calendar: ^1.1.8" to clipboard
paged_vertical_calendar: ^1.1.8 copied to clipboard

A simple paginated framework for implementing calendar based interfaces.

📆 Paged Vertical Calendar 📆 #

Pub Pub Pub

A simple paginated framework for implementing calendar based interfaces.

gif showing of package customizability gif showing dat range picker example gif showing paged data example

🔨 How it works #

paged_vertical_calendar is a very minimalistic framework that automatically loads months based on scoll behavior. It provides many useful callbacks to implement your own calendar interactions and builders to customize the calendar as much as you want. Check the example for several implementations like date range selection and paginated data visualisation.

PagedVerticalCalendar has no required parameters and can be dropped in anywhere providing it has a fixed height.

  body: PagedVerticalCalendar(),

📢 functionality #

Several callback are provided to facilitate easy implementation of any calendar interactions

  minDate: 365)),
  maxDate: 365)),
  initialDate: 3)),
  invisibleMonthsThreshold: 1,
  startWeekWithSunday: true,
  onMonthLoaded: (year, month) {
    // on month widget load 
  onDayPressed: (value) {
    // on day widget pressed   
  onPaginationCompleted: (direction) {
    // on pagination completion
  • onMonthLoaded is a callback that fires for every month added to the list. When this function fires can be altered by setting the invisibleMonthsThreshold pararamter.

  • invisibleMonthsThreshold decides how many months outside of the widgets view should be loaded. In other words, how many months should be preloaded before the user reaches that scroll position. It defaults to 1.

  • onDayPressed Is a simple onPressed callback but also provides the DateTime of the day that has been pressed.

  • If your app is localized for countries where the week starts on Sunday, you can flip startWeekWithSundayto true.

  • If a minDate is provided the calendar will stop scrolling up at that date. make sure minDate < maxDate.

  • If a maxDate is provided the calendar will stop scrolling down at that date. make sure maxDate > minDate.

  • If an initialDate is provided the calendar start by displaying this date (otherwise make sure minDate < initialData < maxDate.

  • Finally when a minDate or maxDate is provided to the PagedVerticalCalendar, the onPaginationCompleted callback can be used. it will return a PaginationDirection to indicate what side of the calendar has been reached.

🎨 Customization #

PagedVerticalCalendar provides default calendar styling, but these can be fully customized. To do so, several builders are provided:

  monthBuilder: (context, month, year) {
    // provide a month header widget
  dayBuilder: (context, date) {
    // provide a day widget
  listPadding: // provide EdgeInset value
  • monthBuilder provides the year and month as integers. this builder has to return a widget that will form the header of ever month. the intl package works well here for date formatting.

  • dayBuilder provides the day as a DateTime. this builder wil be called for every day. You usually want to provide at least a text widget with the current day number.

  • listPadding can be provided in case you need the list to have padding.

👋 Get Involved #

If this package is useful to you please 👍 on and ⭐ on github. If you have any Issues, recommendations or pull requests I'd love to see them!

pub points



A simple paginated framework for implementing calendar based interfaces.

Repository (GitHub)
View/report issues


API reference


Apache-2.0 (license)


flutter, infinite_scroll_pagination


Packages that depend on paged_vertical_calendar