https://github.com/jamalianpour/time_planner
a time planner for flutter to show task on table
https://github.com/jamalianpour/time_planner
dart flutter table time-planner
Last synced: 26 days ago
JSON representation
a time planner for flutter to show task on table
- Host: GitHub
- URL: https://github.com/jamalianpour/time_planner
- Owner: Jamalianpour
- License: mit
- Created: 2021-03-22T16:12:24.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-28T15:00:14.000Z (over 1 year ago)
- Last Synced: 2025-03-30T19:05:17.634Z (about 1 month ago)
- Topics: dart, flutter, table, time-planner
- Language: Dart
- Homepage: https://pub.dev/packages/time_planner
- Size: 3.23 MB
- Stars: 230
- Watchers: 8
- Forks: 63
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Time planner
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 |
| -------------------------------- | ---------------------------------- |
|  |  |
| Desktop | Web |
| ---------------------------------- | -------------------------- |
|  |  |
## Demo
You can see web demo here: [https://jamalianpour.github.io/time_planner_demo](https://jamalianpour.github.io/time_planner_demo)
## Usage
##### 1. add dependencies into you project pubspec.yaml file
```yaml
dependencies:
time_planner: ^0.1.2+1
```
##### 2. import time planner lib
```dart
import 'package:time_planner/time_planner.dart';
```
##### 3. use time planner
```dart
List 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),
),
),
];
```
```dart
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 :
### Style
you can change style of time planner with `TimePlannerStyle` :
```dart
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:
```dart
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:
```dart
class MyCustomScrollBehavior extends MaterialScrollBehavior {
// Override behavior methods and getters like dragDevices
@override
Set 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](https://yaus.ir/4n7MeZ)