Eleventy Publishing Calendar Plugin

An Eleventy plugin that provides a graphical calendar view of your site's publishing schedule, showing both upcoming and past posts. Each calendar entry links to the post and displays the source markdown file name.

Features

• HTML grid calendar view with posts listed by date
• Links to posts with file names
• Customizable appearance via options
• Support for multiple content types (e.g., posts, events)
• Navigation controls for previous/next month
• Uses Temporal API for date handling

Installation Requirements

• Node.js (version 16+ recommended for Temporal support; otherwise install @js-temporal/polyfill)
• Eleventy (11ty) project

Installation

1. Copy eleventy-plugin-publishing-calendar.js to your Eleventy project's root directory.

2. If using Node.js < 20, install the Temporal polyfill:

   npm install @js-temporal/polyfill

3. In your .eleventy.js file, add:

   import publishingCalendar from './eleventy-plugin-publishing-calendar';
   
   export default function(eleventyConfig) {
     eleventyConfig.addPlugin(publishingCalendar, {
       // options (see below)
     });
   };

Configuration Options

Pass options as the second argument to addPlugin:

• collections: Array of collection names to include (default: ['posts'])
• calendarClass: CSS class for the calendar container (default: 'publishing-calendar')
• dayClass: CSS class for day cells (default: 'calendar-day')
• postClass: CSS class for post entries (default: 'calendar-post')
• navClass: CSS class for navigation (default: 'calendar-nav')
• colors: Object with color overrides:
  • header: Background for day headers (default: '#f0f0f0')
  • today: Background for today (default: '#e0f7fa')
  • past: Background for past days (default: '#f5f5f5')
  • future: Background for future days (default: '#fff')
• layout: Layout style (currently only 'grid' supported)
• polyfillUrl: URL for the Temporal polyfill (default: jsdelivr CDN)

Usage

In your Eleventy templates (e.g., .njk, .md):

Nunjucks (.njk):

• For current month: {% publishingCalendar %}
• For specific month: {% publishingCalendar 11, 2025 %} (Note the comma)

Liquid (.liquid):

• For current month: {% publishingCalendar %}
• For specific month: {% publishingCalendar 11 2025 %}

The plugin generates HTML with inline CSS. Override styles in your site's CSS for customization.

Content Types

Set contentType in post frontmatter to differentiate types (e.g., contentType: event). The plugin adds this as a CSS class for styling.

Navigation

Previous/Next links are included. For dynamic navigation without page reloads, implement client-side JavaScript to update the calendar based on URL parameters or AJAX.

Example

// .eleventy.js
eleventyConfig.addPlugin(publishingCalendar, {
  collections: ['posts', 'events'],
  colors: {
    today: '#ffeb3b',
    past: '#e0e0e0'
  }
});

<!-- In a template -->
<h1>Publishing Calendar</h1>
{% publishingCalendar %}