Directory

← Back

Timeline for Flow

Timeline component to display data in time for Vaadin Flow

Author

Rating

Popularity

200+

Overview

Timeline component is based on vis-timeline library.

It provides support to the following features:

  • Create a timeline with a defined visible range.
  • Make items readonly.
  • Update items content.
  • Give items a style by defining a class name.
  • Edit an item by resizing it.
  • Edit an item by drag and drop.
  • Multiple items selection.
  • Possibility to define zoom options (e.g. 1 day, 3 days, 5 days).
  • Items are shown connected by an horizontal line between them. (*)
  • Show tooltips for items.
  • Possibility to revert resizing or dragging if condition is not met.
  • Autoscrolling when reaching limits of visible range.
  • Tooltip on item update.

(*) Horizontal lines implementation is based on timeline-arrows.

License & Author

This Add-on is distributed under Apache 2.0 Timeline Component for Vaadin Flow is written by Vaadin Ltd.

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing.

Sample code

    // create items
    Item item1 = new Item(LocalDateTime.of(2021, 8, 11, 2, 30, 00),
        LocalDateTime.of(2021, 8, 11, 8, 00, 00), "Item 1");
    item1.setId("1");

    Item item2 = new Item(LocalDateTime.of(2021, 8, 11, 9, 00, 00),
        LocalDateTime.of(2021, 8, 11, 17, 00, 00), "Item 2");
    item2.setId("2");

    Item item3 = new Item(LocalDateTime.of(2021, 8, 12, 0, 30, 00),
        LocalDateTime.of(2021, 8, 12, 3, 00, 00), "Item 3");
    item3.setId("3");

    Item item4 = new Item(LocalDateTime.of(2021, 8, 12, 4, 30, 00),
        LocalDateTime.of(2021, 8, 12, 20, 00, 00), "Item 4");
    item4.setId("4");

    Item item5 = new Item(LocalDateTime.of(2021, 8, 12, 21, 30, 00),
        LocalDateTime.of(2021, 8, 13, 01, 15, 00), "Item 5");
    item5.setId("5");

    List<Item> items = Arrays.asList(item1, item2, item3, item4, item5);

	// make them editable
    items.forEach(i -> {
      i.setEditable(true);
      i.setUpdateTime(true);
    });
	
	// create timeline 
    Timeline timeline = new Timeline(items);

    // set timeline range
    timeline.setTimelineRange(
        LocalDateTime.of(2021, 8, 10, 00, 00, 00), LocalDateTime.of(2021, 8, 15, 00, 00, 00));

	// set multiselection to timeline
    timeline.setMultiselect(true);
	
	add(timeline);
// create items
    Item item1 = new Item(LocalDateTime.of(2021, 8, 11, 2, 30, 00),
        LocalDateTime.of(2021, 8, 11, 8, 00, 00), "Item 1");
    item1.setId("1");

    Item item2 = new Item(LocalDateTime.of(2021, 8, 11, 9, 00, 00),
        LocalDateTime.of(2021, 8, 11, 17, 00, 00), "Item 2");
    item2.setId("2");

    Item item3 = new Item(LocalDateTime.of(2021, 8, 12, 0, 30, 00),
        LocalDateTime.of(2021, 8, 12, 3, 00, 00), "Item 3");
    item3.setId("3");

    Item item4 = new Item(LocalDateTime.of(2021, 8, 12, 4, 30, 00),
        LocalDateTime.of(2021, 8, 12, 20, 00, 00), "Item 4");
    item4.setId("4");

    Item item5 = new Item(LocalDateTime.of(2021, 8, 12, 21, 30, 00),
        LocalDateTime.of(2021, 8, 13, 01, 15, 00), "Item 5");
    item5.setId("5");

    List<Item> items = Arrays.asList(item1, item2, item3, item4, item5);

    // make items readonly
    items.forEach(i -> i.setEditable(false));

    // create timeline
    Timeline timeline = new Timeline(items);

    // set timeline range
    timeline.setTimelineRange(LocalDateTime.of(2021, 8, 10, 00, 00, 00),
        LocalDateTime.of(2021, 8, 15, 00, 00, 00));

    add(timeline);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Bug fixes:

  • add support for Vaadin 23.3.x (#37)
Released
2023-01-19
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 15
Vaadin 16
Vaadin 17
Vaadin 18
Vaadin 19
Vaadin 20
Vaadin 21
Vaadin 22
Vaadin 23
Vaadin 24
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Timeline for Flow - Vaadin Add-on Directory

Timeline component to display data in time for Vaadin Flow Timeline for Flow - Vaadin Add-on Directory
## Overview Timeline component is based on [vis-timeline](https://visjs.github.io/vis-timeline/docs/timeline/) library. It provides support to the following features: - Create a timeline with a defined visible range. - Make items readonly. - Update items content. - Give items a style by defining a class name. - Edit an item by resizing it. - Edit an item by drag and drop. - Multiple items selection. - Possibility to define zoom options (e.g. 1 day, 3 days, 5 days). - Items are shown connected by an horizontal line between them. (*) - Show tooltips for items. - Possibility to revert resizing or dragging if condition is not met. - Autoscrolling when reaching limits of visible range. - Tooltip on item update. (*) Horizontal lines implementation is based on [timeline-arrows](https://github.com/javdome/timeline-arrows). ## License & Author This Add-on is distributed under Apache 2.0 Timeline Component for Vaadin Flow is written by Vaadin Ltd. ## Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing).
Online