a time planner for flutter to show task on table

Overview

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.0.3
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: 24,
  // 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,
),

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

currentTimeAnimation: false,

Fill free to fork this repository and send pull request 🏁 πŸ‘

Medium post

Comments
  • Let's add horizontal padding around each task in the time planner

    Let's add horizontal padding around each task in the time planner

    My Suggestion:

    • [x] Add horizontal padding for each task.
    • [x] Fix the android example app.

    Below is a code that has been added in the time_planner_task.dart file to achieve the horizontal padding

    Positioned( ... 
       child: SizedBox(
           width: config.cellWidth!.toDouble() - config.horizontalTaskPadding!,
            child: Padding(
                 padding: EdgeInsets.only(left: config.horizontalTaskPadding!.toDouble()),
              child: Material(...)
            ), // Padding
        ), // SizeBox
    ) // Positioned
    

    The example app has been fully migrated to Flutter V2 and it runs perfectly fine.

    opened by kashua14 3
  • Added a feature to display the time strings either in 24-hour or am/p…

    Added a feature to display the time strings either in 24-hour or am/p…

    #9 ... I added a feature to show time in either 24-hour or am/pm format (on the time column of the TimePlanner widget). Note that this formatting of the time strings has nothing to do with the internal logic of how the package handles time. The time strings are formatted just before being displayed to the user. In all parts of the package, 'hour' is still an integer from 0 to 23. Time strings are formatted by default in am/pm format. To use the 24 hour format, pass the 'use24HourFormat' argument in the TimePlanner constructor.

    opened by sami-bre 2
  • Refactor based on `flutter_lints`

    Refactor based on `flutter_lints`

    Hi amazing developer,

    This pull request is related to https://github.com/Jamalianpour/easy_sidemenu/pull/8

    I have made the following fixes.

    • Added flutter_lints to pubspec.yaml
    • Added analysis_options.yaml
    • Fixed some lines based on flutter_lints suggestions (Not destructive)
    • Renamed files based on flutter_lints suggestions (Not destructive)
    • Fixed typo

    Please merge it if it's okay :)

    Thank you.

    opened by myConsciousness 1
  • Configure WhiteSource Bolt for GitHub

    Configure WhiteSource Bolt for GitHub

    Welcome to WhiteSource Bolt for GitHub! This is an onboarding PR to help you understand and configure settings before WhiteSource starts scanning your repository for security vulnerabilities.

    :vertical_traffic_light: WhiteSource Bolt for GitHub will start scanning your repository only once you merge this Pull Request. To disable WhiteSource Bolt for GitHub, simply close this Pull Request.


    What to Expect

    This PR contains a '.whitesource' configuration file which can be customized to your needs. If no changes were applied to this file, WhiteSource Bolt for GitHub will use the default configuration.

    Before merging this PR, Make sure the Issues tab is enabled. Once you merge this PR, WhiteSource Bolt for GitHub will scan your repository and create a GitHub Issue for every vulnerability detected in your repository.

    If you do not want a GitHub Issue to be created for each detected vulnerability, you can edit the '.whitesource' file and set the 'minSeverityLevel' parameter to 'NONE'.


    :question: Got questions? Check out WhiteSource Bolt for GitHub docs. If you need any further assistance then you can also request help here.

    opened by mend-bolt-for-github[bot] 0
  • Time Planner Title

    Time Planner Title

    Hello

    Could you fix the Time Planner Title To Accept Widget rather than Text `class TimePlannerTitle extends StatelessWidget { /// Title of each day, typically is name of the day for example sunday /// /// but you can set any things here final Widget title;

    /// Text style for title final TextStyle? titleStyle;

    /// Date of each day like 03/21/2021 but you can leave it empty or write other things final Widget subTitle;

    /// Text style for date text final TextStyle? dateStyle;

    /// Title widget for time planner const TimePlannerTitle({ Key? key, required this.title, required this.subTitle, this.titleStyle, this.dateStyle, }) : super(key: key);

    @override Widget build(BuildContext context) { return SizedBox( height: 140, width: config.cellWidth!.toDouble(), child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ title, const SizedBox( height: 3, ), subTitle, ], ), ), ); } }`

    Example TimePlannerTitle( title: Container( height: 100, width: 100, decoration: const BoxDecoration( shape: BoxShape.circle, image: DecorationImage( fit: BoxFit.cover, image: NetworkImage("https://prod-images.tcm.com/Master-Profile-Images/LeonardoDiCaprio.jpg", scale: 1), ), ),),subTitle: const Text( "Leonardo Dicaprio", textAlign: TextAlign.center, ), ),

    opened by INVOPOS 1
Releases(0.1.0)
  • 0.1.0(Jun 25, 2022)

    What's Changed

    • Add BorderRadius for tasks to style

    • Add horizontal padding around each task in the time planner by @kashua14 https://github.com/Jamalianpour/time_planner/pull/7

    • Refactor code by @myConsciousness - https://github.com/Jamalianpour/time_planner/pull/5

    • Fix double Scrollbar for times

    Full Changelog: https://github.com/Jamalianpour/time_planner/compare/0.0.2...0.1.0

    Source code(tar.gz)
    Source code(zip)
  • 0.0.2+1(Mar 28, 2021)

Datetime picker formfield - A Flutter widget that wraps a TextFormField and integrates the date and/or time picker dialogs.

DateTimeField A TextFormField that emits DateTimes and helps show Material, Cupertino, and other style picker dialogs. Example See the example tab (ex

Jacob Phillips 182 Dec 1, 2022
A flutter date time picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Realank 559 Dec 26, 2022
A day night time picker for Flutter. Beautiful day and night animation with Sun and Moon assets.

DayNightTimePicker A day night time picker for Flutter with Zero Dependencies. Default style: IOS style: View it on pub.dev Installation Add to pubspe

Subhamay Dutta 68 Dec 29, 2022
Flutter Date & Time Range Picker

F-DateTimeRangePicker Date and Time Range Picker for Flutter Installing: dependencies: f_datetimerangepicker: ^0.2.0 Using: import 'package:f_datet

Long Phan 20 Jan 18, 2022
A DateTime picker that lets user to select a date and the time, with start & end as a range

Omni DateTime Picker A DateTime picker that lets user to select a date and the time, with start & end as a range. Screenshots Getting started Add this

null 17 Dec 29, 2022
Calendar widget for flutter

Calendar Shows a scrolling calendar list of events. This is still relatively basic, it always assumes that the getEvents returns the entire list of ca

null 223 Dec 19, 2022
Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly customizable.

flutter_calendar_carousel Calendar widget for flutter that is swipeable horizontally. This widget can help you build your own calendar widget highly c

dooboolab 750 Jan 7, 2023
Highly customizable, feature-packed calendar widget for Flutter

Table Calendar Highly customizable, feature-packed Flutter Calendar with gestures, animations and multiple formats. Table Calendar with custom styles

Aleksander WoΕΊniak 1.5k Jan 7, 2023
A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

A Flutter package for using Jalali (Shamsi, Solar, Persian or Jalaali) calendar. You can convert, format and manipulate Jalali and Gregorian (Miladi) dates.

Amirreza Madani 63 Dec 21, 2022
A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker.

JMA Consulting 9 Mar 12, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline.

DatePickerTimeline Flutter Date Picker Library that provides a calendar as a horizontal timeline. How To Use Import the following package in your dart

LiLi 0 Oct 25, 2021
Flutter Cupertino Date Picker

Flutter Cupertino Date Picker [pub packages] | δΈ­ζ–‡θ―΄ζ˜Ž Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Ryuuzaki 0 Nov 9, 2021
Easy to use and beautiful calendar strip component for Flutter.

Flutter Calendar Strip Easy to use and beautiful calendar strip component for Flutter. Awesome celender widget If this project has helped you out, ple

Siddharth V 176 Dec 14, 2022
A Flutter package allows you to easily implement all calendar UI and calendar event functionality. πŸ‘ŒπŸ”πŸŽ‰

calendar_view A Flutter package allows you to easily implement all calendar UI and calendar event functionality. For web demo visit Calendar View Exam

Simform Solutions 219 Dec 22, 2022
Flutter Date Picker Library that provides a calendar as a horizontal timeline

Flutter Date Picker Library that provides a calendar as a horizontal timeline.

Vivek Kaushik 214 Jan 7, 2023
Calendar widget library for Flutter apps.

Calendarro Calendar widget library for Flutter apps. Offers multiple ways to customize the widget. Getting Started Installation Add dependency to your

Adam Styrc 97 Nov 30, 2022
Flutter package to create a day date scroller

scrolling_day_calendar A flutter calendar package to allow users to scroll through given dates either by swiping left and right or pressing the arrows

null 8 Jul 12, 2020
Flutter Inline Calendar

inline_calendar An inline calendar flutter package inspired by outlook app. It also supports Jalali/Shamsi calendar. Uses theme and locale of context

omid habibi 3 Oct 21, 2022
A calendar widget for Flutter.

flutter_calendar A calendar widget for Flutter Apps. Borrowed DateTime utility functions from the Tzolkin Calendar web element. Usage Add to your pubs

AppTree Software, Inc 336 Sep 6, 2022