AngularJS module : Simple scheduler on a timeline
JavaScript HTML CSS
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
example Hotfix : current events color for example CSS Feb 12, 2017
src HotFix: using new paths of src in example Feb 12, 2017
.editorconfig Refactoring project to use Bower for install Feb 12, 2017
.gitignore Refactoring project to use Bower for install Feb 12, 2017
CHANGELOG.md HotFix: using new paths of src in example Feb 12, 2017
LICENSE Initial commit Jul 30, 2016
README.md Refactoring project to use Bower for install Feb 12, 2017
bower.json
index.html HotFix: using new paths of src in example Feb 12, 2017

README.md

Plantt

AngularJS module : Simple daily scheduler on a timeline

Check the live demo (kept updated) here : code.polosson.com/Plantt/

Preview, daily mode:

Screenshot of daily scheduler

Preview, hourly mode:

Screenshot of hourly scheduler

Features

This angular widget takes a list of "events" (i.e. items defined in time by a start date and an end date) to display them on a daily (or hourly) timeline. Among many other features, you can drag & drop them to redefine their dates.

Interface

  • Daily grid (one column = one day) with numbers (day in month) and month-year labels in header
  • Hourly grid (same as daily but with sub-columns, one per hour) with numbers (hour in day)
  • Automatic vertical positioning to avoid collisions
  • Current day and current events highlighted with CSS classes
  • Custom CSS allowed for all aspects of the UI: grid, events... (see plantt.css for examples)
  • Drag & drop support (for desktop only at the moment) to visually move and resize events in timeline
  • Fully independant of the controller, allowing you to make anything you want with this widget !
  • View manipulation: zoom in & out, move left or right, set custom start and end dates with a bunch of scope-accessible functions
  • Emits custom DOM events to handle callbacks for every UI actions (daySelect, periodSelect, eventMove, eventScale, eventOpen, planttError), allowing you to make your own checks before storing new dates of the event, and save it on your server using ajax for example
  • Automatic lock of current and past events (with possible secure days margin)
  • Dates Internationalization really simple with ng-locale (i18n)

Available interactions

  • Interface
    • Click & drag the grid header to move the view left or right
  • Add events
    • Double-click on the grid to add an event on a single day
    • Click & drag on the grid to add an event on the corresponding period
  • Change events
    • Click & drag an event to move it on the timeline and set its dates
    • Click & drag event's handles to extend or shrink an event and set its dates
  • Other event-related actions
    • Double-click an event to (make something you want)

Note: for the events interactions to be effective, they must be processed in callbacks defined in controller, using Plantt's custom DOM events. See js/example.js for examples use-cases, but you can make anything you want in your own controller!

Wiki

See here.

Known limitations

  • Only one scheduler per web page. Else, strange behaviour will happen (duplicates when adding events for instance)
  • Events stacking (Y axis) is limited to a defined number of lines (but it's a scope setting that can be modified in controller)
  • In hourly mode, if event's start or end hour are outside the day's limits (before first hour of day or after end hour of day), they go beyond and are displayed on previous (or next) day.
  • In houlry mode again, when you grab an event which ends after the last displayed day, its end date will be truncated (same for start date if over the first displayed day).

Documentation

Be sure to read the documentation for full details on scope variables, methods and custom DOM events.

Licence

© Polosson 2016 - MIT Licence. You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, at the condition you include this copyright notice and a copy of the permission notice (see LICENCE file).

Have fun ! :)