I wanted a simple desk calendar. Like the ones you’d get from the buisnesses you traded with over the previous year.

I had an eInk display which would work with a Raspberry Pi. Generating the calendar page as HTML and sending a screenshot to the eInk display was appealing to me, so after finding useful note on using CSS grid to display a calendar, I extended on it to make a calendar generator.

The generated HTML is intended for display on an eInk display, via a screen capture by running a browser on the command line, or a screenshot service.

The CSS on this project is optimized for display on Pimoroni’s seven-color eInk display for the Raspberry Pi.

Generating the calendar

Browsers have HTML and CSS engines we can use to lay out the calendar for us.

Start with three-line layout using CSS Grid where you wrap a list in a container with display: grid set on it, and format the list as a seven column display.

<div class="calendar-wrapper">
    <h1>December 2020</h1>
    <ul class="calendar">
    <li class="weekday">Sun</li>
    ...
    <li class="weekday">Sat</li>
    <li class="last-month">29</li>
    <li class="last-month">30</li>
    <li class="">1</li>
    ...
    <li class="">31</li>
    <li class="next-month">1</li>
    ...
    </ul>
</div>

Instead of frameworks, the JavaScript uses native date functions to figure out the current date (as determined by the system running the browser,) the start, end, and previous/next month’s overlapping dates. The calendar markup is generated using JavaScript template strings.

Starting from the current day:

var today = new Date();
var first = new Date(today.getFullYear(), today.getMonth(), 1);
var DoW   = first.getDay();

then you can check if DoW is a Sunday, and fill in the days from the previous month which fall in the first week accordingly. And yes, if you use a calendar that starts weeks on Monday, you may want to make a fix and submit a patch to the project on GitHub.

Adding a custom background, different typography, or even date-sensitive styling is a straightforward extension of the project. Other things to try would be to fetch personal or household calendar items and merge the data in with the calendar grid.

You can see the code in a Glitch project and at 7-calendar-cafe.glitch.me/. Patches are accepted on GitHub.

URL parameters

This project accepts the optional query string parameter month which can take on the value previous and next to display the calendar for the previous and next months.

The current date is highlighted when the calendar is displayed.

Using with eInk Display

I am able to run this on a stock RaspberryPi Zero W. Install the fully RaspberryPi OS with desktop. If you use the RaspberryPi imager you can specify a user to create as well as pre-fill the WiFi credentials. Be sure to enable ssh login.

Once the eInk display is attached to the Pi and the necessary drivers and libraries are installed, you can fetch a screenshot with the current calendar using:

chromium-browser --headless --screenshot="~/screenshot.png" --window-size=600,448 "https://7-calendar-cafe.glitch.me"

or

firefox --headless --screenshot --window-size=600,448 'https://7-calendar-cafe.glitch.me/'

I have not been able to run Firefox as a headless browser from the command line on Pi Zero W.

You need to be specific about the --window-size parameter for the dimensions of your eInk display’s screen.

You’ll need a script (in this case Python) which works with the Pimoroni eInk display’s libraries:

#!/usr/bin/env python3

import sys

from PIL import Image
from inky.inky_uc8159 import Inky

inky = Inky()
saturation = 0.5

image = Image.open("/home/pi/screenshot.png")

inky.set_image(image, saturation=saturation)
inky.show()

And a bash script can run the process daily once you set up a crontab entry for it.

cd $HOME
chromium-browser --headless --screenshot="~/screenshot.png" --window-size=600,448 "https://7-calendar-cafe.glitch.me" 
./calendar.py

Since the idea behind eInk is to only update when you need to, using a whole Raspberry Pi (even a Pi Zero W) feels like one’s over specified the hardware for the project.

The 7-color Pimoroni display has buttons you can program, and using them will be the next version of this project.

Show off your mods with the hashtag #SevenCalendarCafe on Twitter and the Fediverse.

The project’s title is a nod to both the Pimoroni Inky Impression and The Cocteau Twins.