planner.js
A modular Javascript planner that uses stickers to represent your information... like a traditional planner!
Built with Wheelie!
It's small enough (minified):
dist/css/planner.css: 5.5 kBdist/js/planner.js: 45 kB
Installation
Install Planner.js dependency through bower:
$ bower install plannerjs --saveThen, add the CSS and the JS in your HTML as follows:
<head>
<!-- ... -->
<link rel="stylesheet" href="bower_components/plannerjs/dist/css/planner.css"/>
</head>
<body>
<!-- ... -->
<script src="bower_components/plannerjs/dist/js/planner.js"></script>
</body>Usage
Planner.js offers two different way to initialize your planner.
Using data attributes, you can render the planner using just an HTML node:
<div data-planner="container"></div>Otherwise, you can initialize the planner from your Javascript as follows:
<div id="planner"></div>(function (document) {
'use strict';
// get your HTML element
var element = document.querySelector('.js-planner');
// provide options if needed
var options = {
plugins: [
'slider',
'collision',
'mobile',
'interaction',
'hourline'
]
};
var planner = new Planner(element, options); // done!
})(document);Requirements
This project uses the following dependencies:
- Handlebars for template rendering (the runtime it's enough)
- Normalize CSS for CSS normalization
- ds.js for data structures like
SetandHashMap(not available in ES5) - messengerjs for pub/sub paradigm used in the event system
All dependencies are really small and already included in the minified version.
Browser support
A detailed compatibility table will be published soon. The following is the current support:
- Internet Explorer 11 (to be verified)
- Google Chrome
- Safari
- Mozilla Firefox
Roadmap
We're working hard to create a really nice component and this is the future we see for this widget:
- use ES6 modules to provide a better code experience :)
- write tests to have a nice code coverage and use cases coverage
- provide the list of available options
- provide the list of public APIs to manipulate the planner programmatically
- extend Internet Explorer support (IE10+)
Feel free to make your proposals!
License
Planner.js is released under the terms of the BSD license. Full details in LICENSE file.
Changelog
0.1.0 [2015-10-29]
New features
- build system migration towards Gulp
- added Wheelie task registry
- hourline plugin offers show/hide/toggle methods for displaying/hiding the DOM element
- hourline plugin adds the passing time effect and appends new styles to the card
- hourline plugin provides a method to reset the viewport on the current time
Bugfixes
- users selection is disabled on the header and on the side bar
- arrows are not added to the main template until needed
0.0.4 [2015-09-16]
Bugfixes
text-overflow: ellipsisworks as expected
0.0.3 [2015-03-03]
Bugfixes
- fixed column width to fit best desktop and mobile sizes
0.0.2 [2015-01-21]
Bugfixes
- disabled user selection for iOS devices
0.0.1 [2015-01-19]
First pre-release!
Features
- supports time planning