Views Vis Timeline

Views Vis Timeline displays the results of a view on an interactive Vis Timeline: items on a time axis, in rows, with colors, and editable in place in Drupal modals.

It was built for the planning of a festival: shifts of volunteers per team, and the programme of shows per stage. It fits any content with dates: schedules, bookings, projects, events.

Features

• A Views style plugin for any content entity (nodes, taxonomy terms, ECK entities…) and for Search API indexes.
• Dates from datetime, daterange, smartdate, timestamp, created and changed fields, with an optional end date field.
• Rows from an entity reference field. Groups can be edited, and reordered by drag and drop when they are sorted on a weight field.
• Colors from a Color Field field or a text field holding a CSS color, also through a relationship. The text color follows the background for readability.
• Titles keep their Views rewrites, with formatting tags and icons.
• Editing on the timeline: double-click to add an item, drag to move it (saved right away, put back if the server refuses), edit and delete forms in modals. Entity access is checked for every operation.
• Initial window plugins: around the items, around now, from a field of the contextual filter entity, or automatic. Navigation can be restricted to the window. Relative windows are computed by the browser, so cached pages always show the right period.
• Time zones and all-day ranges are converted between Drupal and vis.js.
• Extensible: alter hooks for items, groups and windows, window plugins, a JavaScript API with events, and an overridable template.

Submodule: Views Vis Timeline Arrows

Draws arrows between items with the timeline-arrows library. Arrows are entities with a direction, a line style, a color and a description, referenced from the items.

Requirements

• Drupal 11.3 or later and the core Views module. No contributed module is required.
• vis-timeline 8.4.0, vis-data 7.1.2 and moment 2.30.1 are loaded from a CDN by default, and can be served locally with libraries-override.

Getting started

1. Install the module: composer require drupal/views_vis_timeline.
2. Create a view of a content entity or a Search API index and set its format to Vis Timeline.
3. Add the date, title, color and group fields to the view, and map them in the format settings.
4. To edit on the timeline, check “Enable timeline editing” and grant the “Edit content through Vis Timeline displays” permission.

The README explains the window plugins, time zones, local libraries and the extension points.

Project status

Alpha: the configuration may still change before the first beta. Bug reports and feature requests are welcome in the issue queue.