Views - Timeline

The Views Timeline module is a flexible solution for creating and displaying interactive timelines in Drupal. It enables site administrators to build timelines directly from Views configuration—ideal for showcasing
events, milestones, or time-ordered data.

With support for 13 predefined layouts, custom field mapping (title, icon, date, description), dynamic color palette choices, and full theme override support via Twig, CSS, and custom templates, the module offers both
ease of use and creative freedom. Customize your timeline layout, style it with predefined or custom color palettes, or create completely custom designs for a powerful visual presentation.

Submit bug reports and feature suggestions, or track changes in the issue queue.

Requirements

This module requires no contributed modules outside of Drupal core.

Install as you would normally install a contributed Drupal module. For more information, see Installing Drupal Modules.

If using Composer:

composer require drupal/views_timeline

Enable the module using Drush:

drush en views_timeline

1. Go to: Structure → Views → Add new view
2. Choose the Views Timeline format from the View format options.
3. Map the appropriate fields from your View to Timeline fields (e.g., title, icon, date, description).
4. Select a Timeline layout from the available options (13 predefined layouts).
5. Pick a color palette or configure custom colors for the timeline. You can use one of 50 predefined color palettes or define custom colors.
6. If needed, override the layout using custom Twig templates (e.g., copy templates/views-timeline-layouts/layout-one.html.twig to your theme for customization).
7. Save your view configuration.

To fully customize your timeline layout and design:

• Override the default Twig template for specific layouts (e.g., views-timeline-layouts/layout-one.html.twig) by copying it into your custom theme's folder structure.
• Customize the design with custom CSS to adjust layout elements and styling.
• If you wish to use custom color palettes, define them within the theme or module settings.
• For advanced changes, modify the underlying HTML structure and CSS classes within the Twig templates.

Use standard Drupal theming practices to override templates and libraries via your theme or a custom module.

• Ensure Views are configured with valid fields and that the timeline data is rendering as expected.
• Check if your layout is correctly overridden and Twig templates are placed in the right location within your theme.
• Verify custom CSS styles are applied, and adjust selectors as necessary.
• If colors are not reflecting, confirm that the color palette settings are properly saved and applied to the timeline.

You can display content using standard pagination or enhance the user experience with an AJAX "Load More" button.

To Use Pagination:

1. Edit your View.
2. Under the Pager section, choose a pagination option (e.g., "Items per page, X items").
3. Save the View.

To Enable AJAX Load More:

1. Enable AJAX:
   • Edit your View.
   • In the Advanced section, set Use AJAX to Yes.
2. Install Views Show More Module:
   • Download from https://www.drupal.org/project/views_show_more.
   • Install and enable the module.
3. Configure Show More Pager:
   • In the Pager section of your View, select "Show more pager" (provided by the module).
   • Set the desired number of items to load per click.
   • Save the View.

Now your View will load more timeline elements dynamically when the user clicks the "Load More" button, without reloading the page.