Flutter Week View #

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Flutter Week View is highly inspired by Android Week View.

Getting Started #

Getting started with Flutter Week View is very straight forward. You have the choice between two widgets : DayView and WeekView. Use the first one to display a single day and use the second one to display multiple days.

Example #

If you want a real project example, you can check this one on Github.

Day View #

Snippet :

// Let's get two dates :
DateTime now = DateTime.now();
DateTime date = DateTime(now.year, now.month, now.day);

// And here's our widget !
return DayView(
  date: now,
  events: [
    FlutterWeekViewEvent(
      title: 'An event 1',
      description: 'A description 1',
      start: date.subtract(Duration(hours: 1)),
      end: date.add(Duration(hours: 18, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 2',
      description: 'A description 2',
      start: date.add(Duration(hours: 19)),
      end: date.add(Duration(hours: 22)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 3',
      description: 'A description 3',
      start: date.add(Duration(hours: 23, minutes: 30)),
      end: date.add(Duration(hours: 25, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 4',
      description: 'A description 4',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 5',
      description: 'A description 5',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
  ],
  style: const DayViewStyle.fromDate(
    date: now,
    currentTimeCircleColor: Colors.pink,
  ),
);

Result :

Week view #

Snippet :

// Let's get two dates :
DateTime now = DateTime.now();
DateTime date = DateTime(now.year, now.month, now.day);

// And here's our widget !
return WeekView(
  dates: [date.subtract(Duration(days: 1)), date, date.add(Duration(days: 1))],
  events: [
    FlutterWeekViewEvent(
      title: 'An event 1',
      description: 'A description 1',
      start: date.subtract(Duration(hours: 1)),
      end: date.add(Duration(hours: 18, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 2',
      description: 'A description 2',
      start: date.add(Duration(hours: 19)),
      end: date.add(Duration(hours: 22)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 3',
      description: 'A description 3',
      start: date.add(Duration(hours: 23, minutes: 30)),
      end: date.add(Duration(hours: 25, minutes: 30)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 4',
      description: 'A description 4',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
    FlutterWeekViewEvent(
      title: 'An event 5',
      description: 'A description 5',
      start: date.add(Duration(hours: 20)),
      end: date.add(Duration(hours: 21)),
    ),
  ],
);

Result :

Options #

Common options #

Here are the options that are available for both DayView and WeekView :

events Events to display.
style Allows you to style your widget. A lot of different styles are available so don't hesitate to try them out !
hoursColumnStyle Same, it allows you to style the hours column on the left.
controller Controllers allow you to manually change the zoom settings.
inScrollableWidget Whether to put the widget in a scrollable widget (disable if you want to manage the scroll by yourself).
minimumTime The minimum hour and minute to display in a day.
maximumTime The maximum hour and minute to display in a day.
initialTime The initial hour and minute to put the widget on.
userZoomable Whether the user is able to (un)zoom the widget.
currentTimeIndicatorBuilder Allows you to change the default current time indicator (rule and circle).
onHoursColumnTappedDown Provides a tapped down callback for the hours column. Pretty useful if you want your users to add your own events at a specific time.
onBackgroundTappedDown Provides a similar callback as the above, but when the user clicks on the background (an empty region of the calendar).
onDayBarTappedDown Provides a tapped down callback for the day bar.
dragAndDropOptions Enables drag-and-drop of events.
resizeEventOptions Enables resizing events, by dragging the bottom of the event up/down.

Flutter day view #

Here are the specific options of DayView :

date The widget date.
dayBarStyle The day bar style.