diff --git a/HISTORY.md b/HISTORY.md
index f9c3314a..cea287db 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -14,6 +14,7 @@ http://visjs.org
### Timeline
+- Implemented option `multiselect`, which is false by default.
- Added method `setData({groups: groups, items: items})`.
- Fixed range items not being displayed smaller than 10 pixels (twice the
padding). In order to have overflowing text, one should now apply css style
diff --git a/docs/timeline.html b/docs/old_timeline.html
similarity index 100%
rename from docs/timeline.html
rename to docs/old_timeline.html
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 23fdc98b..2928adcc 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -679,6 +679,16 @@ var options = {
+
+ multiselect |
+ boolean |
+ false |
+
+ If true, multiple items can be selected using ctrl+click, shift+click, or by holding items.
+ Only applicable when option selectable is true .
+ |
+
+
onAdd |
function |
@@ -1275,7 +1285,7 @@ timeline.off('select', onSelect);
When the Timeline is configured to be editable (both options selectable
and editable
are true
), the user can:
- - Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items
+ - Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when
multiselect: true
).
- Move selected items by dragging them.
- Create a new item by double tapping on an empty space.
- Create a new range item by dragging on an empty space with the ctrl key down.
diff --git a/examples/timeline/02_manipulation.html b/examples/timeline/02_manipulation.html
index 8062c449..86e79682 100644
--- a/examples/timeline/02_manipulation.html
+++ b/examples/timeline/02_manipulation.html
@@ -44,6 +44,11 @@
start: '2014-01-10',
end: '2014-02-10',
height: '300px',
+
+ // allow selecting multiple items using ctrl+click, shift+click, or hold.
+ multiselect: true,
+
+ // allow manipulation of items
editable: true,
/* alternatively, enable/disable individual actions:
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index 3c6de0f4..487bdcf1 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -35,6 +35,8 @@ function ItemSet(body, options) {
groupOrder: null,
selectable: true,
+ multiselect: false,
+
editable: {
updateTime: false,
updateGroup: false,
@@ -226,7 +228,7 @@ ItemSet.prototype._create = function(){
* {Function} groupOrder
* A sorting function for ordering groups
* {Boolean} stack
- * If true (deafult), items will be stacked on
+ * If true (default), items will be stacked on
* top of each other.
* {Number} margin.axis
* Margin between the axis and the items in pixels.
@@ -244,6 +246,9 @@ ItemSet.prototype._create = function(){
* Set margin for both axis and items in pixels.
* {Boolean} selectable
* If true (default), items can be selected.
+ * {Boolean} multiselect
+ * If true, multiple items can be selected.
+ * False by default.
* {Boolean} editable
* Set all editable options to true or false
* {Boolean} editable.updateTime
@@ -272,7 +277,7 @@ ItemSet.prototype._create = function(){
ItemSet.prototype.setOptions = function(options) {
if (options) {
// copy all options that we know
- var fields = ['type', 'align', 'order', 'stack', 'selectable', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
+ var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template','hide', 'snap'];
util.selectiveExtend(fields, this.options, options);
if ('orientation' in options) {
@@ -1465,15 +1470,18 @@ ItemSet.prototype._onAddItem = function (event) {
ItemSet.prototype._onMultiSelectItem = function (event) {
if (!this.options.selectable) return;
- var selection,
- item = this.itemFromTarget(event);
+ var item = this.itemFromTarget(event);
if (item) {
- // multi select items
- selection = this.getSelection(); // current selection
+ // multi select items (if allowed)
+
+ var selection = this.options.multiselect
+ ? this.getSelection() // take current selection
+ : []; // deselect current selection
var shiftKey = event.srcEvent && event.srcEvent.shiftKey || false;
- if (shiftKey) {
+
+ if (shiftKey && this.options.multiselect) {
// select all items between the old selection and the tapped item
// determine the selection range