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 !

Overview

Flutter Week View

Likes Popularity Pub points

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 : FlutterDayView and FlutterWeekView. 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 FlutterDayView and FlutterWeekView :

  • 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.
  • onDayBarTappedDown Provides a tapped down callback for the day bar.

Flutter day view

Here are the specific options of FlutterDayView :

  • date The widget date.
  • dayBarStyle The day bar style.

Flutter week view

Here are the specific options of FlutterWeekView :

  • dates The widget dates.
  • dayViewStyleBuilder The function that allows to build a Day View style according to the provided date.
  • dayBarStyleBuilder The function that allows to build a Day Bar style according to the provided date.

Please note that you can create a FlutterWeekView instance using a builder. All previous options are still available but you don't need to provide the dates list. However, you need to provide a DateCreator (and a date count if you can, if it's impossible for you to do it then scrollToCurrentTime will not scroll to the current date).

Contributions

You have a lot of options to contribute to this project ! You can :

Comments
  • Blocks doesn't change places after changing hourRowHeight

    Blocks doesn't change places after changing hourRowHeight

    Hello

    There is a problem when changing hourRowHeight, the blocks doesn't change to fit the time. So the time starts at 6 AM after changing the hight it still in the old place of the previous hight and that would be now 3 AM, I've tried to rebuild, and building after cleaning but it doesn't work.

    This is before changing This is before changing

    This is after changing This is after changing

    Smartphone:

    • Device: S9+
    • OS: Android 10
    bug 
    opened by iMajeed16 18
  • WeekView: Events that don't overlap the current day aren't displayed

    WeekView: Events that don't overlap the current day aren't displayed

    It appears that events in WeekView aren't displayed unless at least some part of the event occurs during the current day.

    To Reproduce Steps to reproduce the behavior:

    1. Open the example app.
    2. Add an event not during the current day. Here's what I changed.
    3. Run the app and scroll to the day of the event.
    4. Observe that the event is not displayed.

    Expected behavior That all events occurring on the dates displayed by the WeekView will be displayed, regardless of whether they overlap the current date.

    Thanks for making this library by the way! 🙂

    bug 
    opened by mileskrell 12
  • Red indicator indicates wrong current time

    Red indicator indicates wrong current time

    To Reproduce Steps to reproduce the behavior:

    1. Flutter run example
    2. Click on 'Demo Day View'
    3. Red indicator does not match current time on my OS/timezone
    4. See error

    Using Android emulator on Mac OS. Screen Shot 2020-02-02 at 12 39 42 PM

    bug help wanted 
    opened by zephyo 11
  • Need tap gesture on tap of time slot

    Need tap gesture on tap of time slot

    Is your feature request related to a problem? Please describe. When user want to add event, user always have to select date and time, it will be good to have gesture detector on time slot and hight light the same slot on tap on basis of bool and color.

    Describe the solution you'd like when user tap inside 1 hr - 2hrs box it will call on tap method with start datetime as parameter

    Describe alternatives you've considered No alternative

    enhancement 
    opened by manishvill 8
  • Is it possible to change the width of WeekView then rebuild the widget?

    Is it possible to change the width of WeekView then rebuild the widget?

    Is your feature request related to a problem? Please describe. I want to add a button to change the width of the dayview in WeekView class. I found out that dayViewWidth property in WeekViewStyle is final, which I could not change once it initialized.

    Is there any advice about this one?

    Thanks

    enhancement 
    opened by nadhirfr 7
  • Initialtime in weekview not working after state change in stateful widget

    Initialtime in weekview not working after state change in stateful widget

    Within a stateful widget, Initialtime has no function when the Weekview is updated after a state change.

    Run the following code and then wipe from today to the previous day. Then click on the DayBar.

    import 'package:flutter/material.dart';
    import 'package:flutter_week_view/flutter_week_view.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      DateTime day = DateTime.now();
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: WeekView(
              initialTime: day,
              onDayBarTappedDown: (_) => setState(() {
                day = day.add(Duration(days: 7));
              }),
              dates: [
                day.subtract(
                  Duration(days: 1),
                ),
                day,
                day.add(
                  Duration(days: 1),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    The Weekview first shows today's day, which is stored in a state variable. Clicking on the DayBar moves the day forward by one week. I would have expected the day displayed to be today plus one week, however the day that corresponds to the previously selected index is displayed. That means if I was on the previous day, the new Weekview is on the previous day plus one week instead of today's day plus one week.

    Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.685] flutter_week_view: 1.0.0+1

    bug 
    opened by nanosekun-de 5
  • Alternative to background canvas painter

    Alternative to background canvas painter

    Hi :)

    I'm using the version 0.2.1+6 in my app and i want to update to the package latest version but i was using the eventsColumnBackgroundPainter property in DayView and now this property doest not exists and now i don't find a alternative since the remove of the property.

    Previously i created a inheritance with the EventsColumnBackgroundPainter class because i needed a padding left in content.

    My code:

    class CalendarDayViewBackgroundPainter extends EventsColumnBackgroundPainter {
      final double left;
    
      CalendarDayViewBackgroundPainter({
        backgroundColor,
        rulesColor,
        this.left = 0 // This is my change
      }) : super (
        backgroundColor: backgroundColor,
        rulesColor:rulesColor,
      );
    
      @override
      void paint(Canvas canvas, Size size) {
        if (backgroundColor != null) {
          canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint()..color = backgroundColor);
        }
    
        if (rulesColor != null) {
          for (int hour = 1; hour < 24; hour++) {
            double topOffset = topOffsetCalculator(hour);
            Paint paint = Paint();
            paint.color = rulesColor;
            paint.strokeWidth = 1;
            canvas.drawLine(Offset(left, topOffset), Offset(size.width, topOffset), paint);
          }
        }
      }
    }
    

    Is there an alternative to help me?

    Thank you.

    enhancement question 
    opened by caiogranero 5
  • This title of event won't show when the event's duration is short.

    This title of event won't show when the event's duration is short.

    Describe the bug A clear and concise description of what the bug is.

    To Reproduce Steps to reproduce the behavior:

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: [e.g. iOS]
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    bug 
    opened by leungvanice 5
  • Be able to create custom horizontal rule and time inidicator with builders

    Be able to create custom horizontal rule and time inidicator with builders

    I'm trying to customize the horizontal hour displayed in the left and the indicator. I want to be able to give my own Widget builder as parameters for creating specific createCurrentTimeRule and createCurrentTimeCircle to match my specific UI.

    Is there a way to do this ?

    enhancement 
    opened by Dekhnar 4
  • OnTap doesn't work reliably

    OnTap doesn't work reliably

    When using different onTap() on different events, the execution of the method is random. For example I have 3 different events and let it print 1 (for event 1), 2 (for event 2) or 3 (for event 3), I don't get a print of 1 every time I press it, but a variation of 1 or 2 or 3.

    bug 
    opened by ghost 4
  • Timescala doesn't zoom with content

    Timescala doesn't zoom with content

    Describe the bug When zooming on DayView, the time scala on the left side doesn't scoll too

    To Reproduce Steps to reproduce the behavior:

    1. Build DayView
    2. Try to zoom

    Expected behavior Timescala should zoom the same way then content.

    Tablet:

    • OS: Android
    • Version 9
    bug duplicate 
    opened by kuemme01 4
  • Need current date of scrolled position

    Need current date of scrolled position

    How can we get current date in user swipe left or right, currently there is no way to get current date. I have checked you are using Listview.builder) you shold use pageview or any other which help out to fix this and also for scroll single position on swipe

    enhancement 
    opened by vishalvishvakarma1111 3
  • Option to add an horizontal scrollbar

    Option to add an horizontal scrollbar

    Is your feature request related to a problem? Please describe. In Desktop, horizontal scrolling isn't possible if you only have the mouse (not a touchpad) and the widget overextends the width of the screen.

    Describe the solution you'd like Add a a flag which renders an horizontal scrollbar in the widget.

    enhancement 
    opened by luistrivelatto 0
  • Add Ripple effect (using InkWell) to the events

    Add Ripple effect (using InkWell) to the events

    Describe the problem

    When the user taps on an event, there is no visual feedback. I would suggest adding a ripple effect, as it's used on most clickable surfaces in Material Design.

    A possible solution

    Wrapping the event widgets with an InkWell instead of the currently used GestureDetector would probably solve this.

    Here is the visual difference between the two: Visual Difference

    enhancement 
    opened by dJani97 0
  • Setting inScrollableWidget to false throws error.

    Setting inScrollableWidget to false throws error.

    Describe the bug I want to put WeekView widget inside a Column, and make scrollable the whole column. So I set inScrollableWidget: false But get this error: Null check operator used on a null value

    Here in the image I will show the point where error throws. (Source code of your week_view.dart) image

    Steps to reproduce the behavior:

    1. Set WeekView's inScrollableWidget property to false
    2. See error
    bug 
    opened by hmarat 0
  • Ability to scroll by one item in WeekView.

    Ability to scroll by one item in WeekView.

    When you scroll week view's current day, it can scroll by more than one item(maybe 2, 3, or even 4). So it would be cool to set an option, so user could only scroll by one item (previous day and next day). Thank you.

    enhancement 
    opened by hmarat 1
Owner
Hugo Delaunay
💻 Yet Another Developer
Hugo Delaunay
SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

SKAlertDialog A highly customizable, powerful and easy-to-use alert dialog for Flutter. GIF Screenshots SKAlertDialog Basic Alert Alert with buttons A

Senthil_Kumar 7 May 18, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
A highly customizable multiple selection widget with search functionality.

A highly customizable multiple selection widget with search functionality.

null 5 Dec 19, 2022
A highly customizable toggle switch with a loading state.

A highly customizable toggle switch with a loading state.

null 6 Dec 30, 2022
Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff

null 21 Nov 4, 2022
Animated, highly customizable, open-source Flutter gauge indicator widgets

Animated, highly customizable, open-source Flutter gauge indicator widgets. They use renderbox under the hood, thus ensuring high performance.

HTD Health 6 Jun 10, 2022
Horizontal_calendar - Horizontal week view calendar pub for Flutter.

horizontal_calendar Easy to use, highly customizable horizontal calendar. Features Custom date range (First & Last Date) Single or up to x days select

SoluteLabs 74 Dec 19, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Flutter中国开源项目 296 Dec 28, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget that displays a collection of dispersed and non-overlapping children

flutter_scatter A widget that displays a collection of dispersed and non-overlapping children. Can be used to create word clouds: Features Built-in de

Romain Rastel 85 Sep 27, 2022
Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

Furkan Tektas 375 Nov 20, 2022
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Customizable Flutter widget which syncronize ScrollView with PageView as tabs

scrollable_list_tab_scroller Customizable Flutter widget which syncronize ScrollView with PageView as tabs. Create a custom page view as tabs which sy

Railson Ferreira de Souza 4 Dec 21, 2022
A Flutter widget which synchronize a ScrollView and a custom tab view

scrollable_list_tabview A Flutter widget which synchronize a ScrollView and a custom tab view. The main idea is to create a custom tab view synchroniz

Aswanath C K 0 Apr 12, 2022
A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Prem Adithya 9 Jul 13, 2022
Display simple blurry dialog popup for flutter

Blurry Dialog Features Display simple blurry dialog popup Offer built-in themes Possibility to create you custom dialog button click handler callbacks

Kouki Badr 7 Dec 18, 2022
The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

flutter_otp_text_field flutter_otp_text_field The flutter_otp_text_field package for flutter is a TextField widget that allows you to display differen

David-Legend 30 Nov 8, 2022
A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog. This widget extend TextField and has a similar behavior as TextFormField.

m3uzz Soluções em TI 82 Jan 6, 2023