HUGO CALENDAR HEATMAP

A customizable, interactive calendar heatmap for your Hugo site, in the style of a GitHub contributions calendar.

Hugov0.151.2+ext SourceGit Repo

SEE IT IN ACTION

FEATURES

What Does It Do?#
Hugo-Calendar-Heatmap is a widget that displays your Hugo blog content on a horizontal yearly grid calendar.
Who Is It For?#
Hugo-Calendar-Heatmap is for anyone running a Hugo site and wants an interactive, visual display of their post content data trends.

Lightweight#
Only weighs 1MB. Relies purely on HTML, CSS, and the open source JS library, Apache ECharts, for visualizing the data.
Easy to integrate#
Add the calendar anywhere on your Hugo site—as a partial in templates or as a shortcode within Markdown content.
Customizable#
ECharts offers many options for personalizing the calendar heatmap. Customize to your heart’s content, or use the default templates provided.

All local resources#
No third-party reliance (e.g. from a CDN) is required as the ECharts JS file can be bundled and used as a local dependency.
Quick to setup#
Works with most Hugo themes. Setup involves tweaking a few settings to match your Hugo content structure, and you’re good to go.
Responsive#
The calendar works on mobile and tablets, displaying a scrollbar when the viewport is not wide enough to display the widget in full.