<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.
</td>
</tr>
<tr>
<td>editable.add</td>
<trparent="editable"class="hidden">
<tdclass="indent">editable.add</td>
<tdclass="mid">boolean</td>
<tdclass="mid"><code>false</code></td>
<td>If true, new items can be created by double tapping an empty space in the Timeline. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.remove</td>
<trparent="editable"class="hidden">
<tdclass="indent">editable.remove</td>
<tdclass="mid">boolean</td>
<tdclass="mid"><code>false</code></td>
<td>If true, items can be deleted by first selecting them, and then clicking the delete button on the top right of the item. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.updateGroup</td>
<trparent="editable"class="hidden">
<tdclass="indent">editable.updateGroup</td>
<tdclass="mid">boolean</td>
<tdclass="mid"><code>false</code></td>
<td>If true, items can be dragged from one group to another. Only applicable when the Timeline has groups. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
<tr>
<td>editable.updateTime</td>
<trparent="editable"class="hidden">
<tdclass="indent">editable.updateTime</td>
<tdclass="mid">boolean</td>
<tdclass="mid"><code>false</code></td>
<td>If true, items can be dragged to another moment in time. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
@ -611,36 +606,32 @@ var options = {
<td>A map with i18n locales. See section <ahref="#Localization">Localization</a> for more information.</td>
<td>Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), or 'both'.</td>
</tr>
<tr>
<td>orientation.axis</td>
<trparent="orientation"class="hidden">
<tdclass="indent">orientation.axis</td>
<tdclass="mid">String</td>
<tdclass="mid"><code>'bottom'</code></td>
<td>Orientation of the timeline axis: 'top', 'bottom' (default), or 'both'. If orientation is 'bottom', the time axis is drawn at the bottom. When 'top', the axis is drawn on top. When 'both', two axes are drawn, both on top and at the bottom.</td>
</tr>
<tr>
<td>orientation.item</td>
<trparent="orientation"class="hidden">
<tdclass="indent">orientation.item</td>
<tdclass="mid">String</td>
<tdclass="mid"><code>'bottom'</code></td>
<td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
</tr>
<tr>
<td>selectable</td>
<tdclass="mid">boolean</td>
@ -834,8 +834,14 @@ var options = {
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
<td>Specify a fixed scale and step size for the time axis.</td>
</tr>
<trparent="timeAxis"class="hidden">
<tdclass="indent">timeAxis.scale</td>
<tdclass="mid">String</td>
<tdclass="mid">none</td>
<td>Set a fixed scale for the time axis of the Timeline. Choose from <code>'millisecond'</code>, <code>'second'</code>, <code>'minute'</code>, <code>'hour'</code>, <code>'weekday'</code>, <code>'day'</code>, <code>'month'</code>, <code>'year'</code>. Example usage:
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
</p>
<ul>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items</li>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
<li>Move selected items by dragging them.</li>
<li>Create a new item by double tapping on an empty space.</li>
<li>Create a new range item by dragging on an empty space with the ctrl key down.</li>
{border:"#C2FABC",background:"#74D66A",highlight:{border:"#E6FFE3",background:"#74D66A"},hover:{border:"#E6FFE3",background:"#74D66A"}},// 19: mint
{border:"#EE0000",background:"#990000",highlight:{border:"#FF3333",background:"#BB0000"},hover:{border:"#FF3333",background:"#BB0000"}},// 20:bright red
{border:"#EE0000",background:"#990000",highlight:{border:"#FF3333",background:"#BB0000"},hover:{border:"#FF3333",background:"#BB0000"}}// 20:bright red
Alex de Mulder
9 years ago