Timeline for Flow

Timeline component to display data in time for Vaadin Flow

View larger

Close

View larger

Close

View larger

Close

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.

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 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);

Links

• Issue tracker
• Author Homepage
• View on GitHub
• Online Demo

Compatibility