https://github.com/polo2ro/teleperiod
period picker on a time line with working hours
https://github.com/polo2ro/teleperiod
javascript period timeline ui
Last synced: over 1 year ago
JSON representation
period picker on a time line with working hours
- Host: GitHub
- URL: https://github.com/polo2ro/teleperiod
- Owner: polo2ro
- Created: 2015-01-05T21:29:37.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2022-05-25T23:44:28.000Z (about 4 years ago)
- Last Synced: 2024-04-24T13:55:14.389Z (over 2 years ago)
- Topics: javascript, period, timeline, ui
- Language: JavaScript
- Size: 343 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
teleperiod
==========
period picker on a time line with working hours
Technical overview
------------------
The calendar is created in [SVG](http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) using [d3 js](http://d3js.org/) toolkit. This can be added in any web page and allow to retreive the periods of the selection in a javascript object.
It lazy load events and working hours while browsing on dates.
Installation as a [bower](http://bower.io/) componenent:
bower install teleperiod
An angular version is available: [angular-teleperiod](https://github.com/polo2ro/angular-teleperiod)
Features
--------
* Select one period on a calendar view
* Display mutiple timelines for references (ex: other pepoles availability, scolar vacations periods ...)
* Get the duration of the selection period according to working schedule and special events
Usage
-----
Add to page teleperiod.min.js and teleperiod.min.css
create a svg placeholder in page:
```html
```
Initialize teleperiod object with options:
```javascript
var teleperiod = new Teleperiod({
object: d3.select('#teleperiod_placeholder'),
workingtimes: function(interval) {
},
events: function(interval) {
},
onUpdated: function(selection) {
}
});
```
Availables options:
Property | Description
------------------- | -------------
object | a D3 html element, it will be used as placeholder to load the graph. This option is mandatory
workingtimes | A function called to load the working times on the specified interval. The function must return a Q promise. This option is mandatory
events | A function called to load some events on the specified interval. The function must return a Q promise. This option is mandatory
onUpdated | A function called when the selection is modified, the selection is given as a parameter. This option is mandatory
focusDate | A Date object, the graph will be open at this date, if not set, the default value is the current date
selectedEvents | array of events UID, on loaded, the events will be converted to a modifiable selection
dateLocale | A string to represent the locale used in dates functions, default is 'FR_fr'
width | An integer for the graph width, default is the size of parent container
Add some bottom timeline references using the timeline object:
```javascript
var timeline = new Timeline('My timeline', function(interval) {
});
teleperiod.addTimeLine(timeline);
```
Draw the widget:
```javascript
teleperiod.draw();
```
Set a selected period for modifications:
```javascript
teleperiod.setSelection(
new Date(2015, 1, 10, 0, 0, 0),
new Date(2015, 1, 11, 0, 0, 0)
);
```
Usage exemples
--------------
Room reservations, vacation periods request, resources management ...