Time planner

Pub Version Awesome Flutter

A beautiful, easy to use and customizable time planner for flutter mobile 📱, desktop 🖥 and web 🌐

This is a widget for show tasks to user on a time table.
Each row show an hour and each column show a day but you can change the title of column and show any things else you want.

Screenshots

Mobile Dark
Mobile Dark
Desktop Web
Desktop Web

Demo

You can see web demo here: https://jamalianpour.github.io/time_planner_demo

Usage

1. add dependencies into you project pubspec.yaml file
dependencies:
  time_planner: ^0.1.2+1
2. import time planner lib
import 'package:time_planner/time_planner.dart';
3. use time planner
List<TimePlannerTask> tasks = [
  TimePlannerTask(
    // background color for task
    color: Colors.purple,
    // day: Index of header, hour: Task will be begin at this hour
    // minutes: Task will be begin at this minutes
    dateTime: TimePlannerDateTime(day: 0, hour: 14, minutes: 30),
    // Minutes duration of task
    minutesDuration: 90,
    // Days duration of task (use for multi days task)
    daysDuration: 1,
    onTap: () {},
    child: Text(
      'this is a task',
      style: TextStyle(color: Colors.grey[350], fontSize: 12),
    ),
  ),
];

TimePlanner(
  // time will be start at this hour on table
  startHour: 6,
  // time will be end at this hour on table
  endHour: 23,
  // each header is a column and a day
  headers: [
    TimePlannerTitle(
      date: "3/10/2021",
      title: "sunday",
    ),
    TimePlannerTitle(
      date: "3/11/2021",
      title: "monday",
    ),
    TimePlannerTitle(
      date: "3/12/2021",
      title: "tuesday",
    ),
  ],
  // List of task will be show on the time planner
  tasks: tasks,
),

Multi days task

You can add multi days task with daysDuration minimum and default value for this argument is 1 and result look like this :

MultiDay

Style

you can change style of time planner with TimePlannerStyle :

style: TimePlannerStyle(
  backgroundColor: Colors.blueGrey[900],
  // default value for height is 80
  cellHeight: 60,
  // default value for width is 90
  cellWidth: 60,
  dividerColor: Colors.white,
  showScrollBar: true,
  horizontalTaskPadding: 5,
  borderRadius: const BorderRadius.all(Radius.circular(8)),
),

when time planner widget loaded it will be scroll to current local hour and this option is true by default, you can turn this off like this:

currentTimeAnimation: false,

Note

If you use desktop or web platform and want users to be able to move with the mouse in the time planner, add this code to the code:

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

Fill free to fork this repository and send pull request 🏁👍

Medium post

Libraries

time_planner